Web性能优化

脚本的加载与执行

1.在</body>闭合标签之前，将所有的<script>标签放到页面底部，这能确保在脚本执行前页面已经完成了渲染

• 在JavaScript文件的下载、执行过程中，页面的渲染和用户交互会被阻塞

• 现代浏览器可以并行下载JavaScript文件，但是JavaScript文件的下载仍然会阻塞其他类型资源的下载

• 如果将脚本放到页面顶部，会由于脚本的下载与执行导致明显的延迟，通常表现为空白页面、用户无法浏览内容、无法与页面进行交互

2.合并脚本，减少页面中外链脚本文件的数量将会改善性能

• 由于下载每一个外链JavaScript，都会对应一个HTTP请求，而HTTP请求会带额外的性能开销，因此下载单个100KB的文件将比下载4个25KB的文件更快，因此可以使用打包工具对脚本进行打包处理

4.对JavaScript文件进行压缩，减少JavaScript文件大小

3.对某些脚本文件使用无阻塞的下载方法

• 使用延迟脚本：<script>标签拥有defer属性，这个属性的用途加载后续文档元素的过程将和脚本的加载并行进行（异步），但是脚本的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成

• 使用异步脚本：<script>标签拥有async属性，这个属性的作用是加载和渲染后续文档元素的过程将和 脚本的加载并行进行，脚本加载完毕立即执行，(执行时同样阻塞加载与渲染后续文档)

3.动态脚本元素：可以通过JavaScript动态创建<script>元素来加载JavaScript文件。这种技术的重点在于：无论何时启动下载，文件的下载与执行不会阻塞页面其他进程。

未完。。。