script标签中的defer和async

最新推荐文章于 2024-02-21 09:36:16 发布
最新推荐文章于 2024-02-21 09:36:16 发布
阅读量204 收藏 1
点赞数
分类专栏： 学习随笔
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43186285/article/details/119783838
版权

浅谈script标签中的async和defer

script 标签用于执行和加载脚本，直接使用script 脚本的话，html 会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染

script 提供了两种方式来解决上述问题，async 和 defer , 这两个属性使得 script 都不会阻塞 DOM 的渲染

defer

如果 script 标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染，如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script;defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行

async

async的设置，会使得script脚本异步加载并在允许的情况下执行
async 的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行

Mr.Plum
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中script标签defer和async属性的区别详解
10-21
主要介绍了JS中script标签defer和async属性的区别详解的相关资料,需要的朋友可以参考下
浅析script标签中的defer与async属性
01-21
竟然同时有async和defer属性，心想着肯定是前辈老司机的什么黑科技，两个一块儿肯定会发生什么神奇化学反应，于是赶紧怀着一颗崇敬的心去翻书翻文档，先复习一下各自的定义。 二、调查一番 先看看async和defer各自...
你不知道的 script 标签的 defer 与 async 属性
u012384510的博客
10-26 436
我持续组织了近一年的源码共读活动，感兴趣的可以点此扫码加我微信ruochuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。前言在面试的时候，经常会遇到一道经典的面试题：如何优化网页加载速度？常规的回答中总会有一条：把 css 文件放在页面顶部...
script标签中defer和async的区别
最新发布
我的博客简介
02-21 579
而如果脚本之间没有依赖关系，可以并行加载和执行，并且在加载完成后立即执行，则可以使用。蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的;绿色线代表 HTML 解析。综上所述，如果需要按照特定顺序加载和执行脚本并确保在文档解析完毕后执行，可以使用。标签中控制脚本加载和执行的属性。
script标签的defer和async属性详解
weixin_45092437的博客
03-24 3607
对于普通脚本，如果设置该属性，那么该脚本将会并行加载，不阻碍HTML文档的解析，当加载完成后，如果此时文档还没解析完成，则会终止解析，先执行该脚本，执行结束后再继续解析；，浏览器会在文档解析的同时并行的加载这些脚本。如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后再执行。事件的执行，去执行已经加载好的脚本信息，如果此时脚本还未加载完成，则会等待脚本加载完成后，再执行该脚本。，则该脚本不会阻碍文档的解析，只会在文档解析的同时去加载脚本信息，当文档解析完成后，暂时阻止。
＜script＞标签的async和defer属性
qq_54140719的博客
09-22 1005
1、async：表示应该立即开始下载脚本，但不能阻止其他的页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。 2、defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。(在IE7及更早的版本中，在行内脚本也可以指定这个属性)。
script 脚本标签中 defer 和 async （延缓 和 异步）
weixin_41796631的博客
04-30 895
原文章：https://segmentfault.com/q/1010000000640869 本文章讲解几个点： <script> 标签中 的 defer和 async 是什么； 使用 defer 可以解决什么问题 defer 和 async 是 <script> 标签中的属性。 当浏览器碰到script脚本的时候，有下面三种情况： 一、一般情况：（立...
JS script脚本中async和defer区别详解
01-19
可以看到在script标签中，存在async与defer两个属性，首先这两个属性并共存，说直白点，你一个都不加，或者加两个属性其一，脚本加载规则都会不同，这点我在之前确实没仔细了解过，导致我在实际开发中遇到了这样一个...
玩转代码|Script 标签中的async与defer属性详细分析
Jum的博客
07-12 1084
Hello 👋🏻 ~
script标签上的defer及async属性
yiyueqinghui的博客
07-09 956
1、script标签上的defer及async属性 Async：异步加载这个文件。表示应该立即下载脚本，但不应妨碍页面中的其他操作，只对外部脚本文件有效。 Defer: 延迟加载这个文件。标识脚本可以延迟到在html解析完后才执行。只对外部脚本文件有效。 当script上有defer或async属性时，script的下载时均不会阻塞html的解析，但是一旦含有async属性的脚本被下载完，它就会立即执行，执行时会阻塞html的解析，而含有defer属性的脚本则是在html解析完后（DOMContent
script 标签中的defer 和 async 属性
m0_66051368的博客
04-27 2113
浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 <script> 标签 ，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。整个过程如下图所示： 可以看到，script 阻塞了浏览器对 HTML 的解析，如果获取 JS 脚本的网络请求迟迟得不到响应，或者 JS 脚本执行时间过长，都会导致白屏，用户看不到页面内容。 解决方式如下： defer 和 async 都是异步加载外部的JS脚本文件，都不会阻塞页...
script 的defer与async（包含动态脚本）
m0_52711377的博客
09-22 436
defer 和async 属性 提供给开发者一个方式来告诉浏览器哪些脚本是需要异步加载的。直接上图。
script中的defer和async
m0_61696809的博客
03-06 118
告诉浏览器异步加载该脚本，不阻塞页面的加载。这意味着，浏览器可以在加载页面的同时加载该脚本，不需要等待页面完全加载完成。这种情况下，脚本的执行顺序不能保证，因为它们是在不同的线程中加载的。：告诉浏览器在页面完全加载完成之后再加载该脚本。这意味着，当页面完成渲染时，脚本才会被加载。它保证脚本会在 DOM 加载完成之后执行，不会影响页面的其他部分。总的来说，在确保不阻塞页面加载的前提下，如果希望保证脚本的执行顺序，可以使用。是两种不同的方式，用来告诉浏览器如何加载脚本。如果不关心脚本的执行顺序，可以使用。
script标签中的async与defer属性
lwx33912138的博客
11-30 814
script标签defer和async的概念与区别
面试官：说一下script 标签中 defer（推迟） 和 async（异步） 的区别
upgrade_bro的博客
08-14 3015
script 标签中 defer 和 async 的区别：“在解析HTML文档过程中，defer和async标注的脚本都会立即下载。不同的是……”
script标签中defer和async
03-16
defer和async都是script标签中的属性，用于控制脚本的加载和执行。 defer属性表示延迟执行脚本，即在HTML文档解析完成后再执行脚本。defer属性只对外部脚本有效，内部脚本会忽略该属性。如果有多个defer脚本，它们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值