Domcontentloaded、load、finish

最新推荐文章于 2023-05-05 20:14:47 发布
最新推荐文章于 2023-05-05 20:14:47 发布
阅读量2k 收藏 1
点赞数 1
文章标签： javascript 前端 ViewUI
原文链接：https://juejin.im/post/5c9b2639f265da60fd0c242c
版权

谷歌浏览器时间解析

  • Domcontentloaded：到下解析HTML结构到末尾的封闭标签，DOM树构建完成

  • load：DOM树构建完成后，继续加载 html/css 中的外部资源，加载完成之后，视为页面加载完成

  • finish：是页面上所有http请求发送响应的时间，并发量是6个，即finish是这六个并发量(包括js、css、doc、img等资源)。

  • 总结：

    1.如果finish的时间比较大。说明页面上的请求资源比较大，需要优化

    2.finish和domcontentload、load没有直接的关系

转载于:https://juejin.im/post/5c9b2639f265da60fd0c242c

weixin_34259232
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript封装DOMContentLoaded事件实例
10-25
主要介绍了Javascript封装DOMContentLoaded事件实例,DOMContentLoaded是FF,Opera 9的特有的Event, 当所有DOM解析完以后会触发这个事件,需要的朋友可以参考下
浏览器渲染原理、DOMContentLoaded 和 load 的区别、页面的加载和渲染过程、defer 和 async 的用法和区别
icemwj的博客
09-30 1034
浏览器渲染原理（当我们输入URL，按下回车发生了什么？） 当我们在浏览器地址输入URL时，浏览器会发送请求到服务器，服务器将请求的HTML文档发送回浏览器，浏览器将文档下载下来后，便开始从上到下解析，解析完成之后，会生成DOM。如果页面中有css，会根据css的内容形成CSSOM，然后DOM和CSSOM会生成一个渲染树，最后浏览器会根据渲染树的内容计算出各个节点在页面中的确切大小和位置，并将其绘制在浏览器上。 1、输入url地址后，首先进行DNS解析，将相应的域名解析为IP地址 2、 查找服务器的IP地址：
DOMContentLoaded 和 Load 和 Finish
weixin_30518397的博客
12-15 663
Chrome F12，监控一个请求的响应时间，一般参考下图： 那么问题来了，Finish 和 Load有什么区别？ ---DOMContentLoaded 和 Load DOMContentLoaded：DOM树构建完成。即HTML页面由上向下解析HTML结构到末尾封闭标签</html> Load：页面加载完毕。 DOM树构建完成后，继续加载html/css 中的图片资源等...
单点性能测试-页面Load时间
最新发布
晴天的博客
05-05 973
单点性能测试-页面Load时间
F12下看html页面的响应时间,浏览器F12 Finish DOMContentLoaded load时间如何计算出来？...
weixin_29159127的博客
06-07 2447
白屏// 不兼容performance.timing 的浏览器，如IE8window.pageStartTime = Date.now();// 白屏时间结束点window.firstPaint = Date.now();因此白屏时间则可以这样计算出：可使用 Performance API 时白屏时间 = firstPaint - performance.timing.navigationStar...
浅谈load和DOMContentLoaded
k19970320j的博客
03-04 191
load MDN：当一个资源及其依赖资源已完成加载时，将触发load事件。 当页面上的所有资源加载完成时触发，包括：html、css、图片资源等 DOMContentLoaded MDN：当纯HTML被完全加载以及解析时，DOMContentLoaded 事件才会被触发，而不必等待样式表、图片或者子框架加载完成 ...
Chrome控制台network底部的Finish，DOMContentLoaded和Load
qq_33539213的博客
05-08 6565
打开chrome控制台network部分刷新页面，可以看到浏览器记录的网络资源加载时间，可以用于评估网页性能。 DOMContentLoaded 和 Load 和 Finish的含义和区别 DOMContentLoaded 和 Load DOMContentLoaded：DOM树构建完成。 即HTML页面由上向下解析HTML结构到末尾封闭标签 Load：页面加载完毕。 DOM树构建完成后，继...
JS兼容所有浏览器的DOMContentLoaded事件
10-18
主要介绍了JS兼容所有浏览器的DOMContentLoaded事件的相关资料，标准浏览器中，使用DOMContentLoaded事件即可实现我们的要求，注册事件处理函数也极为简单，感兴趣的朋友一起学习吧
LazyLoad 图片懒加载
06-28
- **兼容性**：正如描述中提到的，这个实现应该兼容IE6+，这意味着它可能使用了JavaScript的跨浏览器解决方案，如`attachEvent`和`DOMContentLoaded`事件来确保在所有浏览器中正常工作。 - **初始加载**：为了防止...
JS、CSS以及img对DOMContentLoaded事件的影响
10-25
最近在做性能有关的数据上报，发现了两个非常有意思的东西：Chrome开发者工具的Timeline分析面板，以及DOMContentLoaded事件。一个是强大的令人发指的性能分析工具，一个是重要的性能指标，于是就用Timeline对...
资源加载和页面事件 load, ready, DOMContentLoaded等
热门推荐
Kylin的专栏
08-14 1万+
资源加载和页面事件理想的页面加载方式 解析HTML结构。 加载并解析外部脚本。 DOM树构建完成，执行脚本。//DOMInteractive –> DOMContentLoaded 加载图片、样式表文件等外部文件。 页面加载完毕。//window.onload 涉及到的事件 window.onload: 当页面全部加载完成（包括所有资源） document.onload: 当整个html文档加
DOMContentLoaded与load的区别、触发时机
包磊磊的博客
05-18 6761
一、DOMContentLoaded 与 load 事件 关于 DOMContentLoaded 和 load 事件，MDN对他们是这样描述的：DOMContentLoaded 文档地址、load 文档地址。 DOMContentLoaded 意思就是：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。 load 意思就是：当一个资源及其依赖资源已完成加载时，将触发 load 事件。 区别小结 简而言之，二者
DOMContentLoaded与load的区别
陈喵喵的博客
03-11 1612
（参考https://www.cnblogs.com/caizhenbo/p/6679478.html）一、HTML的内容加载以及关于JS的执行顺序浏览器对HTML内容的加载是顺序加载，所以为了避免用户加载页面时等待过长时间甚至在JS脚本执行时浏览器还没有加载到其中相关的内容，我们尽量把JS脚本放在HTML的最后，即&lt;/body&gt;之前。也可以使用window的onload事件，onlo...
事件DOMContentLoaded和load的区别
Bigsmile91的专栏
09-14 1980
他们的区别是，触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。 DOM文档加载的步骤为 解析HTML结构。加载外部脚本和样式表文件。解析并执行脚本代码。DOM树构建完成。//DOMContentLoaded加载图片等外部文件。页面加载完毕。//load 在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。 用原生js可以这
Vue项目优化小结
未来可期
03-14 375
最近花了点时间优化了一下这几个月开发的项目，在网上搜集了很多并实践，如有不对欢迎指出；如有更好的优化方法，请告诉我！谢谢！ 调试工具network中的几个参数 DOMContentLoaded、Finish和Load的含义 DOMContentLoaded： DOM树构建完成； Load：页面加载完毕，包括DOM树构建和请求css、图片等外部资源； Finish：页面上所有htt...
DOM 事件DOMContentLoaded
weixin_30697239的博客
08-04 70
此事件一旦触发，标识着dom树建立完毕，以前一般都是用onload事件，这个应该说更精确，准确标志着DOM树建立完毕，这个是从Document::finishParsing()发出的，意味着页面刚刚分析完毕（下载完毕不一定就分析完毕，载入完毕以后要进行分析处理才能建立dom树） 转载于:https://www.cnblogs.com/baizx/archive/2010/08/04/17926...
finish和load和domcontentloaded的区别
04-12
这是一个很好的问题！...- "load" 事件则是在整个文档页面、图片和其他资源全部下载完成后触发。 - "unload" 事件则是在用户离开当前页面之前触发。 这些事件都是用来处理网页加载的，但各自的触发时机有所不同。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值