DomContentLoaded、load 以及 script脚本的async、defer

最新推荐文章于 2024-03-12 13:24:22 发布
最新推荐文章于 2024-03-12 13:24:22 发布
阅读量563 收藏
点赞数
文章标签： DomContentLoaded async defer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22672291/article/details/79650216
版权
1. 先来了解一下什么是DOMContentLoaded和load

原文描述-简书 

有兴趣看原文，这里不加赘述。简单来说DOMContentloaded是页面中的DOM元素解析完成时，而load是内嵌资源加载完成时触发

2. defer 和 async

浅谈async和defer   DomContentLoaded详解

当在script标签上什么都不加是，解析和脚本加载会同步进行



而使用defer后，会异步的解析，脚本会在Dom解析完成，DomContentloaded触发前执行

使用async后，同样会异步解析，但是脚本的执行不会影响DOMContentLoaded的触发


3. 总结

如果你的脚本需要依赖Dom元素（文档是否渲染完毕）， 或者被其他脚本文件依赖，推荐使用defer

如果你的脚本并不关心Dom元素，并且he其他脚本没有依赖关系，那么推荐使用async

qq_22672291
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 script元素async、defer异步加载使用介绍
09-28
与`async`不同，`defer`属性保证了脚本会按照在HTML文档中的顺序执行，但脚本的执行会等到整个HTML文档解析完毕，DOM构建完成，即在`DOMContentLoaded`事件触发之前。这样既保持了执行顺序，又避免了脚本阻塞HTML...
script的async属性以非阻塞的模式加载脚本
10-27
例如，上述的`lazyload`函数就是一个例子，它创建了一个新的`<script>`元素，设置了`async`属性，并在页面加载完成后添加到文档中。这种方法可以帮助处理那些不完全支持`async`或`defer`属性的老版本浏览器。 **...
DOMContentLoaded与load、defer、async的关系
宇宙
09-04 852
一、DOMContentLoaded 与 load DOMContentLoaded等html,js解析完毕，当前所属的script标签之前的css解析完毕后执行，不等待img等资源的加载。 load是等待所有资源加载完毕后执行。 所以DOMContentLoaded之后用户就可以进行交互，绑定事件可以在DOMContentLoaded后绑定，因为这时候已经能够获取到DOM节点。 二、同步,defer,async的区别 同步 defer async 三、DOMContentLoaded与defer
前端每日一练：script 标签的 async 和 defer 属性详解；DOMContentLoaded 事件详解
最新发布
SAXX2的博客
03-12 534
前端每日一练：script 标签的 async 和 defer 属性详解；DOMContentLoaded 事件详解；在Web开发中，通过 标签引入 JavaScript 文件是一种常见的方式。但是，有时候我们希望脚本的加载和执行不会阻塞页面的渲染，这时就可以使用 async 和 defer 属性。本文将详细探讨这两个属性的区别以及它们在实际应用中的使用场景。
玩转代码|Script 标签中的async与defer属性详细分析
Jum的博客
07-12 1326
Hello 👋🏻 ~
异步加载JS脚本
kangzi139的博客
11-19 168
JavaScript脚本对现代网站来说是必不可少的。当用户访问站点，需要下载各种资源，例如JS脚本，CSS，图片，iframe等。 浏览器下载除JS外的资源时，会并行下载，以提高性能。但下载JS脚本时，会禁止并行下载（称为脚本阻塞Scripts Block Downloads）。浏览器遇到JS时，必须等JS下载，解析，执行完后，才能继续并行下载下一个资源。原因是JS可能会改变页面或改变JS间的依...
js中的load加载php文件,JavaScript_javascript loadScript异步加载脚本示例讲解，一、语法:loadScript(url[,callback]) - phpStud...
weixin_36132709的博客
04-09 553
javascript loadScript异步加载脚本示例讲解一、语法:loadScript(url[,callback])或者loadScript(settings)二、settings支持的参数:url:脚本路径async:是否异步，默认false(HTML5)charset:文件编码cache:是否缓存，默认为truesuccess:加载成功后执行的函数，优先执行callback。三、调用举...
js-async-files-load:异步JS文件加载
07-13
异步加载通常通过`<script>`标签的`async`或`defer`属性实现。`async`属性使得脚本在可用时立即开始下载，但并不保证执行顺序。这意味着即使脚本的下载完成了，它也可能会在其他同步脚本之前或之后执行。例如： ```...
浅析我对JS延迟异步脚本的思考
10-14
首先，延迟脚本主要是指带有`async`或`defer`属性的`<script>`标签。这些脚本通常是非内联的，即不在HTML文档内部直接定义，而是通过`src`属性指向外部文件。这样做是为了避免阻塞HTML的解析和页面的渲染，提高用户...
append-script:承诺将脚本附加到文档中
06-27
`async`属性使脚本异步加载并立即执行，而`defer`属性则保证脚本在文档解析完成后，但在`DOMContentLoaded`事件触发之前执行。 6. **应用场景**： 动态加载脚本常用于按需加载、模块化开发、性能优化等方面。例如...
async、defer与DOMContentLoaded的执行先后关系
一个女胖子的博客
05-07 1042
一、HTML解析过程与DOMContentLoaded触发时机 我们已经知道DOMContentLoaded的触发时间为：当 HTML文档被加载和解析完成。那么我们还需要理解HTML的解析过程。 此处我们先只考虑同步js的情况。 1.在既没有CSS也没有JS的情况下，HTML文档的解析过程为： DOMContentLoaded事件的触发时机为:HTML解析为DOM之后。 2.有CSS无JS的情况...
javascript动态创建script标签,加载完成后调用回调
05-26 1319
代码如下: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.charset = '...
谈谈script标签中的async和defer
Floatwor青舟的博客
04-18 369
目录defer和async的的定义really? demo走走就知道了deferasync图解script中的defer与async普通scriptdeferasync推荐的应用场景 script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。 直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。 现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。 好在s
load/domContentLoaded事件、异步/延迟Js 与DOM解析
aiguanyi0149的博客
02-05 625
一、DOMContentLoaded 与 load事件 关于load和DOMContentLoaded事件，mdn对于它们是这样描述的： DOMContentLoaded mdn文档地址:https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded The DOMContentLoaded event is fi...
JavaScript script标签同步异步加载过程
weixin_44000173的博客
08-02 1850
JavaScript script标签同步异步加载过程
DOMContentLoad和load
baiweng1957的博客
02-27 395
　　我们在浏览器输入网址后，浏览器会向服务器发送请求，服务器将请求的HTML文档发送回浏览器，浏览器将文档下载下来后，便开始从上到下解析，解析完成之后，会生成DOM。如果页面中有css，会根据css的内容形成CSSOM，然后DOM和CSSOM会生成一个渲染树，最后浏览器会根据渲染树的内容计算出各个节点在页面中的确切大小和位置，并将其绘制在浏览器上。 　　在页面加载解析html的时...
loadScript异步加载脚本函数
精彩人生
03-09 6869
javascript异步加载脚本并触发回调函数： 一、语法: loadScript(url[,callback]) 或者 loadScript(settings) 二、settings支持的参数: url:脚本路径 async:是否异步，默认false(HTML5) charset:文件编码 cache:是否缓存，默认为true
defer async 区别
weixin_30607659的博客
06-21 111
链接 <script src="script.js"></script> 没有defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。 <script async src="script.js"></scri...
DOMContentLoaded与async defer
qq1498982270的博客
05-08 369
DOMContentLoaded与异步脚本async 只要html解析完，就会触发DOMContentLoaded <scirpt async src='xxx'> 情况一： async脚本加载完，HTML还未解析完 情况二： async还没有加载完，HTML就已经解析完毕 总结： 1、无论情况1，还是情况2，DOMContentLoaded都是在html解析完就...
script标签中defer和async的区别
03-16
defer和async都是用于异步加载script标签中的脚本文件的属性，它们的区别在于执行的时间不同。 defer属性表示延迟执行脚本，即在HTML文档解析完毕后再执行脚本，但在DOMContentLoaded事件之前执行。如果有多个defer...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值