问:在javascript的高级编程中,介绍了defer和async之间的区别,但更明显的是Daniel可以更清楚地解释它。
答:当浏览器遇到它时,让我们先用一个句子来解释它。script编写脚本时:
<script src="script.js"></script>
否defer或async浏览器立即加载并执行指定的脚本,“立即”是指script在标签下的文档元素之前(即文档元素被加载并执行而无需等待后续加载)地呈现脚本。
<script async src="script.js"></script>
是是async加载和呈现后续文档元素的过程将是script.js加载和执行并行(异步)进行。
<script defer src="myscript.js"></script>
是是defer加载后续文档元素的过程将是script.js并行(异步)加载,但是script.js在所有元素解析完成后执行。DOMContentLoaded在事件触发之前完成。
然后从实际的角度出发,首先将所有脚本扔进</body>以前,这是最佳实践,因为它是旧版浏览器的唯一优化选项,可确保所有其他非脚本化元素能够尽快加载和解析。可能。
接下来,让我们看一张照片。 蓝线代表网络读取,红线代表执行时间,均用于脚本。绿线表示HTML解析。 这张图告诉我们以下几点:
延迟和异步网络上的读取(下载)是相同的,两者都是异步的(与HTML解析相比)
显然,它们之间的区别在于脚本的下载和执行时间。defer最接近我们对应用程序脚本加载和执行的要求
关于延迟此图缺少的是它按加载顺序执行脚本,这需要利用
异步这是无序执行的大师。无论如何,脚本的加载和执行与之密切相关,因此,无论您声明的顺序如何,只要加载了脚本,便会立即执行。
请仔细考虑。异步它对应用程序脚本不是很有用,因为它根本不考虑依赖项(即使是最低级别的顺序执行),但它非常适合可以独立于或独立于任何脚本的脚本。最典型的示例是Google Analytics(分析)。
答:脚本的延迟和异步的Ctrip设计委员会中的文章非常详细和权威。但是,存在一个错误:“在解析页面之后以及在文档的DOM内容加载之前,每个延迟属性脚本都以原始顺序执行。” HTML5规范要求脚本应该按照它们出现的顺序执行,但是实际上,延迟脚本不一定按照它们出现的顺序执行!Async的JS将在下载后立即执行(因此,代码中脚本的顺序不是脚本执行的顺序。以后出现的脚本可能会先执行)。
答:我最近遇到了一个相关的问题,两个JS文件的顺序大致如下
<script src="1.js" defer></script>
<script src="2.js" defer></script>
1. JS生成DOM元素,并且2. JS需要对这些生成的DOM元素进行操作。但是,结果是该操作无效。已经尝试了许多方法,但我不知道如何解决。