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

“降级脚本标记”和脚本DOM元素的组合是异步加载外部JavaScript并与内联代码耦合的好模式

Steve Souders在本文中很好地描述了这种组合：

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

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

所有这些看起来都很好，但我还有一个小问题——由于我们一直在等待页面加载，用户可以与页面交互，甚至可能在添加事件处理程序之前离开页面

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

谢谢，

---

Paul

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

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