代码层面浏览器优化

一、 减小dom操做：类数组是实时更新的
类数组集合, 在脚本中 document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合，常见的类数组还有arguments对象和DOM方法的返回结果。对这些类数组集合操做是尽可能转为数组类型再对其进行操做。
Array.prototype.slice.call(arrayLike)
若是不转化为数组则应该尽可能在对类数组for循环时对其如length属性进行缓存成局部变量，避免每次循环都访问一次。

二、 避免大量的元素重绘（样式改变）、重排（布局改变）
注：重排必定会重绘。
具体实现：①样式合并，如ele.style.borderLeft = '1px';
ele.style.borderRight = '2px'; 改为
ele.style.padding = '5px';

ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

•
②将须要屡次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其余元素。例若有动画效果的元素就最好设置为绝对定位。

③在内存中屡次操做节点，完成后再添加到文档中去（可以使用fragment元素）。例如要异步获取表格数据，渲染到页面。能够先取得数据后在内存中构建整个表格的html片断，再一次性添加到文档中去，而不是循环添加每一行。（jsRender,arttemple渲染模板的产生）。

三、 每次 eval 或Function 构造函数做用于字符串表示的源代码时，脚本引擎都须要将源代码转换成可执行代码。这是很消耗资源的操做 —— 一般比简单的函数调用慢 100倍以上。 使用 eval和 Function也不利于Javascript 压缩工具执行压缩。

四、 减小做用域链查找
前文谈到了做用域链查找问题，这一点在循环中是尤为须要注意的问题。若是在循环中须要访问非本做用域下的变量时请在遍历以前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤为重要，由于全局变量处于做用域链的最顶端，访问时的查找次数是最多的。

5 、数据访问
　　Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问须要更大的开销。当出现如下状况时，建议将数据放入局部变量：
　　a. 对任何对象属性的访问超过 1次
　　b. 对任何数组成员的访问次数超过 1次
　　另外，还应当尽量的减小对对象以及数组深度查找。
六、 字符串拼接
在 Javascript中使用”+”号来拼接字符串效率是比较低的，由于每次运行都会开辟新的内存并生成新的字符串变量，而后将拼接结果赋值给新变量。与之相比更为高效的作法是使用数组的 join方法，即将须要拼接的字符串放在数组中最后调用其 join方法获得结果。不过因为使用数组也有必定的开销，所以当须要拼接的字符串较多的时候能够考虑用此方法。

七、CSS选择符优化
在大多数人的观念中，都以为浏览器对 CSS选择符的解析式从左往右进行的，例如 #toc A { color: #444; }这样一个选择符，若是是从右往左解析则效率会很高，由于第一个 ID选择基本上就把查找的范围限定了，但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符，浏览器必须遍历查找每个 A标签的祖先节点，效率并不像以前想象的那样高。根据浏览器的这一行为特色，在写选择符的时候须要注意不少事项，有兴趣的童鞋能够去了解一下。