script标签的defer和async

时间: 2023-04-30 07:02:48 浏览: 96

JS中script标签defer和async属性的区别详解

在Web开发过程中，JavaScript脚本是构建动态网页不可或缺的组成部分。为了提升用户体验，我们希望网页内容能够快速加载并显示给用户，同时，JavaScript的执行不应该阻碍页面其余部分的渲染。HTML中的`<script>`标签允许我们引入JavaScript代码到页面中，它提供了`defer`和`async`两个属性，来控制脚本的加载和执行方式，以优化页面的加载性能。我们来看一下`<script>`标签的基本用法。通常有两种方式使用`<script>`标签：一种是直接在`<script>`和`</script>`之间编写JavaScript代码，另一种是通过`src`属性引入外部JavaScript文件。如果直接在`<script>`标签中写入代码，浏览器在解析HTML文档时遇到`<script>`标签，会立即执行其中的代码，并且阻塞后续内容的加载，直到这段脚本执行完毕。这会导致页面的渲染出现延迟，从而影响用户体验。为了避免这个问题，通常推荐的做法是将所有的`<script>`标签放置在`</body>`标签之前。这样做可以在加载完页面内容后再加载和执行JavaScript代码，从而减少对页面渲染的干扰。在`<script>`标签中，`defer`和`async`是两个重要的属性，它们都允许脚本在后台下载，不会阻塞页面的其他处理过程。 1. 不使用`defer`或`async`属性的`<script>`标签当`<script>`标签中不包含`defer`或`async`属性时，浏览器会立即加载并执行相应的脚本。在脚本加载和执行完成之前，浏览器会暂停解析后续的HTML文档，这就意味着，如果脚本位于文档中间，浏览器会等待该脚本加载完成并执行后，才会继续解析和渲染文档的其余部分。 2. 使用`async`属性的`<script>`标签 `async`属性表示脚本可以异步执行。具有`async`属性的脚本在下载时不会阻塞页面的渲染，脚本加载完成后，脚本会被立即执行，而不是等待整个页面加载完毕。这种行为意味着脚本的执行可能会在`DOMContentLoaded`事件之前或之后进行，因为`DOMContentLoaded`事件会在页面内容完全加载并解析完成后触发。`async`属性允许页面尽快加载，但是由于它不保证脚本执行的顺序，所以使用`async`属性的脚本可能会导致依赖问题。 3. 使用`defer`属性的`<script>`标签 `defer`属性也允许脚本在后台加载，但与`async`不同的是，脚本的执行被推迟到整个文档解析完成之后，以及`DOMContentLoaded`事件触发之前。这保证了即使脚本在文档中的位置靠前，其执行也会在文档解析完成后进行。如果页面中有多个`defer`属性的脚本，浏览器会按照脚本在页面中出现的顺序执行这些脚本。从实际应用来看，`defer`属性的脚本更适合那些需要在整个文档解析完毕后才能执行的脚本，比如可能会修改DOM的脚本。而`async`属性适合那些不需要对页面其他脚本或DOM有依赖的独立脚本。总结来说，`async`和`defer`属性都允许JavaScript脚本的并行加载，从而不会阻塞页面的渲染，但两者在脚本执行时机上有所区别。`defer`属性保证了脚本按顺序执行，而`async`属性则不保证脚本的执行顺序，即哪个脚本先加载完毕就会先执行。因此，如果我们希望确保脚本在文档完全解析后执行，同时脚本之间有执行顺序的要求，应该使用`defer`属性。相反，如果我们希望脚本尽快执行，并且它们之间不需要相互依赖，那么`async`属性是一个更好的选择。

script标签的defer和async用于告诉浏览器如何加载和执行脚本。 defer属性表示脚本会在页面完全解析完毕后再执行，并且会按照在页面中出现的顺序依次执行。 async属性表示脚本可以在下载完成后立即执行，不会影响页面解析。一般情况下建议使用async，因为它不会阻塞页面解析，但是如果脚本之间有依赖关系，那么就需要使用defer。

阅读全文

script标签的defer和async

相关推荐

浅谈HTML5 defer和async的区别

浅析script标签中的defer与async属性

script标签中defer和async

Script标签中的defer和async

script标签中defer和async的区别

script 的 defer 和 async 的应用场景

.script标签中defer和async的区别?

不是这几种，是async和defer

html script标签

script标签src属性

<script>标签

script标签通常放在哪个标签之下

帮我写一个程序，比较async和defer两种异步加载的不同

在html中script标签应该放在什么位置

使用DOMContentLoaded事件或者async和defer属性来替代.onload，写出前后对比代码示例

script怎么引入

js 标签加载后执行js

<script />

link引入与script引入的区别

最新推荐

黑板风格计算机毕业答辩PPT模板下载

管理建模和仿真的文件

提升点阵式液晶显示屏效率技术

在SoC芯片的射频测试中，ATE设备通常如何执行系统级测试以保证芯片量产的质量和性能一致？

CodeSandbox实现ListView快速创建指南

"互动学习：行动中的多样性与论文攻读经历"

点阵式显示屏常见故障诊断方法

名词性从句包括哪些类别？它们各自有哪些引导词？请结合例句详细解释。

Node.js脚本实现WXR文件到Postgres数据库帖子导入

关系数据表示学习