gpt4 book ai didi

javascript - 如何使用延迟和内联脚本保留脚本执行顺序?

转载 作者:行者123 更新时间:2023-11-29 19:09:34 25 4
gpt4 key购买 nike

无论如何,是否可以保留混合“延迟”或内联脚本的执行顺序?

例如。考虑以下场景 -

<head>
<script src="/polyfills.js" />
<script>
// Small inline script that needs polyfills to work
</script>
<script src="/feature1.js" defer>
<script src="/feature2.js" defer>
</head>

我的目标是让所有脚本都具有defer 行为并保持执行顺序。但是,在这里,我不能将 defer 添加到 polyfills 脚本,因为这样做会破坏内联脚本。

预期的执行顺序

polyfills (defer) => inline-script (how?) => feature1 => feature2

内联脚本是一个很小的代码片段,不值得浪费一个请求。

例如,我能否编写一个函数来包装内联脚本并仅在 polyfill 加载后执行)?

最佳答案

如果你想让它保留夹在中间的内联脚本的顺序,那么,关于延迟,我看你是被塞满了。

  • 内联脚本不会延迟,因此会失去与延迟的“之前”和“之后”脚本相关的顺序。
  • 你可以使用 this answer 中的技巧,但是 window.onload 监听器将等待所有 延迟脚本,而不仅仅是夹在脚本(您的 polyfill)之前的脚本。你不能从推迟“之前”而不是“之后”中获益。

如果所有三个 src'd 脚本都被延迟,那么就没有自然发生的中间事件(在 polyfill 之后但在功能之前)触发处理程序 - 这正是您想要的。

郑重声明,这里介绍了如何延迟内联脚本,直到所有延迟的脚本都已加载,这可能会带来一些好处,但没有您希望的那么多。

<head>
<script src="/polyfills.js" defer></script>
<script src="/feature1.js" defer></script>
<script src="/feature2.js" defer></script>
<script>
window.addEventListener('load', function() {
// Small inline script that needs polyfills to work
});
</script>
</head>

关于javascript - 如何使用延迟和内联脚本保留脚本执行顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40199551/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com