前端性能优化--load和DOMContentLoaded

最新推荐文章于 2025-04-06 18:53:41 发布
转载 最新推荐文章于 2025-04-06 18:53:41 发布 · 940 阅读 · 0
文章标签：

#DOMContentLoaded #load #前端性能优化

本文详细解析了DOMContentLoaded与load事件的区别。DOMContentLoaded是指DOM文档解析完成即触发，而load事件则是在页面上所有资源（包括图片、音频、视频等）加载完成后才触发。通常情况下，DOMContentLoaded事件会先于load事件触发。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

转自:https://www.cnblogs.com/caizhenbo/p/6679478.html

作者写的很好,通俗易懂,解释的也很全面.

DOMContentLoaded: 就是dom内容加载完毕,HTML文档被解析加载完成.

load:页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件,页面的load事件会在DOMContentLoaded被触发之后才触发。

五花毛
关注
domReady机制探究及DOMContentLoaded研究
前端-后端学习之路
11-10 1255
domReady机制是很多框架和库都具有的种子模块，使用了在DOM树解析完成后就立即响应，不用等待图片等资源下载完成（onload执行时候表示这些资源完全下载完成）的一种机制，那怎么实现呢。1）支持DOMContentLoaded事件的，就使用DOMContentLoaded事件； 2）不支持的，就用来自Diego Perini发现的著名Hack兼容。兼容原理大概就是，通过IE中的document
前端性能优化-script标签中的async与defer
逍遥的前端笔记
08-05 1157
当浏览器解析 DOM 时候，遇到 script 标签时，会暂停 DOM 的解析，先加载并执行 script 中的代码，然后再继续 DOM 的解析。
事件DOMContentLoaded和load的区别
Bigsmile91的专栏
09-14 2331
他们的区别是，触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。 DOM文档加载的步骤为 解析HTML结构。加载外部脚本和样式表文件。解析并执行脚本代码。DOM树构建完成。//DOMContentLoaded加载图片等外部文件。页面加载完毕。//load 在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。 用原生js可以这
DOMContentLoaded和load的区别
weixin_34293911的博客
02-05 273
为什么80%的码农都做不了架构师？>>> ...
domcontentloaded ajax,Ajax优化(1) — DOMContentLoaded
weixin_26808023的博客
08-05 278
很久没有来百度空间看看了,一直忙武林三国游戏, 这款webgame目前已经进入收尾阶段, 今天来到这儿,突然觉得留下点什么比较好, 呵呵.. ..想了想, 就取了"Ajax优化"这个题目, 将一系列同行们可能没有用到 or 没有注意 or 发现但没有去处理的细节记录下来.DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。与DOM中的onLo...
前端性能优化实战：加载速度与用户体验
shejizuopin的博客
03-29 607
前端性能优化是一个持续迭代和改进的过程。通过压缩与合并资源、使用CDN加速、懒加载与预加载、减少DOM操作、使用响应式设计以及优化JavaScript执行等技巧，可以显著提升网站的加载速度和用户体验。在实际开发中，建议结合具体项目需求和环境配置进行相应的调整和优化。
知识篇：（二十四）前端性能优化之道：Lazy Loading 与图片懒加载实战
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
11-13 1413
Lazy Loading（懒加载）是现代前端性能优化的关键策略之一，特别是对图片和资源文件的优化。当页面首次加载时，我们只加载首屏内容和必要资源，等到用户滚动到下方或需要时，再动态加载其余内容。这种策略显著减少了页面加载时间，提升了用户体验，尤其是在移动端和低网速环境下。Lazy Loading 是指仅在用户需求的情况下加载资源。通常应用于图片、视频、iframe、长列表或分页加载的大量数据。懒加载（Lazy Loading）是提升前端性能的有效策略。
前端性能优化：代码分割与懒加载
shejizuopin的博客
04-03 502
代码分割是一种将应用程序代码分割成更小的块（chunks）的技术，这些块可以按需加载。通过代码分割，我们可以减少初始加载的代码量，从而加快页面加载速度。懒加载是一种按需加载资源的技术，它只在需要时才加载资源，而不是在初始加载时加载所有资源。懒加载可以应用于图像、视频、脚本等多种资源。
Web前端性能监控与优化
最新发布
shejizuopin的博客
04-06 1035
/ 监控页面加载时间console.log('页面加载时间: ' + loadTime + 'ms');// 可以将loadTime发送到服务器进行记录和分析});// 监控首屏时间（简化示例）// 假设首屏元素为body的所有直接子元素if (element.offsetTop < window.innerHeight) { // 元素在首屏内// 假设元素有data-paint-time属性记录渲染时间});// 实际应用中，需要更精确地确定首屏元素和渲染时间。
DOMContentLoaded
树上骑个猴的博客
10-26 705
是什么 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。 这时问题又来了，“HTML 文档被加载和解析完成”是什么意思呢？或者说，HTML 文档被加载和解析完成之前，浏览器做了哪些事情呢？那我们需要从浏览器渲染原理来谈谈。 浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型），到这里 HTML 文档就被加载和解析完成了。如果有 CSS 的会根据 CSS 生成 CSSOM（CSS 对象模型）
domcontentloaded和load的区别
qq_38677540的博客
05-18 145
DOMContentLoaded 　当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。 load 　load 仅用于检测一个完全加载的页面，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件。 // 不兼容老的浏览器，兼容写法见[jQuery中ready与load事件](http://www.imooc.com/code/3253)，或用jQuery document.addEv.
defer和async
qq_43812731的博客
11-11 842
浏览器渲染原理 HTML 文档被加载和解析完成之前，浏览器做了哪些事情呢？那我们需要从浏览器渲染原理来谈谈。 浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型），到这里 HTML 文档就被加载和解析完成了。如果有 CSS 的会根据 CSS 生成 CSSOM（CSS 对象模型），然后再由 DOM 和 CSSOM 合并产生渲染树。有了渲染树，知道了所有节点的样式，下面便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局阶段。有了以上这些信息，下面就把节点绘制到浏览
HTML笔记：DOMContentLoaded和load的区别
weixin_45295262的博客
12-26 1316
看到这个说的比较好，就转载作为笔记，方便自己复习时候看看. 来源（建议看她写的，比较美观）： https://www.cnblogs.com/gg-qq/p/11327972.html 作者：guo&qi 一、概念 DOMContentLoaded 　　当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。 load 　　load 仅用于检测一个完全加载的页面，页面的html、css、js、图片等资源都已经加载完
DOMContentLoaded与load的区别
陈喵喵的博客
03-11 1711
（参考https://www.cnblogs.com/caizhenbo/p/6679478.html）一、HTML的内容加载以及关于JS的执行顺序浏览器对HTML内容的加载是顺序加载，所以为了避免用户加载页面时等待过长时间甚至在JS脚本执行时浏览器还没有加载到其中相关的内容，我们尽量把JS脚本放在HTML的最后，即&lt;/body&gt;之前。也可以使用window的onload事件，onlo...
前端性能优化分享
03-15
### 前端性能优化的最佳实践 #### 一、代码分割（Code Splitting） 代码分割是一种重要的前端性能优化策略，它能够按需加载模块，减少初始加载时间。通过将应用程序拆分为多个较小的文件，浏览器可以根据用户的操作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值