当前位置：首页 > article >正文

前端性能优化指标 - DCL - 计算 DCL 时间（使用 JavaScript、使用 Chrome DevTools）

article 2025/1/31 2:49:51

计算 DCL 时间

测试代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>dcl</title>

		<script>
			// 模拟一个耗时的 JavaScript 任务（阻塞 2 秒）
			const start = Date.now();
			while (Date.now() - start < 2000) {}
		</script>
	</head>

	<body>
		<p>测试 DCL</p>
	</body>
</html>

1、使用 JavaScript

使用 performance.timing 计算 DCL 时间

document.addEventListener("DOMContentLoaded", function () {
    const dclTime = performance.timing.domContentLoadedEventStart - performance.timing.navigationStart;
    console.log("DCL Time:", dclTime, "ms");
});

使用 PerformanceNavigationTiming 计算 DCL 时间

document.addEventListener("DOMContentLoaded", function () {
    const timing = performance.getEntriesByType("navigation")[0];
    if (timing && timing.domContentLoadedEventStart > 0) {
        const dclTime = timing.domContentLoadedEventStart - timing.startTime;
        console.log("DCL Time:", dclTime, "ms");
    } else {
        console.log("PerformanceNavigationTiming is not supported or values are invalid.");
    }
});

2、使用 Chrome DevTools

打开 Chrome DevTools（F12），切换到 Performance 面板

点击 Reload 按钮录制页面加载过程

在 Timings 部分查看 DCL 时间

学习补充

1、`performance.timing`

（1）基本介绍

performance.timing 是一个 PerformanceTiming 对象
PerformanceTiming 是 Navigation Timing API 的一部分
PerformanceTiming 用于提供页面加载过程中各个关键时间点的详细信息，用于帮助开发者分析和优化页面加载性能

（2）关键属性

属性	说明
navigationStart	页面导航开始的时间（通常是点击链接或输入 URL 的时间）
loadEventStart	load 事件开始的时间
loadEventEnd	load 事件结束的时间
domLoading	浏览器开始解析 HTML 文档的时间
domInteractive	浏览器完成 HTML 解析并构建 DOM 树的时间
domComplete	页面加载完成的时间（包括所有资源加载完成）
domContentLoadedEventStart	DOMContentLoaded 事件开始的时间
domContentLoadedEventEnd	DOMContentLoaded 事件结束的时间

（3）基本使用

计算页面加载总时间

注：这里不能将代码放直接放在 load 事件中，否则，performance.timing.loadEventEnd 的值可能为 0，因为 load 事件尚未完全完成

window.addEventListener("load", function () {
    setTimeout(function () {
        const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
        console.log("Page Load Time:", loadTime, "ms");
    }, 0);
});

计算 DOM 解析时间

window.addEventListener("load", function () {
    const domParseTime = performance.timing.domComplete - performance.timing.domLoading;
    console.log("DOM Parse Time:", domParseTime, "ms");
});

计算 DCL 时间

document.addEventListener("DOMContentLoaded", function () {
    const dclTime = performance.timing.domContentLoadedEventStart - performance.timing.navigationStart;
    console.log("DCL Time:", dclTime, "ms");
});

（4）`performance.timing` 的局限性

performance.timing 是旧版 Navigation Timing API 的一部分，在现代浏览器中已被 PerformanceNavigationTiming 取代
performance.timing 在大多数现代浏览器中仍然可用，但在未来的浏览器版本中可能会被移除
建议使用 PerformanceNavigationTiming 替代 performance.timing

2、PerformanceNavigationTiming

（1）基本介绍

PerformanceNavigationTiming 是现代浏览器中替代 performance.timing 的 API，它提供了更详细和准确的性能数据

（2）关键属性

属性	说明
startTime	导航开始的时间
domContentLoadedEventStart	DOMContentLoaded 事件开始的时间
domContentLoadedEventEnd	DOMContentLoaded 事件结束的时间
loadEventStart	load 事件开始的时间
loadEventEnd	load 事件结束的时间

（3）基本使用

计算页面加载总时间

注：这里不能将代码放直接放在 load 事件中，否则，timing.loadEventEnd 的值可能为 0，因为 load 事件尚未完全完成

window.addEventListener("load", function () {
    const timing = performance.getEntriesByType("navigation")[0];
    setTimeout(function () {
        const loadTime = timing.loadEventEnd - timing.startTime;
        console.log("Page Load Time:", loadTime, "ms");
    }, 0);
});

计算 DCL 时间

document.addEventListener("DOMContentLoaded", function () {
    const timing = performance.getEntriesByType("navigation")[0];
    if (timing && timing.domContentLoadedEventStart > 0) {
        const dclTime = timing.domContentLoadedEventStart - timing.startTime;
        console.log("DCL Time:", dclTime, "ms");
    } else {
        console.log("PerformanceNavigationTiming is not supported or values are invalid.");
    }
});