一. SVG的优化
1. 把一些要重复使用的元素都写在元素里。的子元素在文档解析的时候也不会渲染,只有在引用的时候才渲染,所以这样就可以做到一次解析,处处渲染,而不是每次使用的时候都解析一次,渲染一次,从而提高了SVG的性能。
2. 使用内部的CSS样式表的渲染速度,要比使用外部的CSS样式表更快。
3. 在元素的属性x, y, width, height使用百分比的紧致界,能够将需要计算的滤镜效果的区域减少到最小,从而加快图形显示速度。
4. 尽可能少用透明度属性(opacity),使用透明度属性会增加美观度,但却是以牺牲性能为代价的。尽量使用“fill-opacity”或“stroke-opacity”这两个开销小得多的属性。
5. 让需要不断重绘的区域尽可能小。
6. 尽量减少色彩渐变和滤镜效果,这两个都是牺牲性能的大户。
7. 尽可能使用“fill”属性,而不是使用“stroke”属性,因为“stroke”属性的计算开销很大。
8. 推荐一个优化SVG的工具: http://svgoptimiser.com/forums/
9. 可以在服务器实现动态SVG内容的生成,然后发送到客户端进行显示。这样客户端负责的事情相对单纯些,主要是图形渲染。

二. JavaScript脚本的优化
1. 循环
1)如果要与数组长度作比较,应该事先将数组的length属性放入一个局部变量中,减少查询次数。
2)尽量使用局部变量,局部变量的速度要比全局变量的访问速度更快,因为全局变量是全局对象的成员,而局部变量是放在函数的栈当中的,所以访问速度更快。
3)尽量避免不定义就使用变量。因为浏览器会一层一层地向上查找该变量,一直到最后都没找到才定义新的变量,而这样会很影响性能。
4)尽量不使用Eval。使用Eval在运行时再次调用解释引擎对内容进行解析,需要消耗大量时间。
5)对字符串进行循环操作,譬如替换、查找,应该使用正则表达式,因为本身JavaScript的循环速度就比较慢,而正则表达式的操作是用C语言写成的API,性能很好。
6)避免使用“with”关键字。它的对象名并没有缓存,只是形式上的简化,本质上依旧是一次次的变量查找。

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/html/88