有几种技术可以异步下载外部javascript,并且有几种技术可以将异步下载与内联代码相结合,以保留执行顺序。
但我有几个问题,如果对此领域有充分了解的人能够回答,我将非常感激。
第一个问题更多的是检查控制内联代码的执行是否像我认为的那样明显。
说我有这个:
inline-script-1 (script I have no control over)
inline-script-2 (my script)
其中inline-script-2是我可以添加到页面的代码,但是inline-script-1不在我的控制范围内(请不要'为什么不'为此输入问题 - 这就是它的用法原因我不会再继续这篇文章了。)
在[异步下载]外部脚本A.js加载之前,无法执行内联脚本-2。没关系 - 用src = A.js创建一个脚本标签并将其插入到文档中,并更改内联脚本-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之前运行,那么只是从页面中的顺序保证了吗?是否所有浏览器都以严格的自上而下的方式解析页面,因此保证在调用函数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>
我不能只调用上面A.js中的函数,因为我不知道它已经加载了。我真的不想在那时添加脚本onload处理程序,因为它意味着污染全局命名空间,并且无法保证我不会错过任何被触发的事件,具体取决于inline-script-3需要多长时间。 由于已经提到的原因,我不能再次重复匿名功能块。
此外,inline-script-3可能会在调用A-func1()
之前运行在这种情况下,有没有办法保留执行顺序?我想知道我是否可以使用新的异步属性?如果我在匿名函数中创建的脚本元素中将async属性设置为false,并将inline-script-4保留为内联代码,但也添加带有false false属性的async,那可能有用吗?
谢谢,
保