异步JavaScript下载并与内联脚本耦合
有几种技术可以异步下载外部javascript,也有几种技术可以将异步下载与内联代码耦合以保持执行顺序 但我有几个问题,如果有人对这个领域有很好的了解,我将非常感激,请回答 第一个问题更只是检查控制内联代码的执行是否像我认为的那样明显 假设我有这个:异步JavaScript下载并与内联脚本耦合,javascript,asynchronous,Javascript,Asynchronous,有几种技术可以异步下载外部javascript,也有几种技术可以将异步下载与内联代码耦合以保持执行顺序 但我有几个问题,如果有人对这个领域有很好的了解,我将非常感激,请回答 第一个问题更只是检查控制内联代码的执行是否像我认为的那样明显 假设我有这个: inline-script-1 (script I have no control over) inline-script-2 (my script) 其中inline-script-2是我可以添加到页面中的代码,但inline-script-1
inline-script-1 (script I have no control over)
inline-script-2 (my script)
其中inline-script-2是我可以添加到页面中的代码,但inline-script-1不在我的控制之下(请不要用“为什么不”之类的问题来回答这个问题-这只是我不想在这篇文章中再赘述的原因)
假设在[asynchronously downloaded]外部脚本A.js加载之前无法执行inline-script-2。这很好-创建一个src=a.js的脚本标记并将其插入到文档中,同时将inline-script-2更改为在a.js的onload/onreadystatch上执行。因此,我现在有:
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完成时,将调用-func1()
但是,如果我想确保inline-script-1在inline-script-2之前运行,那么仅仅从页面中的顺序就可以保证吗?是否所有浏览器都严格地从上到下解析页面,从而保证在调用函数a-func1()之前执行inline-script-1
第二个问题是如何在页面上包含多个内联代码块。例如:
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>
inline-script-1
(功能(){
创建“脚本”元素
设置脚本的src属性
将脚本的onload/onreadystatechange处理程序设置为调用a.js-a-func1()中函数的函数
将脚本动态添加到页面
})();
内联脚本-3
内联脚本-4:
我不能只调用上面A.js中的函数,因为我不知道它已经加载了。我也不想在此时添加脚本onload处理程序,因为这意味着会污染全局名称空间,而且根据inline-script-3所用的时间,也不能保证不会错过正在触发的事件。
由于前面提到的原因,我不能再重复匿名函数块了
此外,inline-script-3可能在调用-func1()之前运行
在这种情况下,有没有办法保持执行顺序?我想知道是否可以使用新的async属性?如果我在匿名函数中的created script元素中将async属性设置为false,并将inline-script-4保留为内联代码,但还添加了async with value false属性,那么这是否可行
谢谢
保罗将回答你的第一个问题。简单:inline script 1
和inline script 2
必须连续运行,之后是异步加载的A.js
,其标记在脚本2中生成。