前端性能优化指标 - 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解析多个脚本顺序执行
html 复制代码
<script src="script1.js"></script>
<script src="script2.js"></script>
  1. 异步脚本(async):使用 async 属性的脚本会在下载完成后立即执行,执行时会阻塞 HTML 解析,异步脚本的下载与 HTML 解析并行进行,但执行时会暂停 HTML 解析
  • 特点:并行加载多个脚本执行顺序不确定
html 复制代码
<script async src="script1.js"></script>
<script async src="script2.js"></script>
  1. 延迟脚本(defer):使用 defer 属性的脚本会在HTML文档解析完成后,按照它们在文档中出现的顺序依次执行
  • 特点:并行加载多个脚本顺序执行
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 的触发

相关推荐
嘉琪001几秒前
实现视频实时马赛克
linux·前端·javascript
烛阴27 分钟前
Smoothstep
前端·webgl
十盒半价34 分钟前
React 性能优化秘籍:从渲染顺序到组件粒度
react.js·性能优化·trae
DebugKitty37 分钟前
C语言14-指针4-二维数组传参、指针数组传参、viod*指针
c语言·开发语言·算法·指针传参·void指针·数组指针传参
若梦plus1 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员1 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉1 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
Bio Coder1 小时前
R语言中 read.table 和 read.delim 之间的区别
开发语言·r语言
若梦plus1 小时前
Webpack中微内核&插件化思想的应用
前端·webpack
若梦plus1 小时前
微内核&插件化设计思想
前端