前端工程师手册

JavaScript的加载与执行

浏览的渲染线程和JS执行线程是互斥的,并且JavaScript默认是阻塞加载的。页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长。

加载

不管是script标签直接引入的情况,还是src加载的外部资源,都会阻塞页面的渲染。所以一般我们为了从体验上考虑,会将JS文件放置在body标签闭合之前。好消息是:从 IE 8、Firefox 3.5、Safari 4 和 Chrome 2 开始都允许并行下载 JavaScript 文件。但是只是JS文件可以并行下载,渲染还是被阻塞的, 页面仍然必须等待所有 JavaScript 代码下载并执行完成才能继续。

执行

每当JavaScript文件加载完成后,都会立刻执行该文件。所以你会看到下一次的请求并不是在上一次请求结束之后立即开始,中间的耗时就是上一个脚本文件的执行时间。

优化建议

  • script脚本文件放置在body标签闭合之前
  • 减少script请求数量
  • 无阻塞脚本, 在页面加载完成后才加载 JavaScript 代码。这就意味着在 window 对象的 onload事件触发后再下载脚本:
    • defer, async
    • 动态添加script元素

参考资料