1

有几种技术可以异步下载外部 javascript，并且有几种技术可以将异步下载与内联代码结合起来以保持执行顺序。

但是，如果有对此领域有深入了解的人能够回答，我将不胜感激。

第一个问题更多地只是检查控制内联代码的执行是否像我认为的那样明显。

说我有这个：

inline-script-1 (script I have no control over)
inline-script-2 (my script)

其中 inline-script-2 是我可以添加到页面的代码，但 inline-script-1 不受我的控制（请不要为此输入“为什么不”类型的问题 - 这就是我赢的原因不要让这篇文章进一步膨胀）。

假设在 [异步下载] 外部脚本 A.js 加载之前无法执行 inline-script-2。没关系 - 创建一个带有 src=A.js 的脚本标签并将其插入到文档中，同时更改 inline-script-2 以在 A.js 的 onload/onreadystatchange 上执行。所以我现在有：

inline-script-1
create 'script' element
set the script's src attribute
set the script's onload/onreadystatechange handlers to functions that call a function in A.js - A-func1()
dynamically add script to page

现在当 A.js 的异步下载完成后，会调用 A-func1()。

但是，如果我想确保 inline-script-1 在 inline-script-2 之前运行，那么仅从页面中的顺序就可以保证吗？是否所有浏览器都以严格的从上到下的方式解析页面，从而保证 inline-script-1 将在调用函数 A-func1() 之前执行？

第二个问题是如何在一个页面上包含多个内联代码块。例如：

inline-script-1 (script I have no control over)
inline-script-2 (my script)
inline-script-3 (script I have no control over)
inline-script-4 (my script)

我不能真正采用与第一个问题相同的策略，因为我想我不想引用外部脚本两次，因为它可能会被下载（忽略缓存）并执行两次。

inline-script-1

(function() {
    create 'script' element
    set the script's src attribute
    set the script's onload/onreadystatechange handlers to functions that call a function in A.js - A-func1()
    dynamically add script to page
})();

inline-script-3

inline-script-4: <not sure what to do here>

我不能只调用上面 A.js 中的函数，因为我还不知道它已经加载。那时我真的不想添加脚本 onload 处理程序，因为这意味着污染全局命名空间，并且不能保证我不会错过被触发的事件，具体取决于 inline-script-3 需要多长时间。由于已经提到的原因，我不能再次重复匿名功能块。

此外， inline-script-3 可能会在调用 A-func1() 之前运行

在这种情况下，有什么方法可以保留执行顺序吗？我想知道是否可以使用新的 async 属性？如果我在匿名函数中创建的脚本元素中将 async 属性设置为 false，并将 inline-script-4 保留为内联代码，但还添加了带有值 false 属性的 async，这可能有效吗？

谢谢，

保罗

4

0 回答 0