前端性能优化指标 - DCL（触发时机、脚本对 DCL 的影响、CSS 对 DCL 的影响）
前端性能优化指标 DCL
1、概述
- DCL（DOMContentLoaded）表示浏览器已经完全加载并解析了页面的初始 HTML 文档，同时完成了 DOM 树的构建，但需等待样式表、图片等外部资源的加载
2、触发时机
-
当 HTML 文档被完全加载和解析时触发
-
此时，DOM 树已经构建完成，但外部资源（例如，样式表、图片、脚本等）可能仍在加载中
-
如果页面中有同步的 JavaScript 脚本（未使用 async 或 defer 属性），浏览器会等待这些脚本执行完毕后再触发 DCL
3、影响 DCL 的因素
（1）基本介绍
-
HTML 文档大小：HTML 文件越大，解析时间越长，DCL 时间越晚
-
同步 JavaScript 脚本：同步脚本会阻塞 DOM 解析，延迟 DCL 的触发
-
网络延迟：HTML 文件加载时间受网络速度影响，网络越慢，DCL 时间越长
-
CSS 文件加载：虽然 CSS 不会阻塞 DOM 解析，但会阻塞页面渲染，间接影响 DCL
（2）优化策略
-
减少 HTML 文件大小：压缩 HTML 文件，移除不必要的空格、注释和冗余代码
-
异步加载 JavaScript：使用 async 或 defer 属性加载脚本，避免阻塞 DOM 解析
-
优化网络请求：使用 CDN 加速 HTML 文件的加载，减少网络延迟
-
内联关键 CSS：将关键 CSS 直接内联到 HTML 中，减少外部 CSS 文件的阻塞时间
学习补充
1、脚本对 DCL 的影响
-
同步脚本：会阻塞 HTML 解析，DCL 需要等待脚本执行完成
-
异步脚本（async）：不会阻塞 HTML 解析，DCL 不需要等待脚本
-
延迟脚本（defer）：不会阻塞 HTML 解析，但 DCL 需要等待脚本执行完成
2、脚本分类
- 在前端开发中，script 标签用于加载和执行 JavaScript 代码，根据加载和执行方式的不同，script 标签可以分为同步脚本、异步脚本（async）和延迟脚本（defer）
- 同步脚本：当浏览器解析到 script 标签时，会立即停止 HTML 文档的解析，加载并执行脚本文件，脚本执行完毕后才会继续解析HTML文档
- 特点：
阻塞HTML解析、多个脚本顺序执行
<script src="script1.js"></script>
<script src="script2.js"></script>
- 异步脚本（async）：使用 async 属性的脚本会在下载完成后立即执行，执行时会阻塞 HTML 解析，异步脚本的下载与 HTML 解析并行进行，但执行时会暂停 HTML 解析
- 特点：
并行加载、多个脚本执行顺序不确定
<script async src="script1.js"></script>
<script async src="script2.js"></script>
- 延迟脚本（defer）：使用 defer 属性的脚本会在HTML文档解析完成后，按照它们在文档中出现的顺序依次执行
- 特点：
并行加载、多个脚本顺序执行
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
3、CSS 对 DCL 的影响
-
CSS 不会直接阻塞 DOM 解析，但它可能会间接影响 JavaScript 执行，从而对 DCL 的触发时间产生一定的影响
-
例如，如果页面中存在依赖于 CSSOM 的 JavaScript 代码（例如，通过
document.styleSheets访问样式表），浏览器会等待 CSS 文件加载完成后再执行这些脚本，如果这些脚本是同步加载的，会延迟 DCL 的触发