浅谈浏览器页面渲染过程 load 与 DOMContentLoaded 事件

最新推荐文章于 2024-03-09 09:50:52 发布
VIP文章 最新推荐文章于 2024-03-09 09:50:52 发布
阅读量874 收藏 1
点赞数
文章标签： javascript html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44583553/article/details/104242907
版权

在这里插入图片描述

一个问题

为什么推荐把 <script> 都放在 <body> 底部？
  • 防止加载资源而导致的长时间的白屏。
  • js 只能获取在 <script> 以上的 dom。
  • …

正文

document.readyState

该属性描述了文档的加载状态，发生变化时，会在 document 对象上触发 readystatechange 事件。有3种状态：

  • loading 正在加载
  • interactive 文档已被解析，loading 状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载，会在 document 和 window 对象上触发 DOMContentLoaded 事件。
  • complete
最低0.47元/天 解锁文章
再次重逢的时间
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM Document.readyState 属性
JessicaLi的博客
07-18 277
document.readyState
浏览器渲染原理、DOMContentLoaded 和 load 的区别、页面的加载和渲染过程、defer 和 async 的用法和区别
icemwj的博客
09-30 894
浏览器渲染原理（当我们输入URL，按下回车发生了什么？） 当我们在浏览器地址输入URL时，浏览器会发送请求到服务器，服务器将请求的HTML文档发送回浏览器，浏览器将文档下载下来后，便开始从上到下解析，解析完成之后，会生成DOM。如果页面中有css，会根据css的内容形成CSSOM，然后DOM和CSSOM会生成一个渲染树，最后浏览器会根据渲染树的内容计算出各个节点在页面中的确切大小和位置，并将其绘制在浏览器上。 1、输入url地址后，首先进行DNS解析，将相应的域名解析为IP地址 2、 查找服务器的IP地址：
前端的DOMContentLoaded 不触发
最新发布
qq_55411982的博客
03-09 187
3.DOMContentLoaded事件在 HTML 文档解析完成并且所有的 DOM 元素已经生成之后触发,确保在</body>上方,若在<head>中,dom元素还未加载完全。2.后端拦截器是否允许js文件的访问。1.引入资源地址是否正确。
JS中为window添加DOMContentLoaded事件监听的小思考
qq_51598480的博客
04-27 965
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .new { height: 100px; width: 100px; margin: 100.
关于DOMContentLoaded死活无效的解决方案
cxyd4399的博客
05-11 1084
let observer = new MutationObserver( (mutationRecords) => { for (let mr of mutationRecords) { for (let el of mr.addedNodes) { if (el.nodeName === 'DIV') { alert("..
JS兼容所有浏览器的DOMContentLoaded事件
11-30
使用JavaScript操作dom元素的时候，通常会将获取dom元素的代码放在[removed]=function(){}事件处理函数中，但[removed]事件在某些开始后可能会影响客户...标准浏览器中，使用DOMContentLoaded事件即可实现我们的要求，
Javascript封装DOMContentLoaded事件实例
10-25
主要介绍了Javascript封装DOMContentLoaded事件实例,DOMContentLoaded是FF,Opera 9的特有的Event, 当所有DOM解析完以后会触发这个事件,需要的朋友可以参考下
JS、CSS以及img对DOMContentLoaded事件的影响
10-25
最近在做性能有关的数据上报，发现了两个非常有意思的东西：Chrome开发者工具的Timeline分析面板，以及DOMContentLoaded事件。一个是强大的令人发指的性能分析工具，一个是重要的性能指标，于是就用Timeline对...
DOMContentLoaded事件
qjbagu的专栏
07-17 1206
window的load事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载外部资源过多而颇费周折。而DOMContentLoaded事件则在形成完整的DOM树之后就会触发，不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕。与load事件不同，DOMContentLoaded支持在页面下载的早期添加事件处理程序，这也就意味着用户能够尽早地与页面进行交互。 要处
golang获取utc时间_H3C交换机修改时间
weixin_28726391的博客
12-18 565
首先学习：　　NTP　　network time protocol　　网络时间协议　　UTC　　世界协调时间　　 # 查看时钟设置　dis clock #图片为已经配置好的时钟有两种时钟获取方式1.开取NTP ，由网络时钟服务器获取时间　　　　clock protocol ntp mdc mdc-id2.不置时钟服务器， 　　　　　　　　　　　　 clock protocol none# cloc...
单点性能测试-页面Load时间
晴天的博客
05-05 931
单点性能测试-页面Load时间
浏览器基础（5）-DOMContentLoaded与Load详解
weixin_42370640的博客
04-20 1954
DOMContentLoaded与Load详解DOMContentLoaded与Load DOMContentLoaded与Load 首先我们先直观感受一哈什么是DOMContentLoaded与Load。打开Chrome DevTools，切换到Network面板，按F5刷新一哈页面，得到如下截图： ...
html 页面加载事件,页面加载事件--DOMContentLoaded
weixin_39621695的博客
06-05 2485
DOMContentLoaded 和 window.onload 的区别当页面完全加载完毕后会触发 window.onload 事件，我们知道可以利用 window.onload 事件来触发并执行需要页面完全加载完毕后才能执行的 javascript 脚本，但是假如页面包含很多样式文件、图片文件、子框架页面(iframe)的话，onload 事件也会被相应延迟到这些文件加载完成才执行，有时候并不是...
window.onload 和 DOMContentLoaded
weixin_33709219的博客
02-20 267
相信写js的，都知道window.onload吧，但是并不是每个人都知道DOMContentLoaded，其实即使你不知道，很有可能你也经常使用了这个东西。 一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包括图片等元素。...
浏览器DOMContentLoaded与load事件代码
wzp20092009的博客
10-18 639
DOMContentLoaded DOMContentLoaded 事件发生在最初的 HTML 文档被加载和解析之后，此时 css 样式表、图片等资源以及其它子窗口( frame )加载与否与此无关。 function docReady(fn){ if(document.addEventListener){ document.addEventListener('DOMContentLoad...
DomContentLoaded到底是在什么时候执行
weixin_30770495的博客
07-26 572
https://www.cnblogs.com/caizhenbo/p/6679478.html 转载于:https://www.cnblogs.com/94pm/p/11251019.html
js domcontentloaded 怎么使用_开始在web中使用JS Modules
weixin_39812046的博客
11-29 159
原文：《Using JavaScript modules on the web》 https://developers.google.com/web/fundamentals/primers/modules译者序JS modules，即ES6的模块化特性，通过 那些支持 type=module的浏览器会忽略掉 nomodule的脚本，而不兼容也会优雅降级，执行fallback.js。译者注：亲...
load和DOMContentLoaded有什么区别？
04-27
`load`事件和`DOMContentLoaded`事件都是在HTML页面加载时触发的事件，但它们之间有一些区别。 `load`事件是在页面中所有资源(如图片、脚本、样式等)加载完毕后触发的。这表示页面已经完全加载完成，包括所有的资源...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值