什么是前端的脚本阻塞问题？

Question

在javascript中，什么是脚本阻塞问题？async和defer

Answer 1

在 JavaScript 中，脚本阻塞问题是指当浏览器解析 HTML 文档时，如果遇到了 <script> 标签，浏览器会停止解析 HTML 文档，然后下载并执行 JavaScript 代码，这个过程会阻塞 HTML 文档的解析和渲染，直到 JavaScript 代码执行完毕。

为了解决脚本阻塞问题，HTML5 引入了两个属性：async 和 defer。

async 属性表示异步加载 JavaScript 文件，即在下载 JavaScript 文件的同时，继续解析 HTML 文档，不会阻塞 HTML 文档的解析和渲染。但是，异步加载的 JavaScript 文件执行时，会阻塞 HTML 文档的解析和渲染。

defer 属性表示延迟加载 JavaScript 文件，即在下载 JavaScript 文件的同时，继续解析 HTML 文档，不会阻塞 HTML 文档的解析和渲染。但是，延迟加载的 JavaScript 文件会在 HTML 文档解析完毕后执行，不会阻塞 HTML 文档的解析和渲染。

需要注意的是，async 和 defer 属性只对外部 JavaScript 文件有效，对内部 JavaScript 代码无效。