《高性能js》笔记一二

1、对象成员嵌套越深，读取速度越慢。比如执行 location.href 总是比 window.location.href 要快。

2、在函数内引用全局变量时需要注意，减少重复调用全局变量，对于需要许多次重复引用某个全局变量，可事先在函数内引用一次赋值好，在内部作用域内调用我们内部赋值的变量性能会更好。

3、在有必要多次读取查询同一个对象的成员时，请提前赋值或者缓存它：比如 for 循环中：

for(var i = 0; i<arr.length; i++){
  //……
}

//应该使用更性能的写法,这样避免每一次循环都要去查找一次 arr 的 length：
for(var i = 0,len = arr.length; i<len; i++){
  //……
}

4、访问 DOM 是有代价的：“过桥费”；修改元素则更为昂贵，浏览器会重新计算并渲染元素
如有必要，请对访问节点缓存；对DOM修改，进行所有修改完成后的一次性写入。

5、innerHTML 与 createElement() ，性能相差无几；但在除开最新版 WebKit 内核之外的浏览器中（这里的最新版是作者那个年代时的最新版，目前我没测试，暂不确定），innerHTML 会更快一些。

6、创建新元素时，如果可以通过克隆现有元素实现，则采用克隆方式创建：
element.cloneNode() 替代 document.createElement()

7、选择器 API，最新的 querySelector、querySelectorAll 等性能更快。

8、了解“重排”与“重绘”
当 DOM 修改变化后影响到了元素的几何属性（宽高等），浏览器需要重新计算元素几何属性。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树，这个过程叫 重排（reflow）；完成重排后，浏览器会重新绘制受影响部分到屏幕中，该过程叫 重绘（repaint）。
当 DOM 变化并不影响几何属性，仅涉及显示样式外观，就会只执行一次 重绘 便可。比如：元素的背景色改变。

9、在 IE 中，使用 css hover 对大量元素几何应用时，性能会很差，应避免。

10、使用事件委托来 优化 那种许多元素需要绑定同一个事件的情况。我的另一篇文章有讲事件委托：Link

11、for/while/for…in 几种循环里面，for…in最慢

12、位操作 具有性能优势。如果可以，优先考虑位运算符。常见使用姿势，见我另一篇笔记分享。

13、合并压缩资源，各类压缩工具的使用

14、缓存静态html 离线存储manifest

15、使用内容分发 CDN