异步脚本载入提高页面性能

可能很多人都知道JavaScript的载入和渲染会暂停DOM解析，但可能仍缺乏直观的体验。 本文通过几个例子详述脚本对页面渲染的影响，以及如何使用异步脚本载入策略提供页面性能和用户体验。 包括在脚本载入缓慢或错误时尽早显示整个页面内容，以及早点结束浏览器忙提示（进度条、旋转图标、状态栏等）。

DOM 渲染流程

要理解异步脚本载入的用处首先要了解浏览器渲染DOM的流程，以及各阶段用户体验的差别。 一般地，一个包含外部样式表文件和外部脚本文件的HTML载入和渲染过程是这样的：

1. 浏览器下载HTML文件并开始解析DOM。
2. 遇到样式表文件 link[rel=stylesheet]时，将其加入资源文件下载队列，继续解析DOM。
3. 遇到脚本文件时，暂停DOM解析并立即下载脚本文件。
4. 下载结束后立即执行脚本，在脚本中可访问当前

   World!

我们编写服务器端代码（见本文最后一章），让 /will-not-stop-loading.js始终处于等待状态。 此时页面的显示效果：

脚本等待下载完成的过程中，后面的 World不会显示出来。直到该脚本载入完成或超时。 试想如果你在 中有这样一个下载缓慢的脚本，整个 都不会显示， 势必会造成空白页面持续相当长的时间。 所以 较好的实践方式是将脚本放在 尾部。

很多被墙的网站加载及其缓慢就是因为DOM主体前有脚本被挡在墙外了。

DOMContentLoaded 延迟

既然脚本载入会暂停DOM渲染，OK我们把脚本都放在 尾部。 这时页面可以被显示出来了， 但是在脚本载入前， DOMContentLoaded事件仍然不会触发。 请看：

   


  
Hello
  
World!
  
   

这时 Wrold!会显示，但浏览器忙指示器仍在旋转。 这是因为 DOM 仍然没有解析完成，毕竟最后一个