您的位置：首页 > 其它

计算渲染关键过程所花费的时间

2016-05-04 07:47 591 查看

你不可以优化你不能测量的事情。但是Navegation Timing API可以让我们测量关键的渲染过程时间！

Navigation Timing 为计算CRP提供了高精度的时间戳

浏览器发送了一系列可测量的时间来捕捉CRP的各种状态

Navigation Timing API 提供了良好的测量：

上表中的每个标签对应了一个高精度的时间戳，浏览器在每个网页加载的时候进行监测。我们去除一切和网络相关的时间戳，只展示一小部分：

domLoading

: 这是整个过程中开始时的时间戳，浏览器第一次收到HTML文档的字节开始解析时的时间戳。

domInteractive

: 当浏览器完成了所有的HTML解析且DOM构造完成时的时间戳。

domContentLoaded

: 当DOM完毕且没有css样式阻止js的执行——意味着我们现在可以构造render tree——的时间戳。

许多js框架当它们开始执行它们自己的逻辑之前等待这个事件——因为浏览器捕捉EventStart和EventEnd时间戳来允许我们追踪这个事件执行多久。

domComplete

: 和名字暗示的一样，页面上所有的资源（例如图片等）下载完成和页面上所有的操作都完

loadEvent

: 当每个页面上最后一步加载浏览器的时候出发onload事件的时候会触发额外的应用逻辑

domInteractive

标记DOM完成

domContentLoaded

标记DOM和CSSOM的完成

如果这里没有js阻塞的话domInteractive之后会马上是DOMContentLoaded

domComplete

标记当页面以及所有的资源都完成时候

<html>
<head>
<title>Critical Path: Measure</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<script>
function measureCRP() {
var t = window.performance.timing,
interactive = t.domInteractive - t.domLoading,
dcl = t.domContentLoadedEventStart - t.domLoading,
complete = t.domComplete - t.domLoading;
var stats = document.createElement('p');
stats.textContent = 'interactive: ' + interactive + 'ms, ' +
'dcl: ' + dcl + 'ms, complete: ' + complete + 'ms';
document.body.appendChild(stats);
}
</script>
</head>
<body onload="measureCRP()">
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>

上面的代码是：Navigation Timing API捕捉了所有的相关时间戳且我们的代码等待onload事件的触发——记得onload事件在domInteractive,domContentLoaded和domComplete之后触发——且计算每个时间戳的不同。

就像我们所说和所做的儿一样，我么可使用一个函数简单的追踪测量所有这些过程。

你同样可以在你的代码中嵌入分析服务商(Google Analytics does this automatically)的代码。

原文链接：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp?hl=en

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航