动态添加的带有defer属性的脚本标签的执行顺序?

问题描述 投票:0回答:2

我有一些动态创建小部件的应用程序。某些小部件需要包含一些库(例如 Codemirror、Tinymce、jQuery 等)。这些脚本是在首次创建小部件时动态添加到文档中的,否则根本不包含它们(预先包含所有可能的小部件脚本而不在每个请求中使用它们会浪费资源)。

小部件可以在服务器端或客户端创建。在客户端,脚本动态添加到页面上,或者由服务器在生成的 html 输出中添加为脚本标记。

如果在客户端,我注意到执行顺序不被遵守。例如,一些 Codemirror 插件首先加载(因为更轻量级),但它们失败,因为主库尚未加载(即使它作为脚本标签出现在它们之前)。

我尝试使用

defer
属性,根据 MDN 尊重出现的执行顺序,即使脚本是异步加载的。但我注意到它失败了(note我只使用
defer
属性而不是
async
)。到目前为止已在 Firefox 和 Chrome 上进行了测试。

动态添加的脚本标签也是如此吗?

如果没有,为了尊重执行顺序,有什么替代方案(不使用 onload 回调)?

谢谢!

javascript deferred-execution
2个回答
0
投票

我通过使用回调等待脚本加载后再在 DOM 上附加新脚本(这取决于之前的脚本)解决了这个问题。

但是我希望这个过程由浏览器处理(例如使用

defer
属性)。

如果有人有一个解决方案,其中浏览器可以处理动态添加的脚本标签的所有这些互连,请随时发布答案。


0
投票

我认为杰克·阿奇博尔德(Jake Archibald)对你的情况有一个解决方案。请参阅下面的链接。 https://web.dev/articles/speed-script-loading#the_dom_to_the_rescue

© www.soinside.com 2019 - 2024. All rights reserved.