Prefer DEFER TO ASYNC

前几天读到Steve Sounder的一篇文章,他推荐优先使用DEFER而不是ASYNC.

主要原因如下:

  1. ASYNC脚本会阻塞所有在它之后下载完成的同步脚本
  2. DEFER脚本总是会跟ASNYC脚本同时或是之后执行
  3. DEFER脚本永远不会阻塞同步脚本,然后ASYNC脚本也许会(依赖于下载ASYNC脚本有多快)
  4. 如果你使用过多的ASYNC脚本,不妨把它替换为DEFER,如果你的页面的DOMInteractive时间很长,也许结果会让你意想不到

另外一些其它有意思的总结:

  1. 阻塞渲染的罪魁祸首是JavaScript的执行
  2. 同步JavaScript脚本会阻塞HTML的解析
  3. ASYNC脚本不仅会阻塞渲染,而且还会阻塞其它同步脚本的执行
  4. 如果脚本是用于渲染页面中的关键内容的,那么它就必须同步加载该脚本;相反,如果该脚本不是用于关键内容渲染的,那么我们就可以异步加载它(也就是说,也并不是所有脚本都必须是异步加载的)
  5. ASYNC脚本一旦下载成功就会立即解析和执行,然而,DEFER脚本下载成功后并不立即执行,直到HTML解析完成(performance.timing.domInteractive
  6. ASYNC脚本的执行顺序不确定,然而DEFER脚本是按顺执行的(依据在DOM中的顺序)
  7. ASYNC脚本和DEFER脚本不会阻塞HTML解析,但是他们能阻塞渲染。(这种情况发生在渲染完成前,它们已经被解析和执行并且接管主线程)
  8. DEFER脚本的执行会推迟DOMContentLoad事件触发的,因为它是在DOMInteractiveDOMContentLoaded之间执行的
  9. ASYNC会覆盖DEFER,所以在大多数的浏览器中同时指定它们二个与只指定ASYNC是一样的效果

Related Posts

Xin(Khalil) Zhang 02 January 2017
blog comments powered by Disqus