异步加载JavaScript并与内联代码耦合

Loading JavaScript asynchronously and coupling with inline code

本文关键字：代码耦合加载 JavaScript 异步更新时间：2023-09-26

"降级脚本标签"的组合http://ejohn.org/blog/degrading-script-tags/Script DOM元素是异步加载外部JavaScript并与内联代码耦合的一种很好的模式。

Steve Souders在这篇文章中很好地描述了这种组合：http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/

基本上，一旦加载了外部脚本，页面上的脚本就会由该外部脚本触发。我一直在想，如果外部脚本下载后运行的脚本试图添加事件处理程序，会发生什么。DOM可能尚未完成加载，因此添加事件处理程序可能会失败。

然而，Steve Souders的文章非常透彻，甚至还讨论了LazyLoading。这意味着在加载页面之前不会下载外部脚本（因为添加到DOM的脚本元素是在window.onload内完成的）。这确保了添加事件处理程序的工作。

所以一切看起来可能都很好，但我留下了一个小问题——考虑到我们一直在等待页面加载，用户可以与页面交互，甚至可能在添加事件处理程序之前离开页面。

我的琐事是合理的担忧吗？如果是这样的话，有没有强有力的方法来解决这个问题？

谢谢，Paul

您可以在DOM加载时将脚本元素添加到DOM中。只需在内联脚本中获取对head元素的引用并注入资产即可。通过这种方式，您可以在渲染DOM时触发浏览器加载外部脚本。

您是对的，因为注入的脚本加载在内存中并不意味着DOMContentLoaded事件已经启动。您必须侦听该事件，才能在加载所有外部资产时触发的回调中执行与DOM相关的操作。