浅谈load和DOMContentLoaded

最新推荐文章于 2022-05-11 17:30:04 发布
最新推荐文章于 2022-05-11 17:30:04 发布
阅读量203 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k19970320j/article/details/104658023
版权
  • load

MDN：当一个资源及其依赖资源已完成加载时，将触发load事件。
当页面上的所有资源加载完成时触发，包括：html、css、图片资源等

  • DOMContentLoaded

MDN：当纯HTML被完全加载以及解析时，DOMContentLoaded 事件才会被触发，而不必等待样式表、图片或者子框架加载完成

aicherish
关注
专栏目录
浅谈原生JS中的延迟脚本和异步脚本
10-19
延迟脚本和异步脚本是JavaScript中用于控制脚本加载时机的两种重要特性。在原生JS中，这两者能够帮助开发者更好地管理资源加载和执行顺序，从而优化页面性能和用户体验。具体来说： 延迟脚本（defer）是HTML4.0引入...
alert 返回页面 刷新_详解 HTML 页面原生的生命周期事件
weixin_39719042的博客
12-24 477
DOMContentLoaded，load，beforeunload，unloadHTML 页面的生命周期包含三个重要事件：DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 和样式表之类的外部资源可能尚未加载完成。load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。beforeunload/unload ...
DOMContentLoaded 和 Load 和 Finish
weixin_30518397的博客
12-15 676
Chrome F12，监控一个请求的响应时间，一般参考下图： 那么问题来了，Finish 和 Load有什么区别？ ---DOMContentLoaded 和 Load DOMContentLoaded：DOM树构建完成。即HTML页面由上向下解析HTML结构到末尾封闭标签</html> Load：页面加载完毕。 DOM树构建完成后，继续加载html/css 中的图片资源等...
Domcontentloaded、load、finish
weixin_34259232的博客
03-27 2067
谷歌浏览器时间解析 Domcontentloaded：到下解析HTML结构到末尾的封闭标签，DOM树构建完成 load：DOM树构建完成后，继续加载 html/css 中的外部资源，加载完成之后，视为页面加载完成 finish：是页面上所有http请求发送响应的时间，并发量是6个，即finish是这六个并发量(包括js、css、doc、img等资源)。 总结： 1.如果finish...
F12下看html页面的响应时间,浏览器F12 Finish DOMContentLoaded load时间如何计算出来？...
weixin_29159127的博客
06-07 2509
白屏// 不兼容performance.timing 的浏览器，如IE8window.pageStartTime = Date.now();// 白屏时间结束点window.firstPaint = Date.now();因此白屏时间则可以这样计算出：可使用 Performance API 时白屏时间 = firstPaint - performance.timing.navigationStar...
DOMContentLoaded事件
chaoguo1234的专栏
03-08 132
DOMContentLoaded事件会在DOM树构造完成之后触发，它与load事件的不同之处在于，load事件不仅要等DOM树构造完成，还要等外部资源加载(比如图片)才触发。 这个事件是W3C的标准，IE不支持，其他大部分浏览器都支持 ...
Javascript封装DOMContentLoaded事件实例
10-25
主要介绍了Javascript封装DOMContentLoaded事件实例,DOMContentLoaded是FF,Opera 9的特有的Event, 当所有DOM解析完以后会触发这个事件,需要的朋友可以参考下
javascript ready和load事件的区别示例介绍
10-26
DOMContentLoaded 事件介于 ready 和 load 之间，它在 DOM 树构建完成后立即触发，但不等待样式表、图片和子框架的加载完成。因此，DOMContentLoaded 事件的触发时间会比 ready 事件稍晚，但又远早于 load 事件。在...
浅谈HTML5 defer和async的区别
09-28
脚本会在整个HTML文档解析完成后，但在DOMContentLoaded事件触发之前执行，确保所有`defer`脚本按照在HTML中出现的顺序依次执行。这种方式适合那些需要在页面结构完全解析后执行的脚本，比如初始化DOM操作的脚本。...
JS兼容所有浏览器的DOMContentLoaded事件
10-18
主要介绍了JS兼容所有浏览器的DOMContentLoaded事件的相关资料，标准浏览器中，使用DOMContentLoaded事件即可实现我们的要求，注册事件处理函数也极为简单，感兴趣的朋友一起学习吧
Chrome控制台network底部的Finish，DOMContentLoaded和Load
qq_33539213的博客
05-08 6800
打开chrome控制台network部分刷新页面，可以看到浏览器记录的网络资源加载时间，可以用于评估网页性能。 DOMContentLoaded 和 Load 和 Finish的含义和区别 DOMContentLoaded 和 Load DOMContentLoaded：DOM树构建完成。 即HTML页面由上向下解析HTML结构到末尾封闭标签 Load：页面加载完毕。 DOM树构建完成后，继...
javascript事件基础--页面事件(loade、DOMContentLoaded 、unload)
wenmin1987的博客
03-25 1025
页面事件包括加载和卸载，即用户访问页面和离开关闭页面 load事件 在页面完全加载完毕触发，该事件包含所有的图形图像、外部文件（css javascript文件等），在这些之前任何DOM不会操作 DOMContentLoaded事件，作为DOM标准事件，不需要图像等全部加载，只需要DOM加载完毕即执行，比load先触发，目前Mozilla和Opera支持，IE和Safari浏览器不支持 ...
chrome F12_Network 开发者工具详解
dingtai7471的博客
02-26 1546
本文为学习chrome F12_Network的一点记录，如有不妥之处请各位大神指点，谢谢！ 开发者工具面板 最常用的前四个功能模块如下： Elements：查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。 Console：录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。 Sources：断点调试J...
DOMContentLoaded和load
热心网友小郭的Blog
06-05 468
DOMContentLoaded 如果页面中没有脚本，浏览器会在解析完文档时就触发DOMContentLoaded事件。如果页面中存在脚本，脚本会阻塞文档的加载，而脚本的加载需要等前面的css加载完成。 在任何情况下DOMContentLoaded都不会等待图片（音频、视频）等资源加载完成。 load 页面上的所有资源（图片、音频、视频等）加载完成后才会触发load事件。一般地，load事件会在DOMContentLoaded之后触发。 为什么将css放在头部，将js文件放在尾部 在面试的过程中，经常会有人
关于DOMContentLoaded死活无效的解决方案
cxyd4399的博客
05-11 1290
let observer = new MutationObserver( (mutationRecords) => { for (let mr of mutationRecords) { for (let el of mr.addedNodes) { if (el.nodeName === 'DIV') { alert("..
前端性能优化--load和DOMContentLoaded
Hanhanyoona的博客
04-03 848
转自:https://www.cnblogs.com/caizhenbo/p/6679478.html 作者写的很好,通俗易懂,解释的也很全面. DOMContentLoaded:就是dom内容加载完毕,HTML文档被解析加载完成. load:页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件,页面的load事件会在DOMContentLoaded被触发之后才触发。 ...
DOMContentLoaded 事件
cvper's world !
04-08 4793
在javascript 中，DOMContentLoaded 事件是文档加载完成时触发的事件，文档加载完成是指DOM结构加载完成，不用考虑其它资源，比如图片等；我们来看一个例子：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta nam...
dom渲染方面的优化浅谈
weixin_30677073的博客
09-19 116
　　今天分享一个面试经验，上周面试中一位印象很深的面试官（主要长得很帅），问我了一个我至今印象很深刻的问题，当然不是什么你之后的职业规划啊，你工作中遇到过哪些问题啊之类的。原起于一道面试题，小伙伴们可以想想这题，当时我给出的答案是，li+=完了之后，一次性渲染，不要在for循环中多次渲染。我认为我已经回答到点上了，然鹅。。。。。我要是能懂面试官，我现在也不会在写博客找工作了，当时这位面试官看到我的...
Unexpected literal in error position of callback.eslint(standard/no-callback-literal)
k19970320j的博客
02-18 4383
Unexpected literal in error position of callback.eslint(standard/no-callback-literal) eslint标准模式-回调报错，cb(true/false)的回调函数写法，在eslint starand的标准中不允许这样写。 解决方法 Promise.all(tasks) .then(() => c...
finish和load和domcontentloaded的区别
最新发布
04-12
这是一个很好的问题！...- "load" 事件则是在整个文档页面、图片和其他资源全部下载完成后触发。 - "unload" 事件则是在用户离开当前页面之前触发。 这些事件都是用来处理网页加载的，但各自的触发时机有所不同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值