script 元素工作原理

工作原理

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

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

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

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

为了避免这种情况，较好的做法是将<script>标签都放在页面底部，而不是头部。这样即使遇到脚本失去响应，网页主体的渲染也已经完成了，用户至少可以看到内容，而不是面对一张空白的页面。

defer 属性

为了解决脚本文件下载阻塞网页渲染的问题，一个方法是对<script>元素加入defer属性。它的作用是延迟脚本的执行，等到 DOM 加载生成后，再执行脚本

xxxxxxxxxx
<script src="./js/index.js" defer></script>

defer属性的运行流程如下

1. 浏览器开始解析 HTML 网页
2. 解析过程中，发现带有defer属性的<script>元素
3. 浏览器继续往下解析 HTML 网页，同时并行下载<script>元素加载的外部脚本
4. 浏览器完成解析 HTML 网页，此时再回过头执行已经下载完成的脚本

有了defer属性，浏览器下载脚本文件的时候，不会阻塞页面渲染

async 属性

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

xxxxxxxxxx
<script src="./js/index1.js" async></script>
<script src="./js/index.js" async></script>

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

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

async属性可以保证脚本下载的同时，浏览器继续渲染。需要注意的是，一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本

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

实时效果反馈

1. 加载JS外部文件，script 中async和defer的描述错误的是：

A defer属性，浏览器下载脚本文件的时候，不会阻塞页面渲染

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

C 脚本之间没有依赖关系，就使用async属性，如果有依赖关系，就使用defer属性

D async和defer都会阻塞页面渲染

答案

1=>D