关于JS异步和延迟
2019-01-26 本文已影响0人
沉沉___
<script>标签位置：
按照传统做法，所有 <script> 元素都应该放在页面的 <head> 元素中，例如：
这种做法目的就是把所有的外部文件（包括css文件和JS文件）的引用都放在相同的地方。可是在文档的head元素中包含所有JS文件，意味着必须等到全部JS代码都被下载、解析和执行完成以后，才能呈现页面的内容（浏览器在遇到body标签是才开始呈现内容）。这样就会导致浏览器在呈现页面时出现明显的延迟，而延迟期间浏览器窗口将是一片空白，所以为了避免这个问题，把Jscript引用放在body元素中页面内容的后面，例如：
这样在解析包含的Jscript代码之前，页面内容将会完全呈现在浏览器中。
注：无论如何包含代码，只要不存在defer和async属性，浏览器都会按照<script>元素再页面中的出现的先后顺序对其依次解析。
延迟脚本（为<script>标签定义defer属性）
JS脚本会被延迟到整个页面都解析完毕后再运行，因此在<script>元素中设置defer属性相当于告诉浏览器立即下载，但延迟执行。只适用于外部文件。
在例子中，虽然把<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行
异步脚本（为<script>标签定义async属性）
和defer作用类似，不同的是，标记为async的脚本并不抱着按照指定它们的先后顺序执行。
在以上代码中，第二个脚本文件可能会在第一个脚本文件之前执行，因此确保两者之间互不依赖非常重要，指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。一部脚本一定会在页面的load事件前执行。
