JS文件加载/阻塞问题（性能优化）

解决方案

• js放最后
• 同步转异步
  • async
  • defer

defer和async

介绍

 蓝色线代表网络读取（脚本下载），红色线代表执行，这俩都是针对脚本的；绿色线代表 HTML 解析。

• async属性，浏览器会立即下载相应的脚本，在下载的过程中页面的处理不会停止，下载完成后立即执行，执行过程中页面处理会停止。
• defer属性，浏览器会立即下载相应的脚本，在下载的过程中页面的处理不会停止，等到文档解析完成后，DOMContentLoaded 事件触发之前，脚本才会执行。

同一标签同时使用defer、async属性时，遵循async

对比

相同：

• defer 和 async 在网络读取（下载）方面是一样的，都是异步的（相较于 HTML 解析）
• defer/async都只适合与操作外部脚本
• 对于 inline 的 script 无效
• 在操作DOM脚本时最好不要使用async/defer，因为比如使用async时可能页面还没加载完，就执行了js代码，这样很可能产生异常；如果一定要使用，可以把需要操作 DOM 的js 部分放在 DOMContentLoaded 事件回调中执行

不同：

• defer：同步执行。是最接近我们对于应用脚本加载和执行的要求的，尤其对于有script文件之间有依赖的情况（依赖就是可能这个js文件引用了上一个js文件的内容），它是按照加载顺序执行脚本的。等文档解析完之后执行，即加载执行都不阻塞
• async ：乱序执行，对它来说脚本的加载和执行是紧紧挨着的，所以不管声明顺序，只要加载完就立刻执行，会阻塞文档解析，即加载不阻塞，执行阻塞