DOM Ready时间如何获取？如何优化

最新推荐文章于 2022-08-12 15:07:11 发布
最新推荐文章于 2022-08-12 15:07:11 发布
阅读量1.4k 收藏
点赞数
分类专栏： 前端 文章标签： js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuarmyliu/article/details/106099117
版权

DOM Ready时间如何获取？如何优化

高级浏览器通过DOMContentLoaded事件获取。

低版本webkit内核浏览器可以通过轮询document.readyState来实现

ie中可以通过setTimeout不断调用documentElement的doScroll方法，直到其可用来实现

优化建议：

减少dom结构的复杂度，节点尽可能少，嵌套不要太深

优化关键呈现路径

liuarmyliu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery的ready函数与JS的onload的区别详解
12-10
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同[removed]不能同时编写多个，如果有多个[removed]方法，只会执行一个$(document).ready()可以同时编写多个，并且都可以得到执行 3...
提取jquery的ready()方法单独使用示例
01-19
大家可以使用windows.onload事件，但onload在看来，就是页面上的东西（img,iframe等资源）全部都加载完毕后才能发生，如果页面内有大的图片的话，会在页面展现后好久时间后才执行。 如果只需要对DOM进行操作，那么...
DOM初探（34）——js加载时间线
热门推荐
abraham的博客
03-29 1万+
视频：https://ke.qq.com/course/231577?taid=3983676656552089 js时间线 创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = “loading”. 遇到link外部css，创建线程加载，并继续解析文档。 遇到scr...
h5中performance.timing轻松获取网页各个数据 如dom加载时间 渲染时长 加载完触发时间...
weixin_34324081的博客
09-15 562
在控制台中输入window.performance.timing(html5的属性); 各字段的含义： · navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 · unloadEv...
前端性能指标分析-Start Render、DOM Ready、Page Load、TTI
weixin_33698823的博客
04-23 352
了解前端性能监控，做好前端性能优化，需要知道一些概念东东。从用户体验出发的几个核心时间指标包括：Start Render、DOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的，而指标本身受哪些因素的影响也是不同的。 一、Start Render 定义 Start Render，顾名思义指的是浏览器开始渲染的时间，从用户角度出发则可以定义为...
前端开发工程师必须关注的几个性能指标
程序员的那些事
10-29 997
文 | 张贤（网易前端资深工程师） 关于页面相应时间，有一条著名的“2-5-8原则”。当用户访问一个页面： 在2秒内得到响应时，会感觉系统响应很快； 在2-5秒之间得到响应时，会感觉系统的响应速度还可以； 在5-8秒以内得到响应时，会感觉系统的响应速度很慢，但可以接受； 而超过8秒后仍然无法得到响应时，用户会感觉系统糟透了，进而选择离开这个站点，或者发起第二次请求。
计算dom渲染完成所需时间
总结，交流，记录，成长
08-12 1893
当超长页面时,进入页面滚动条不在最顶部的处理。实现原理: onload事件监听。
原生JS实现DOM加载完成马上执行JS代码的方法
12-10
但是[removed]是在页面元素都加载完毕后才执行，如果页面内有大的图片的话，会在页面展现后好久时间后才执行。所以有时我们需要在DOM载入时马上执行一些函数。jQuery提供了document.ready方法用来代替[removed]。但...
javascript ready和load事件的区别示例介绍
11-30
ready，是在DOM加载完成就触发。Jquery中 代码如下: $(document).ready(function(){}) ; //或者 $().ready(function(){}); //或者 $(function(){}): load，是在加载完所有页面内容才会触发,所有内容包括图片，flash...
jquery的$(document).ready()和onload的加载顺序
12-04
网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行，而onload事件是在所有资源都准备完成之后才执行，也就是说$(document).ready()是要在onload之前执行的，尤其当页面图片较大较多的时候，这个时间差...
使用Python获取网站加载时间
weixin_45253622的博客
03-25 3896
使用Python获取网站加载时间 import time from urllib.request import urlopen def load_time(url): try: if("http" or "https") in url: open_url = urlopen(url) #打开url else: open_url = urlopen("https://" + url) st
JavaScriptDOM操作之DOMReady实现策略以及与windowonload setTimeout区别
weixin_43635751的博客
02-13 165
一.setTImeout(code,millisecond) 功能：在指定的毫秒数后调用函数或计算的表达式 参数说明： code:要调用的函数或要执行的代码串， millisecond:在执行前需要等待的毫秒数。页面存在一定的时间才能显示样式，如果毫秒数设置过小，DOM准备时间超过毫秒数时，根本检测不到 二.window.onload = function(){}: 解释：当页面的HTML 文...
DOMContentLoaded执行时间
newbiek的博客
03-18 1207
DOMContentLoaded会在DOM树解析完毕后执行
F12下看html页面的响应时间,浏览器F12 Finish DOMContentLoaded load时间如何计算出来？...
weixin_39683858的博客
06-07 1024
白屏// 不兼容performance.timing 的浏览器，如IE8window.pageStartTime = Date.now();// 白屏时间结束点window.firstPaint = Date.now();因此白屏时间则可以这样计算出：可使用 Performance API 时白屏时间 = firstPaint - performance.timing.navigationStar...
从用户体验出发的性能指标分析-DOM Ready
09-14 1346
如何在持续升级的项目中保持项目的高性能？如何更加准确的定位和解决性能问题？实际上，WPO的最主要目的是改善用户体验，而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括：Start Render、DOM Ready、Page Load、TTI。不
DOM基础+domReady+元素节点类型判断
qq_35382207的博客
08-08 478
DOM节点类型 nodeType element 1 Node.ELEMENT_NODE 元素节点 attr 2 Node.ATTRIBUTE_NODE 属性节点 text 3 Node.TEXT_NODE 文本节点(标签之间的空白区域也属于文本节点） comment 8 Node.COMMENT_NODE 注释节点 document 9 Node.DOCUMENT_NODE 文档节点（所有文档之上，即一个页面中最最前面的位置，在文...
何谓domReady
JessicaLi的博客
07-18 219
了解dom ready
关于前端性能优化（Start Render、DOM Ready、Page Load、TTI）
dieang2090的博客
01-22 403
首先了解一下基本概念： 前端性能指标分析-Start Render、DOM Ready、Page Load、TTI 前端性能量化标准： 这篇回答说了一些测量的标准,及测量工具 知乎上一篇个人觉得还不错的(其中某些部分可能有点老了，但也写的很透彻了)具体回答了如何优化:网站为什么 JS 调用尽量放到网页底部？ 知乎https://www.zhihu.com/ques...
js----白屏事件&&dom ready时间
weixin_34290631的博客
02-20 573
页面的性能指标详解： 白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止 首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间 用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作 总下载时间——页面所有资源都加载完成并呈...
jquery 获取当前时间并展示
最新发布
05-22
你可以使用 JavaScript 中的 `Date()` 对象来获取当前时间，然后使用 jQuery 来操作 DOM 元素来展示时间。 下面是一个示例代码： HTML： ```html <p id="time"></p> ``` JavaScript/jQuery： ```javascript $...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值