编写高性能的JavaScript

常见编码规范

• 将 js 脚本放在页面底部，加快渲染页面
• 将 js 脚本将脚本成组打包，减少请求
• 使用非阻塞方式下载 js 脚本
• 尽量使用局部变量来保存全局变量
• 遵循严格模式：“use strict”;
• 尽量减少使用闭包
• 减少对象成员嵌套
• 缓存 DOM 节点访问
• 避免使用 eval()和 Function()构造器
• 尽量使用直接量取创建对象和数组
• 最小化重绘(repaint)和回流(reflow)

为什么 JS 要放到 body 尾部？

如果 JS 需要绑定操作 DOM，那么放在 header 中如果处理不当就不会绑定到 DOM

JS 引擎是独立于渲染引擎存在的。 我们的 JS 代码在文档的何处插入，就在何处执行。当 HTML 解析器遇到一个 script 标签时，它会暂停渲染过程，将控制权交给 JS 引擎。JS 引擎对内联的 JS 代码会直接执行，对外部 JS 文件还要先获取到脚本、再进行执行。等 JS 引擎运行完毕，浏览器又会把控制权还给渲染引擎，继续 CSSOM 和 DOM 的构建。

浏览器之所以让 JS 阻塞其它的活动，是因为它不知道 JS 会做什么改变，担心如果不阻止后续的操作，会造成混乱。

结论：

• 如果 JS 在 header 中，浏览器会阻塞并等待 JS 加载完毕并执行
• 如果 JS 在 body 尾部，览器会进行一次提前渲染，从而提前首屏出现时间

参考 demo: 执行 /性能优化/testDemo/slowServer/index.js，注意查看终端

非核心代码的异步加载

• 动态脚本加载
  • 使用 JS 创建一个 script 标签再插入到页面中
• defer（IE）
  • 整个 HTML解析完后才会执行，如果是多个，按照加载顺序依次执行
• async
  • 加载完之后立即执行，如果是多个，执行和加载顺序无关

header 中 meta

兼容性配置，让 IE 使用最高级的 Edge 渲染，如果有 chrome 就使用 chrome 渲染。

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

如果是双核浏览器，优先使用 webkit 引擎

<meta name="render" content="webkit" />

使用节流和防抖

懒加载

懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。
对于图片来说，先设置图片标签的 src 属性为一张占位图或为空，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。