前端性能优化指标 - DCL（触发时机、脚本对 DCL 的影响、CSS 对 DCL 的影响）

前端性能优化指标 DCL

1、概述

• DCL（DOMContentLoaded）表示浏览器已经完全加载并解析了页面的初始 HTML 文档，同时完成了 DOM 树的构建，但需等待样式表、图片等外部资源的加载

2、触发时机

1. 当 HTML 文档被完全加载和解析时触发

2. 此时，DOM 树已经构建完成，但外部资源（例如，样式表、图片、脚本等）可能仍在加载中

3. 如果页面中有同步的 JavaScript 脚本（未使用 async 或 defer 属性），浏览器会等待这些脚本执行完毕后再触发 DCL

3、影响 DCL 的因素

（1）基本介绍

1. HTML 文档大小：HTML 文件越大，解析时间越长，DCL 时间越晚

2. 同步 JavaScript 脚本：同步脚本会阻塞 DOM 解析，延迟 DCL 的触发

3. 网络延迟：HTML 文件加载时间受网络速度影响，网络越慢，DCL 时间越长

4. CSS 文件加载：虽然 CSS 不会阻塞 DOM 解析，但会阻塞页面渲染，间接影响 DCL

（2）优化策略

1. 减少 HTML 文件大小：压缩 HTML 文件，移除不必要的空格、注释和冗余代码

2. 异步加载 JavaScript：使用 async 或 defer 属性加载脚本，避免阻塞 DOM 解析

3. 优化网络请求：使用 CDN 加速 HTML 文件的加载，减少网络延迟

4. 内联关键 CSS：将关键 CSS 直接内联到 HTML 中，减少外部 CSS 文件的阻塞时间

---

学习补充

1、脚本对 DCL 的影响

1. 同步脚本：会阻塞 HTML 解析，DCL 需要等待脚本执行完成

2. 异步脚本（async）：不会阻塞 HTML 解析，DCL 不需要等待脚本

3. 延迟脚本（defer）：不会阻塞 HTML 解析，但 DCL 需要等待脚本执行完成

2、脚本分类

• 在前端开发中，script 标签用于加载和执行 JavaScript 代码，根据加载和执行方式的不同，script 标签可以分为同步脚本、异步脚本（async）和延迟脚本（defer）

1. 同步脚本：当浏览器解析到 script 标签时，会立即停止 HTML 文档的解析，加载并执行脚本文件，脚本执行完毕后才会继续解析HTML文档

• 特点：阻塞HTML解析、多个脚本顺序执行

<script src="script1.js"></script>
<script src="script2.js"></script>

2. 异步脚本（async）：使用 async 属性的脚本会在下载完成后立即执行，执行时会阻塞 HTML 解析，异步脚本的下载与 HTML 解析并行进行，但执行时会暂停 HTML 解析

• 特点：并行加载、多个脚本执行顺序不确定

<script async src="script1.js"></script>
<script async src="script2.js"></script>

3. 延迟脚本（defer）：使用 defer 属性的脚本会在HTML文档解析完成后，按照它们在文档中出现的顺序依次执行

• 特点：并行加载、多个脚本顺序执行

<script defer src="script1.js"></script>
<script defer src="script2.js"></script>

3、CSS 对 DCL 的影响

1. CSS 不会直接阻塞 DOM 解析，但它可能会间接影响 JavaScript 执行，从而对 DCL 的触发时间产生一定的影响

2. 例如，如果页面中存在依赖于 CSSOM 的 JavaScript 代码（例如，通过 document.styleSheets 访问样式表），浏览器会等待 CSS 文件加载完成后再执行这些脚本，如果这些脚本是同步加载的，会延迟 DCL 的触发