《高性能Javascript》 Summary（一）

 

第一章、加载和执行 Loading & Execution

原因：Javascript 的执行导致页面渲染中止等待。

解决：

1. 将script放在页面底部，紧靠body 闭合标签之前，保证页面在script执行之前渲染完成。
2. 将script成组打包，减少script的请求数量。
3. 用非阻塞的方式加载script。（设置defer属性；动态创建script标签；使用xhr下载脚本注入到页面）

第二章、数据访问 Date Access

原因： 在Javascript中，数据存储位置可以对代码整体兴能产生重大影响。有四种数据访问类型：直接量，变量，数组项，对象成员。直接量和变量访问快，数组项和对象访问慢。

解决：

1. 避免使用with语句改变上下文执行环境，应该适当小心的使用try catch的catch子句，他有同样的效果。
2. 嵌套对象成员会造成重要性能影响，尽量少用。
3. 一个属性或方法在原型链位置越深，访问速度越慢。
4. 访问局部变量快。将经常使用的对象成员，数组项和域外变量存入局部变量中。

 

第三章、DOM编程 DOM Scripting

原因：DOM和 Javascript(ECMAScript)实现保持相互独立。两者就像两座岛屿，ECMAScript每次访问DOM时，都会交上一次‘过桥费’,访问越多，交得越多。

解决：

1. 最小化DOM的访问，在Javascript端尽量做更多的事情。
2. 将反复使用的地方使用局部变量存放DOM引用。
3. 小心处理HTML集合（访问慢，总是对底层文档进行查询），将Length缓存到变量中，在迭代中使用这个变量。如果经常操作html集合，可以将集合拷贝到数组中使用。
4. 如果可以的话使用更快的API，如querySelectorAll and firstElementChild。
5. 注意重绘和重排：批量修改style, 离线操作dom树，缓存并减少对布局信息的访问。
6. 动画中使用绝对定位(脱离文档流，不影响文档流的dom重绘重排)，使用拖放代理。
7. 使用事件委托技术最小化事件句柄数量。

《高性能Javascript》  Summary（二）