编写高能的js

常见编码规范

• 将 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 属性，这样图片就会去下载资源，实现了图片懒加载。