谈谈 <script> 标签以及其加载顺序问题，包含 defer & async

alexnevsky 发布于2019-08-22 15:13 / 3056人阅读

摘要：标签加载顺序如果要谈标签加载顺序问题，首先要谈的就是标签的位置，因为标签的位置对于加载顺序来说有着很重要的影响。例如标签在以上代码中，可能由于下载时间比较长，由于两个标签都是异步执行，互不干扰，因此可能就会先于执行。

谈谈 外置形式
外置形式是将 JavaScript 代码写在外部的一个文件里面，在 html 文件中通过 两种引入形式的比较
对于这两种方式，毫无疑问，外置形式明显好于内联形式，主要表现为以下方面:

可维护性：外置 Javascript 文件可以被多个页面调用而不用在每个页面上反复地书写.如果有需要改变的部分,你只需要在一处修改即可.所以外置JavaScript 导致代码工作量减少,进而使得维护手续也更加方便。

可缓存：浏览器能够根据具体的设置缓存链接的所有外部 JavaScript文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载的速度。

关注点分离：将 JavaScript 封装在外部的.js文件遵循了关注点分离的法则.总体来说,分离 HTML,CSS 和 JavaScript 从而让我们更容易操纵他们.而且如果是多名开发者同步工作的话,这样也更方便。

因此，在今后的开发中尽量使用外置方式的形式引入JavaScript。

这是一种比较传统的做法，目的就是把所有外部文件（包括 CSS 文件和 JavaScript 文件）的引用都放在相同的地方.可是，在文档的元素中包含所有 JavaScript 文件，意味着必须等到全部 JavaScript 代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到标签时才开始呈现内容）。对于那些需要很多 JavaScript 代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。很明显，这种做法有着很明显的缺点，特别是针对于现在的移动端来说，如果超过 1s 还没有内容呈现的话将是一种很差的用户体验。为了避免这个问题，就有了下面这种加载方式。

对于这种方式，在解析包含的 JavaScript 代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了
延迟加载

在这个例子中，虽然我们把

从图中可以看出，某些浏览器或者在一些低版本的浏览器中并不支持defer属性，因此，把延迟脚本放在页面底部仍然是最佳选择。
异步加载
说完了延迟加载，然后我们再说下异步加载，即使用 async属性。
HTML5 为 > 元素定义了 async 属性。这个属性与 defer 属性类似，都用于改变处理脚本的行为。同样与 defer 类似， async 只适用于外部脚本文件，并告诉浏览器立即下载文件，下载完成后立即执行。但与 defer不同的是，标记为 async 的脚本并不保证按照指定它们的先后顺序执行。例如：

script 标签

在以上代码中，可能由于 01.js 下载时间比较长，由于两个 > 标签都是异步执行，互不干扰，因此 02.js 可能就会先于 01.js 执行。因此，确保两者之间互不依赖非常重要。指定 async 属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改 DOM。
async的兼容性如下：

可以看出 IE9 及以下版本都不支持 async属性，因此，把延迟脚本放在页面底部仍然是最佳选择。

绿色代表html解析，淡蓝色代表html解析停止，蓝色代表script下载，粉红色代表script执行。从上图很容易的看出来只要执行script,html就会停止渲染，除此之外也可以清晰的看出他们之间的加载关系。
小结
所有

资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

谈谈 <script> 标签以及其加载顺序问题，包含 defer & async