第一章、加载和执行 Loading & Execution
原因:Javascript 的执行导致页面渲染中止等待。
解决:
- 将script放在页面底部,紧靠body 闭合标签之前,保证页面在script执行之前渲染完成。
- 将script成组打包,减少script的请求数量。
- 用非阻塞的方式加载script。(设置defer属性;动态创建script标签;使用xhr下载脚本注入到页面)
第二章、数据访问 Date Access
原因: 在Javascript中,数据存储位置可以对代码整体兴能产生重大影响。有四种数据访问类型:直接量,变量,数组项,对象成员。直接量和变量访问快,数组项和对象访问慢。
解决:
- 避免使用with语句改变上下文执行环境,应该适当小心的使用try catch的catch子句,他有同样的效果。
- 嵌套对象成员会造成重要性能影响,尽量少用。
- 一个属性或方法在原型链位置越深,访问速度越慢。
- 访问局部变量快。将经常使用的对象成员,数组项和域外变量存入局部变量中。
第三章、DOM编程 DOM Scripting
原因:DOM和 Javascript(ECMAScript)实现保持相互独立。两者就像两座岛屿,ECMAScript每次访问DOM时,都会交上一次‘过桥费’,访问越多,交得越多。
解决:
- 最小化DOM的访问,在Javascript端尽量做更多的事情。
- 将反复使用的地方使用局部变量存放DOM引用。
- 小心处理HTML集合(访问慢,总是对底层文档进行查询),将Length缓存到变量中,在迭代中使用这个变量。如果经常操作html集合,可以将集合拷贝到数组中使用。
- 如果可以的话使用更快的API,如querySelectorAll and firstElementChild。
- 注意重绘和重排:批量修改style, 离线操作dom树,缓存并减少对布局信息的访问。
- 动画中使用绝对定位(脱离文档流,不影响文档流的dom重绘重排),使用拖放代理。
- 使用事件委托技术最小化事件句柄数量。