JS代码性能优化

代码加载

• 使用非阻塞式的 script 脚本
• 尽量减少脚本文件的数量
• 合理拆分 js 代码（适当增加网络请求以防止 js 文件过大导致的阻塞）
• 考虑使用动态脚本标签
• 使用 defer 属性
• 与页面渲染无关的脚本内容放在 </body> 标签之前

数据访问

• 能使用字面量的先考虑使用字面量，不能的尽量使用局部变量
• 尽量减少对象的嵌套
• 降低prototype 的查找次数（少用原型链继承）
• 不要使用 with 语句（貌似也很少见）
• 闭包可能导致内存泄漏的问题，需要慎用

DOM 操作

• 不要在循环中使用 DOM API
• 遍历 HTMLElement 组成的集合时，先缓存集合的 length
• 需要变量生成 DOM 内容时，先使用临时变量缓存，然后再一次性设置
• innerHTML 与常规的 DOM API 并没有太大的性能差异，不过可能存在安全性差异
• 一个DOM元素需要多次访问时，使用临时变量进行缓存，然后用这个临时变量去操作DOM
• 选择 HTML 元素的时候，优先考虑使用 querySelector() API
• DOM 修改了元素的几何属性会导致页面的重排，重排会导致性能问题，导致重排的操作有以下几种
  • 添加或删除可见的 DOM 元素
  • 元素位置改变
  • 元素尺寸改变（因为边距，填充，边框宽度，宽度，高度等属性改变）
  • 内容改变（文本或图片的尺寸发生了变化）
  • 页面初始化
  • 浏览器窗口改变尺寸
• 减少重绘重排的操作：
  • 使用 cssText 将多个样式修改的操作合并成一个
  • 修改 class name 而不是修改 style 属性
  • 进行隐藏元素 ---- 修改元素 ---- 显示元素的操作