异步脚本加载和加载时间过长答案

【问题标题】：Asynchronous script loading and excesive load time异步脚本加载和加载时间过长
【发布时间】：2014-05-22 16:23:38
【问题描述】：

我知道 defer 和 async，但我仍然怀疑异步加载在 UX 方面是否完全异步

我拥有的所有 JS 都流水线化到 application.js 并添加到

标记的底部。

现在，那里的一些代码会像这样异步添加其他脚本（即用于分析）：

script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'http....js'
document.body.appendChild(script)

一切都好... JS 不会阻塞渲染，在加载后执行等等，但是有一个问题！如果异步加载的脚本被加载了 15 秒，就像我们刚刚添加的一个跟踪工具一样，会发生什么？我可以注意到页面没有无响应，DOM 准备就绪当然被触发了，但是在.appendChild(script) 之后仍然可以加载的图像或 application.js 中的其余 Javascript 会发生什么？

【问题讨论】：

标签： javascript performance

【解决方案1】：

appendChild 仅在文档正文中添加一个脚本元素。

脚本元素的下载只有在添加到正文后才会开始。这不会阻止在 appendChild 之后执行 javascript。

Nicholas C. Zakas 写了一篇很好的文章来解释它是如何工作的 article

【讨论】：

嗨 Marco，关于影响 JS 其余部分的部分现在很清楚，因为 JS 执行是单线程的，并且新加载的脚本最后执行，但是如果 15 秒加载是添加到要加载的其余资源？想象一下，你有很多异步触发的 ajax 调用、正在加载的图像等，现在你有 15 秒的加载 JS 添加到等式:) ？谢谢
nczonline.net/blog/2009/06/23/…@Madhu 的一条评论——JavaScript 是单线程的……我们谈论的不是 JavaScript 执行，而是 JavaScript 被下载。 ... 创建动态脚本标签时，代码会交给 JavaScript 引擎执行，但排队不会像脚本标签静态嵌入页面那样阻塞页面。