script 元素

刺骨的言语ヽ痛彻心扉 2022-03-10 16:49 149阅读 0赞

## 1、工作原理 ##

浏览器加载 JavaScript 脚本，主要通过`<script>`元素完成。正常的网页加载流程是这样的：

*  浏览器**一边下载 HTML 网页，一边开始解析**。也就是说，不等到下载完，就开始解析。
 *  解析过程中，浏览器发现`<script>`元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎。
 *  如果`<script>`元素引用了外部脚本，就先下载该脚本再执行，否则就直接执行代码。
 *  JavaScript 引擎执行完毕，控制权交还渲染引擎，恢复往下解析 HTML 网页。

加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并执行完成后，再继续渲染。原因是 JavaScript 代码可以修改 DOM，所以必须把控制权让给它，否则会导致复杂的线程竞赛的问题。

如果外部脚本加载时间很长（一直无法完成下载），那么浏览器就会一直等待脚本下载完成，造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“**`阻塞效应`**”。

此外，对于来自同一个域名的资源，比如脚本文件、样式表文件、图片文件等，浏览器一般有限制，同时最多下载6～20个资源，即最多同时打开的 TCP 连接有限制，这是为了防止对服务器造成太大压力。如果是来自不同域名的资源，就没有这个限制。所以，**通常把静态文件放在不同的域名之下，以加快下载速度**。

## 2、defer 属性 ##

为了解决脚本文件下载阻塞网页渲染的问题，一个方法是对

defer属性的运行流程如下：

*  浏览器开始解析 HTML 网页。
 *  解析过程中，发现带有defer属性的`<script>`元素。
 *  浏览器继续往下解析 HTML 网页，**同时并行下载**`<script>`元素加载的外部脚本。
 *  浏览器完成解析 HTML 网页，此时再回过头执行已经下载完成的脚本。
 *  有了defer属性，浏览器下载脚本文件的时候，不会阻塞页面渲染。下载的脚本文件在DOMContentLoaded事件触发前执行（即刚刚读取完`</html>`标签），而且**可以保证执行顺序就是它们在页面上出现的顺序**。

对于内置而不是加载外部脚本的script标签，以及动态生成的script标签，defer属性不起作用。另外，使用defer加载的外部脚本不应该使用document.write方法。

## 3、async 属性 ##

解决“阻塞效应”的另一个方法是对`<script>`元素加入async属性。

async属性的作用是，**使用另一个进程下载脚本，下载时不会阻塞渲染**。

*  浏览器开始解析 HTML 网页。
 *  解析过程中，发现带有async属性的script标签。
 *  浏览器继续往下解析 HTML 网页，同时并行下载`<script>`标签中的外部脚本。
 *  脚本下载完成，浏览器暂停解析 HTML 网页，开始执行下载的脚本。
 *  脚本执行完毕，浏览器恢复解析 HTML 网页。

async属性可以保证脚本下载的同时，浏览器继续渲染。需要注意的是，一旦采用这个属性，就**无法保证脚本的执行顺序**。哪个脚本先下载结束，就先执行那个脚本。另外，使用async属性的脚本文件里面的代码，不应该使用document.write方法。

defer属性和async属性到底应该使用哪一个？

一般来说，如果脚本之间**没有依赖关系，就使用async属性**，如果脚本之间**有依赖关系，就使用defer属性**。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。

## 4、脚本的动态加载 ##

`<script>`元素还可以动态生成，生成后再插入页面，从而实现脚本的动态加载。

['a.js', 'b.js'].forEach(function(src) { 
      var script = document.createElement('script');
      script.src = src;
      document.head.appendChild(script);
    });

这种方法的好处是，动态生成的script标签不会阻塞页面渲染，也就不会造成浏览器假死。但是问题在于，这种方法**无法保证脚本的执行顺序**，*哪个脚本文件先下载完成，就先执行哪个*。

如果想避免这个问题，可以设置async属性为false。

['a.js', 'b.js'].forEach(function(src) { 
      var script = document.createElement('script');
      script.src = src;
      script.async = false;
      document.head.appendChild(script);
    });

上面的代码不会阻塞页面渲染，而且可以保证b.js在a.js后面执行。不过需要注意的是，在这段代码后面加载的脚本文件，会因此都**等待b.js执行完成后再执行**。

如果想为动态加载的脚本指定回调函数，可以使用下面的写法。