县工商局 网站建设,商业计划书网站建设,网站内容建设ppt,管家婆免费资料网站需要这两个属性的原因#xff1f;
首先我们要知道的是#xff0c;浏览器在解析 HTML 的过程中#xff0c;遇到了 script 元素是不能继续构建 DOM 树的。
它会停止解析构建#xff0c;首先去下载 js 代码#xff0c;并且执行 js 的脚本#xff1b;只有在等到 js 脚本执行…需要这两个属性的原因
首先我们要知道的是浏览器在解析 HTML 的过程中遇到了 script 元素是不能继续构建 DOM 树的。
它会停止解析构建首先去下载 js 代码并且执行 js 的脚本只有在等到 js 脚本执行结束之后才会继续解析 html构建 DOM 树。
那为什么要这样做呢
因为 js 的作用之一就是操作 DOM并且可以修改 DOM如果等到 DOM 树构建完成并且渲染后再去执行 js就会造成严重的回流和重绘影响页面性能所以在遇到 script 标签的时候浏览器采取了先加载执行后构建 DOM 树的方案。
虽然是解决了回流和重绘的问题但这又产生了新的问题解决一个问题产生了新的问题
在现在的网页开发模式中Vue、React往往 js 脚本比 HTML 结构更“重”需要加载和处理的时间更长。
这样就会导致页面的解析阻塞在脚本完成下载、执行之前用户在界面上什么都看不到。
为了解决上面的问题script 元素给我们提供了两个属性来处理defer 和 async
defer 的作用
defer 翻译过来就是延迟的意思
defer 属性告诉浏览器不要等待脚本下载而是继续解析 HTML、构建 DOM Tree。
脚本会又浏览器来进行下载但是不会阻塞 DOMTree 的构建过程如果脚本提前下载好了它会等待 DOM Tree 构建完成在 DOMContentLoaded 事件之前执行 defer 中的代码。
下面举个例子
我们创建了一个 defer.js 文件并在脚本执行的时候添加了 defer 属性最后我们可以看到 DOMContentLoaded 会等待 defer 中的代码先执行完成。 另外我们要注意的是多个 defer 的脚本是可以保持顺序执行的。 从某种角度来说defer 是可以提高页面性能的并且推荐把带有 defer 属性的 script 标签放到 heade 元素中。
async 的作用
async 翻译过来是异步的意思
async 的特性和 defer 有些类似
浏览器不会因为 async 脚本的下载而阻塞和 defer 类似但是在带有 async 属性的脚本会在下载完成后立即执行并且不能保证在 DOMContentLoaded 之前或者之后执行我们要知道在脚本执行的时候是会阻塞 DOMTree 的构建。还有就是 async 脚本是不能保证顺序的它是独立下载、独立运行不会等待其他脚本 具体的执⾏时机图解
绿色-HTML 解析黑色-停止 HTML 解析黄色-脚本下载棕色-脚本执行
总结
script 标签的 defer 和 async 属性都是用来控制外部脚本的加载和执行方式的他们对于改善页面加载非常有帮助。
但是他们的机制并不相同
defer 下载不会阻止 DOM 的构建但是在 DOMTree 构建完成后在 DOMContentLoaded 事件之前执行并且 defer 脚本的执行是有序的。async 下载同样不会阻止 DOM 的构建但是不会保证在 DOMcontentLoaded 之前或者之后执行也不能保证顺序它的每个脚本都是独立的。
所以他们的应用场景是这样的
defer 通常用于需要在文档解析后操作 DOM 的 js 代码并且对多个脚本文件有顺序要求async 通常用于独立的脚本对其他脚本甚至对 DOM 没有依赖的脚本。
在现代化的框架开发中已经不需要我们手动设置 async 和 defer 了在使用脚手架的时候一遍会根据我们需要自动加上 defer 属性某些特殊场景下比如第三方分析工具或者是广告追踪脚本等需要我们自己加上 async 属性。
