load和DOmContentLoaded的区别

最新推荐文章于 2021-12-08 00:05:49 发布
最新推荐文章于 2021-12-08 00:05:49 发布
阅读量691 收藏
点赞数
分类专栏： 前端认知
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanwen52/article/details/117198931
版权

首先Dom文档加载步骤

1）、解析html结构

2）、加载外部脚本和样式表文件

3）、解析并执行脚本文件

4）、构造HTML DOM模型（DOMContentLoaded执行点）

5）、加载图片等外部文件

6）、页面加载完毕 （load）

 

从上面这个流程，我们可以清晰的看到load和DOMContentLoaded的不同，DOMContentLoaded是在第6步之后执行，而load是在第4步之后执行，很明显DOMContentLoaed是在load之前执行。

Master.Yuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript封装DOMContentLoaded事件实例
01-19
最近在写一个Javascript的框架，刚把DOMContentLoaded事件封装好，略带小兴奋，把开发过程中遇到的原理和兼容性问题做篇笔记，省的忘记到处找。 我们在写js代码的时候，一般都会添加[removed]事件，主要是为了在DOM...
事件DOMContentLoaded和load的区别
Bigsmile91的专栏
09-14 1974
他们的区别是，触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。 DOM文档加载的步骤为 解析HTML结构。加载外部脚本和样式表文件。解析并执行脚本代码。DOM树构建完成。//DOMContentLoaded加载图片等外部文件。页面加载完毕。//load 在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。 用原生js可以这
js中DOMContentLoaded和load的区别
dc1339485的博客
02-28 206
如题；DOMContentLoaded和load都是页面加载的时候触发的事件。区别在于触发的时机不一样。 浏览器渲染页面DOM文档加载的步骤： 1.解析HTML结构。 2.加载外部脚本和css文件。 3.解析并执行脚本代码。 4.DOM树构建完成。(此时会触发DOMContentLoaded事件) 5.加载外部图片等文件。 6.页面加载完毕。(此时会触发load事件) ...
defer和async
qq_43812731的博客
11-11 741
浏览器渲染原理 HTML 文档被加载和解析完成之前，浏览器做了哪些事情呢？那我们需要从浏览器渲染原理来谈谈。 浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型），到这里 HTML 文档就被加载和解析完成了。如果有 CSS 的会根据 CSS 生成 CSSOM（CSS 对象模型），然后再由 DOM 和 CSSOM 合并产生渲染树。有了渲染树，知道了所有节点的样式，下面便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局阶段。有了以上这些信息，下面就把节点绘制到浏览
DOMContentLoaded 与 load 的区别
lio-zero 的博客
11-23 102
当页面中的所有节点都已在 DOM 树中构建时，将触发 DOMContentLoaded 事件。当所有资源(如图像和子帧)都已完全加载时，将触发 load 事件。 readyState 属性 IE 8 和旧版本的 IE 不支持 DOMContentLoaded 事件。 为了支持旧版本 IE 中的行为，我们可以使用 readyState 属性检查文档是否已完全加载： const ready = fun...
jquery中ready()函数执行的时机和window的load事件比较
01-19
jquery的ready()实现的是 DOMContentLoaded 事件，DOMContentLoaded与window load事件的区别 简单的说ready()是在文档加载完成就会触发,此时图片等资源可能还没有完全加载, load是在所有资源都加载完成后才会触发 看...
angular-img-lazy-load:轻型Angular延迟加载图像指令
04-28
例如“ DOMContentLoaded加载调整大小滚动”或某些选择器单击，而是每50毫秒更新一次imageToLazyLoad数组，并在加载所有图像时加载在Viewport和isVisible中的图像（例如jQuery.is（'：visible'））。循环将停止。...
harmonyos2-loader:使用iframe的资源加载器
07-01
避免延迟load和DOMContentLoaded事件 如果需要，即使在load事件之后也保留脚本执行顺序 基于可重用源代码（工厂字符串）构建持久模块化系统 目前，一个小的loadJSON.js独立助手显示了大部分这些功能： 异步加载 URL ...
fewpjs-document-onload-rcdd_202104_tur_few
03-30
资源及其所有从属资源（包括CSS和JavaScript）完成加载后，将触发load事件 在本课程中，我们将重点介绍DOMContentLoaded 。 为什么DOMContentLoaded很重要？ DOMContentLoaded事件是浏览器的内置方法，用于指示何时...
DOMContentLoaded与load的区别
陈喵喵的博客
03-11 1574
（参考https://www.cnblogs.com/caizhenbo/p/6679478.html）一、HTML的内容加载以及关于JS的执行顺序浏览器对HTML内容的加载是顺序加载，所以为了避免用户加载页面时等待过长时间甚至在JS脚本执行时浏览器还没有加载到其中相关的内容，我们尽量把JS脚本放在HTML的最后，即</body>之前。也可以使用window的onload事件，onlo...
HTML笔记：DOMContentLoaded和load的区别
weixin_45295262的博客
12-26 1153
看到这个说的比较好，就转载作为笔记，方便自己复习时候看看. 来源（建议看她写的，比较美观）： https://www.cnblogs.com/gg-qq/p/11327972.html 作者：guo&qi 一、概念 DOMContentLoaded 　　当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。 load 　　load 仅用于检测一个完全加载的页面，页面的html、css、js、图片等资源都已经加载完
DOMContentLoaded和load
AnitaSun的博客
12-08 1662
概述 load事件：load 应该仅用于检测一个完全加载的页面 当一个资源及其依赖资源已完成加载时，将触发load事件。也就是说，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件 DOMContentLoaded事件：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。也就是说，DOM 树已经构建完毕就会触发 DOMContentLoaded 事件 js 阻塞了什么 因为js在执行的过程
DOMContentLoaded与load的区别、触发时机
包磊磊的博客
05-18 6660
一、DOMContentLoaded 与 load 事件 关于 DOMContentLoaded 和 load 事件，MDN对他们是这样描述的：DOMContentLoaded 文档地址、load 文档地址。 DOMContentLoaded 意思就是：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。 load 意思就是：当一个资源及其依赖资源已完成加载时，将触发 load 事件。 区别小结 简而言之，二者
DOMContentLoaded与load
richest_qi的博客
07-05 331
DOMContentLoaded、onreadystatechange window.performance
load和DOMContentLoaded有什么区别？
最新发布
04-27
`load`事件和`DOMContentLoaded`事件都是在HTML页面加载时触发的事件，但它们之间有一些区别。 `load`事件是在页面中所有资源(如图片、脚本、样式等)加载完毕后触发的。这表示页面已经完全加载完成，包括所有的资源...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值