web性能优化 - JS延迟

概述

(摘抄自 前端大学 微信号)
页面被浏览器解析是自上而下，
而js 的加载、解析和执行会阻塞页面的渲染过程，
如果此时js中使用了某些DOM操作，还要等待页面DOM加载完毕，是浪费时间也无意义的，
因此我们希望 js 脚本能够尽可能的延迟加载，提高页面的渲染速度。

我了解到的几种方式是：

1. 将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。

2. 给 js 脚本添加 defer属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。

3. 给 js 脚本添加 async属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。

4. 动态创建 DOM 标签的方式，我们可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。

相关资料：
《JS 延迟加载的几种方式》
《HTML 5 <script> async 属性》