When can we use async?
异步脚本加载是我现在正在学习的。我有一个关于脚本标记-中asyncattr的问题。
以下是一些信息,http://www.w3schools.com/tags/att_script_async.asp,我的问题是:如果存在,它指定脚本将在可用时立即异步执行。线。
问题:如果我有两个脚本:
1 2
| <script async src="url1.js"> // 200kb
<script async src="url2.js"> // 2kb |
第二个script必须在第一个之后执行(它使用了它的一些Objects或EDOCX1〔4)-在页面加载之后会这样吗?第一个脚本将在加载后先执行,然后-第二个,还是不执行?
从上面的粗体字符串(我这样理解它),加载script的速度比加载速度快,执行速度也更快,在我们的示例中,我们会遇到错误,而第一个script尚未加载和执行,但第二个已经在尝试获取它。(我们什么时候可以使用async脚本加载?只有当我们的脚本不相互独立时?)
P.S.在这种情况下,lazy loading script是获得正确脚本执行顺序的唯一方法吗?以防止错误?
如果没有async属性,浏览器将停止处理页面,并首先下载引用的脚本;一旦下载并执行脚本,浏览器将继续处理页面上的下一个标记。这有两个后果:
所有脚本都保证按包含在HTML中的顺序加载,并且依赖项保证正确解析。
如果早期包含这些脚本,那么页面加载会明显延迟。同步脚本应该始终包含在页面的末尾,以避免不必要地让访问者等待。
如果设置了async属性,浏览器将继续加载页面,而不停止处理script标记,稍后将加载脚本。当脚本完全被加载时是未定义的,并且您不能依赖于任何特定的执行顺序。如果两个脚本之间有依赖关系,则不能同步加载它们async,因为这样一来,一个脚本是否比另一个脚本先加载完全取决于运气。
因此,async加载只对没有其他依赖项的脚本有用。或者:您将脚本挂接到window.onload事件,并避免在此之前进行任何交叉引用;该事件将在所有脚本(包括async脚本)加载后激发。
- 如果我从第二次调用window.onload事件之后调用第一个脚本functions?他们会工作吗?(换言之:load事件在所有async scripts装载后发生火灾?那么DOMContentLoaded事件呢?
- 是的,如果您将脚本挂接到window.onload,并且在window.onload启动之前避免任何交叉引用,那么您也可以保证解决了所有依赖项。这也是一个有用的模式。
如果url2.js依赖于url1.js,则不能对脚本文件使用异步加载,则必须使用同步(预加载)来确保在url2.js之前加载和执行url1.js。
使用异步有两种情况:
url1.js加载并执行,然后url2.js加载并执行。这是可以的,因为URL1将为URL2做好准备。
url2.js加载并执行,然后url1.js加载并执行。这将失败,因为URl2依赖于URl1,而URl1在URl2时尚未就绪。
使用非异步加载只能发生一种情况,即在加载和执行url2.js之前进行url1.js加载和执行,如果它们相互依赖,则需要这样做。
在异步加载中,您无法控制何时执行它们,它们在加载后立即执行。
我们之前也问过类似的问题。
脚本标记-异步&延迟
关于执行顺序,JavaScript的执行是按照HTML中的顺序进行的。如果您的页面在某些事件中依赖于javascript,并且JS方法是在页面之前加载的,那么它们将导致JS错误。
我建议您尽可能使用回调函数来避免上述错误。这里是一个学习回调函数以及如何实现回调函数的好地方。