DOMContentLoaded 事件

红太狼 2020-05-27 13:41 794阅读 0赞

# DOMContentLoaded 事件

DOMContentLoaded 事件会在文档完全加载和解析之后触发，无需等待CSS文件、图片和子框架加载完毕。

看到上述对事件的阐述，肯定有很多朋友会想到window.onload事件，非常相似。

两个事件主要区别如下：

（1）.DOMContentLoaded 事件是在文档完全加载和解析之后触发。

（2）.window.onload 事件不但文档完全加载和解析完毕，相关资源都要加载完毕，比如图片和CSS文件等。

所以在很多需求中，window.onload事件并不是最佳选择器，使用DOMContentLoaded事件效率会更高。

谷歌开发者工具页面加载图示如下：

![](/images/1590586799087.png)

图片分析如下：

（1）.蓝色竖线是DOMContentLoaded事件触发的时刻。

（2）.红色竖线是window.onload事件触发的时刻。

（3）.从最下面可以看到，DOMContentLoaded事件更早触发。

如果看到上述分析后，对此事件理解还是不够透彻，不用担心，后面还会有更详细介绍。

**浏览器支持:**

（1）.IE9+浏览器支持此事件。

（2）.edge浏览器支持此事件。

（3）.火狐浏览器支持此事件。

（4）.Opera浏览器支持此事件。

（5）.谷歌浏览器支持此事件。

（6）.safria浏览器支持此事件。

**DOMContentLoaded事件触发时机：**

下面结合图示介绍一下，DOMContentLoaded事件触发的时机。

明确了事件的触发时机，也就知道在何种场景下应用此事件，当然理解为何有时比window.onload高效。

DOMContentLoaded触发可能会受到CSS文件加载和JavaScript文件的影响，所以分为如下三种情况。

**1.没有与**`<script>`**标签的情况：**

事件触发时机图示如下：

![](/images/1590586707148.jpg)

图示分析如下：

（1）.HTML代码完全下载完毕后，生成DOM，此时触发DOMContentLoaded 事件。

（2）.由此可见此事件是在用户看到页面内容之前触发。

（3）.然后根据DOM生成一个渲染树，浏览器根据渲染树的内容计算出元素在文档中的位置。

（4）.最后绘制出来，呈现在浏览者面前。

**2.具有CSS代码情况：**

无论是引入的CSS代码，还是内部的CSS代码都不会对DOMContentLoaded 事件造成影响。

事件触发时机图示如下：

![](/images/1590586828194.jpg)

代码分析如下：

（1）.遇到CSS代码之后，会生成CSSDOM，此时并不影响DOM的生成。

（2）.所以不会影响DOMContentLoaded事件的触发。

（3）.此时渲染树是基于DOM与CSSDOM生成的。

（4）.然后根据DOM生成一个渲染树，浏览器根据渲染树的内容计算出元素在文档中的位置。

（5）.最后绘制出来，呈现在浏览者面前。

**3.具有JavaScript代码情况：**

JavaScript代码对DOMContentLoaded 事件的触发是有影响的。

事件触发时机图示如下：

![](/images/1590586650088.png)

由上图可以看到，JavaScript加载和执行会迟滞DOMContentLoaded 事件的触发。

JavaScript要等待CSS渲染完成再去加载和执行，因为浏览器无法确定JavaScript是否需要DOM元素信息。

为确保JavaScript获取的是最新的信息，会首先加载和渲染CSS。

为了解决JavaScript阻塞问题，HTML5为`<script>`标签新增sync和defer属性。

**代码实例如下：**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
}
</style>
<script>
addEventListener("DOMContentLoaded",function(){
  let lis=document.getElementsByTagName("li");
  lis[1].style.color="red";
},false);
</script>
</head>
<body>
  <ul id="box">
    <li>蒲公英云一</li>
    <li>蒲公英云二</li>
    <li>蒲公英云三</li>
    <li>蒲公英云四</li>
    <li>蒲公英云五</li>
    <li>蒲公英云六</li>
  </ul>
</body>
</html>
```

上述代码会在文档加载和解析完毕后触发DOMContentLoaded 事件。

发表评论取消回复

表情：

评论列表（有 0 条评论，794人围观）

还没有评论，来说两句吧...

相关阅读

相关「深入探究Web页面生命周期：DOMContentLoaded、load、beforeunload和unload事件」

页面生命周期的四个重要事件：DOMContentLoaded、load、beforeunload 和 unload，定义了页面从加载到卸载的不同阶段。这些事件可以帮助我们...

我就是我/ 2024年04月25日 20:14/ 0 赞/ 45 阅读

相关【JQuery_事件】事件_语法_键盘事件_鼠标事件_

0.事件 0.0 事件四要素 1. 事件源 2. 事件绑定处理函数 3. 查找修改元素 4. 修改元素 0.0.0事件源 document

ゞ浴缸里的玫瑰/ 2024年04月03日 10:16/ 0 赞/ 51 阅读

相关监听iframe中的DOMContentLoaded事件

是不可以的… 虽然可以获得iframe的document对象 var frameDoc = document.getElementById('iframeViewP

系统管理员/ 2022年12月31日 11:27/ 0 赞/ 147 阅读

相关 DOMContentLoaded

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conten

素颜马尾好姑娘i/ 2022年06月16日 23:26/ 0 赞/ 86 阅读

相关 DOMContentLoaded 事件

在javascript 中，DOMContentLoaded 事件是文档加载完成时触发的事件，文档加载完成是指DOM结构加载完成，不用考虑其它资源，比如图片等；我们来看

港控/mmm°/ 2022年05月27日 00:36/ 0 赞/ 110 阅读

相关 JavaScript - DOMContentLoaded和Load的差异

转载博客:[大佬 ORZ][ORZ] DOMContentLoaded顾名思义，就是dom内容加载完毕。页面绘制的过程：当输入一个URL，页面的展示首先是空白的，然后过一

谁践踏了优雅/ 2022年05月16日 01:12/ 0 赞/ 95 阅读

相关页面生命周期：DOMContentLoaded, load, beforeunload, unload

页面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：[http://javascript.info/onlo

客官°小女子只卖身不卖艺/ 2022年04月13日 05:40/ 0 赞/ 201 阅读

相关页面生命周期：DOMContentLoaded, load, beforeunload, unload

HTML页面的生命周期有以下三个重要事件： `DOMContentLoaded` —— 浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像是和样式表等外部资源

灰太狼/ 2022年03月15日 08:28/ 0 赞/ 391 阅读

相关各种事件（html事件，鼠标事件，键盘事件，焦点事件以及阻止默认事件）

HTML事件 onload 事件页面或图片加载完成后执行只有图片和页面可以执行 window.οnlοad=function(){ //整个

短命女/ 2021年10月24日 03:24/ 0 赞/ 517 阅读

相关 DOMContentLoaded 事件

DOMContentLoaded 事件 DOMContentLoaded 事件会在文档完全加载和解析之后触发，无需等待CSS文件、图片和子框架加载完毕。看到上述对事件的...

红太狼/ 2020年05月27日 13:41/ 0 赞/ 795 阅读