理解DOMContentLoaded：JS、CSS与img的影响

css样式

133 浏览量更新于2024-08-31 收藏 426KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"本文将探讨JS、CSS以及img元素如何影响DOMContentLoaded事件的触发，并深入解析HTML5规范中关于此事件的定义。" 在前端开发中，理解DOM（文档对象模型）ContentLoaded事件至关重要，因为它标志着浏览器已经完成了初始HTML文档的解析，并且DOM树已经构建完成，但不包括外部资源如图片或样式表的加载。这个事件是JavaScript执行的一个关键时机，它允许开发者在所有DOM元素可用但外部资源尚未完全加载的情况下进行操作。根据W3C的HTML5规范，DOMContentLoaded事件的触发遵循以下步骤： 1. 当用户代理（即浏览器）停止解析文档时，会设置当前文档的准备状态为"交互式"，并清除插入点。 2. 如果存在一个待执行的文档解析完成后会运行的脚本列表，那么浏览器将执行以下子步骤： - 循环等待，直到列表中的第一个脚本的"准备被解析执行"标志被设置，且解析器的文档没有阻止脚本执行的样式表。 - 执行列表中的第一个脚本。 - 从待执行的文档解析完成后的脚本列表中移除已执行的脚本。 - 如果列表仍然不为空，重复以上子步骤，从第一步开始。 DOMContentLoaded事件与页面的加载顺序紧密相关。JavaScript如果位于`<head>`标签中，会阻塞DOM的构建，直到脚本执行完毕。然而，通过将JavaScript放在`<body>`标签的底部或者使用异步加载（async或defer属性），可以避免这种阻塞，使得DOMContentLoaded事件能更早地触发。 CSS文件的引入，如果通过`<link rel="stylesheet">`标签，通常不会阻塞DOM的解析，但是会阻止DOMContentLoaded事件的触发，直到样式表被下载和应用。这是因为浏览器在渲染页面之前需要知道元素的样式信息。然而，CSS可以通过使用`<style>`标签内联在文档中，这样不会影响DOM的构造。至于`<img>`元素，它们并不直接影响DOMContentLoaded事件。图像的加载是异步的，不会阻碍DOM树的构建。当图像开始加载时，它们会在窗口的load事件中触发，而不是DOMContentLoaded事件。优化DOMContentLoaded事件的关键在于正确放置脚本、使用异步加载和内联关键CSS，以确保尽早触发该事件，提高页面的用户体验。理解这些机制有助于开发者创建更快、更响应式的网页。

资源详情

资源推荐

JS、、CSS以及以及img对对DOMContentLoaded事件的影响事件的影响

前端的纯技术就是对规范的认知

什么是DOMContentLoaded事件？

首先想到的是查看W3C的HTML5规范，DOMContentLoaded事件在什么时候触发：

Once the user agent stops parsing the document, the user agent must run the following steps:

1. Set the current document readiness to “interactive” and the insertion point to undefined.

Pop all the nodes off the stack of open elements.

2. If the list of scripts that will execute when the document has finished parsing is not empty, run these substeps:

2.1 Spin the event loop until the first script in the list of scripts that will execute when the document has finished

parsing has its “ready to be parser-executed” flag set and the parser’s Document has no style sheet that is

blocking scripts.

2.2 Execute the first script in the list of scripts that will execute when the document has finished parsing.

2.3 Remove the first script element from the list of scripts that will execute when the document has finished

parsing (i.e. shift out the first entry in the list).

2.4 If the list of scripts that will execute when the document has finished parsing is still not empty, repeat these

substeps again from substep 1.

3. Queue a task to fire a simple event that bubbles named DOMContentLoaded at the Document.

规范总是那么的晦涩，但至少有一点是可以明确了的，就是在JS（不包括动态插入的JS）执行完之后，才会触发

DOMContentLoaded事件。

接下来看看MDN上有关DOMContentLoaded事件的文档：

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without

waiting for stylesheets, images, and subframes to finish loading

Note: Stylesheet loads block script execution, so if you have a <script> after a <link rel="stylesheet" ...>, the page will

not finish parsing – and DOMContentLoaded will not fire – until the stylesheet is loaded.

这么看来，至少可以得出这么一个理论：DOMContentLoaded事件本身不会等待CSS文件、图片、iframe加载完成。

它的触发时机是：加载完页面，解析完所有标签（不包括执行CSS和JS），并如规范中所说的设置 interactive 和执行每个静态

的script标签中的JS，然后触发。

而JS的执行，需要等待位于它前面的CSS加载（如果是外联的话）、执行完成，因为JS可能会依赖位于它前面的CSS计算出

来的样式。

实践是检验真理的唯一标准

实验1：DOMContentLoaded事件不直接等待CSS文件、图片的加载完成

index.html:

<!DOCTYPE html>

<head>

</head>

<body>

<p>Content</p>

</body>

</html>

下载后可阅读完整内容，剩余7页未读，立即下载

table { border-collapse: collapse; width: 100%; } td, th { border: 1.5px solid black; padding: 5px; } table img { max-width: 150px; height: auto; }

<input type="text" oninput="filterTable(0)" placeholder="工艺膜层"> <input type="text" oninput="filterTable(1)" placeholder="AOI Step"> <input type="text" oninput="filterTable(2)" placeholder="不良类型"> <input type="text" oninput="filterTable(3)" placeholder="Layer(Code)"> <input type="text" oninput="filterTable(4)" placeholder="Type"> <input type="text" oninput="filterTable(5)" placeholder="Dpet"> <input type="text" oninput="filterTable(6)" placeholder="Subcode"> Code描述 Image1 Image2 Image3 Image4 Image5 Image6 判定细则

ACT Particle ACT Particle ACT Particle ACT Particle <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;" > <input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)" style="width: 100px; height: auto;"> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> <input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;"> <input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)"style="width: 100px; height: auto;"> Particle

这个表格怎么设置自定义调整列宽

<input type="text" oninput="filterTable(0)" placeholder="工艺膜层">	<input type="text" oninput="filterTable(1)" placeholder="AOI Step">	<input type="text" oninput="filterTable(2)" placeholder="不良类型">	<input type="text" oninput="filterTable(3)" placeholder="Layer(Code)">	<input type="text" oninput="filterTable(4)" placeholder="Type">	<input type="text" oninput="filterTable(5)" placeholder="Dpet">	<input type="text" oninput="filterTable(6)" placeholder="Subcode">	Code描述	Image1	Image2	Image3	Image4	Image5	Image6	判定细则
ACT	Particle	ACT	Particle	ACT	Particle	ACT	Particle	<input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;" >	<input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)" style="width: 100px; height: auto;">	<input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;">	<input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;">	<input type="file" onchange="previewImage(this)" onclick="showPopup(this.src)"style="width: 100px; height: auto;">	<input type="file" onchange="previewImage(this)"onclick="showPopup(this.src)"style="width: 100px; height: auto;">	Particle