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元素

      参考资料

  • DeveloperWorks: JavaScript 的性能优化：加载和执行

原文: https://leohxj.gitbooks.io/front-end-database/content/theory/js-load-and-exec.html