性能文章>关键渲染路径及度量>

关键渲染路径及度量转载

2月前
160700

优化关键渲染路径是指优先显示与当前用户操作有关的内容。

要提供快速的网络体验,浏览器需要做许多工作。这类工作大多数是我们这些网络开发者看不到的: 我们编写标记,屏幕上就会显示出漂亮的页面。

但浏览器到底是如何使用我们的 HTML、CSS 和 JavaScript 在屏幕上渲染像素的呢?

从收到 HTML、CSS 和 JavaScript 字节到对其进行必需的处理,从而将它们转变成渲染的像素这一过程中有一些中间步骤,优化性能其实就是了解这些步骤中发生了什么 - 即关键渲染路径

渐进式页面渲染

通过优化关键渲染路径,我们可以显著缩短首次渲染页面的时间。 此外,了解关键渲染路径还可以为构建高性能交互式应用打下基础。

处理交互式更新的过程是相同的,只是在连续循环中完成,理想情况下每秒可以处理 60 帧!

作为每个可靠性能策略的基础,准确的评估和检测必不可少。 无法评估就谈不上优化。本文说明了评估 CRP 性能的不同方法。

  • Lighthouse 方法会对页面运行一系列自动化测试,然后生成关于页面的 CRP 性能的报告。 这一方法对您的浏览器中加载的特定页面的 CRP 性能提供了快速且简单的高级概览,让您可以快速地测试、循环访问和提高其性能。
  • Navigation Timing API 方法会捕获真实用户监控 (RUM) 指标。如名称所示,这些指标捕获自真实用户与网站的互动,并为真实的 CRP 性能(您的用户在各种设备和网络状况下的体验)提供了准确的信息。

通常情况下,最好利用 Lighthouse 发现明显的 CRP 优化机会,然后使用 Navigation Timing API 设置您的代码,以便监控应用在实际使用过程中的性能。

Lighthouse 中看到页面的 CRP 结果将如以下屏幕截图所示。

Lighthouse 的 CRP 审核

结合使用 Navigation Timing API 和页面加载时发出的其他浏览器事件,您可以捕获并记录任何页面的真实 CRP 性能。

Navigation Timing

上图中的每一个标签都对应着浏览器为其加载的每个网页追踪的细粒度时间戳。实际上,在这个具体例子中,我们展示的只是各种不同时间戳的一部分。我们暂且跳过所有与网络有关的时间戳,但在后面的课程中还会做详细介绍。

那么,这些时间戳有什么含义呢?

  • domLoading: 这是整个过程的起始时间戳,浏览器即将开始解析第一批收到的 HTML 文档字节。
  • domInteractive: 表示浏览器完成对所有 HTML 的解析并且 DOM 构建完成的时间点。
  • domContentLoaded: 表示 DOM 准备就绪并且没有样式表阻止 JavaScript 执行的时间点,这意味着现在我们可以构建渲染树了。
    • 许多 JavaScript 框架都会等待此事件发生后,才开始执行它们自己的逻辑。因此,浏览器会捕获 EventStartEventEnd 时间戳,让我们能够追踪执行所花费的时间。
  • domComplete: 顾名思义,所有处理完成,并且网页上的所有资源(图像等)都已下载完毕,也就是说,加载转环已停止旋转。
  • loadEvent: 作为每个网页加载的最后一步,浏览器会触发 on load 事件,以便触发额外的应用逻辑。

HTML 规范中规定了每个事件的具体条件: 应在何时触发、应满足什么条件等等。对我们而言,我们将重点放在与关键渲染路径有关的几个关键里程碑上:

  • domInteractive 表示 DOM 准备就绪的时间点。
  • domContentLoaded 一般表示 DOM 和 CSSOM 均准备就绪的时间点。
    • 如果没有阻塞解析器的 JavaScript,则 DOMContentLoaded 将在 domInteractive 后立即触发。
  • domComplete 表示网页及其所有子资源都准备就绪的时间点。
 
 
<!DOCTYPE html>
<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 on load="measureCRP()">
   
<p>Hello <span>web performance</span> students!</p>
   
<div><img src="awesome-photo.jpg"></div>
 
</body>
</html>

试一下

上面的例子乍一看可能有点晕,但实际上的确相当简单。Navigation Timing API 捕获所有相关时间戳,而我们的代码只是等待 on load 事件触发 - 回想一下,on load 事件在domInteractivedomContentLoadeddomComplete 之后触发 - 然后计算各个时间戳之间的间隔。

完成了所有该做的工作,我们现在知道了需要追踪哪些具体的里程碑,以及用于输出这些评估的简单功能。请注意,除了将这些评估结果显示在网页上,您还可以修改代码,将这些评估结果发送到分析服务器上(Google Analytics(分析)会自动完成这项工作),这是一种监控网页性能的好方法,可以借此找出哪些网页还需要作出进一步优化。

尽管本文档使用 Chrome DevTools 的 Network 面板说明 CRP 概念,DevTools 当前并不非常适合 CRP 评估,因为它没有隔离关键资源的内置机制。运行 Lighthouse 审核来帮助识别此类资源。

请先登录,再评论

暂无回复,快来写下第一个回复吧~

为你推荐

一次 Node.js http 连接无法复用的问题排查
一次压测中阿里云 SLB 的并发连接数被打满了,导致服务之间的 HTTP 调用延迟很大。当时 SLB 的并发连接数情况如下图所示。登录容器终端查看,发现某个前端 Node.js 服务中的单个容器的 E
webpack5优化实战
本文围绕webpack优化进行讲述,其中也会作某些原理性地解释,尽量做到让大家知道为什么这么做,以及这么做的结果是什么。
前端性能基础:健康网站的关键指标有哪些?
概览 #Web 指标是 Google 开创的一项新计划,旨在为网络质量信号提供统一指导,这些信号对于提供出色的网络用户体验至关重要。多年来,Google 提供了许多性能测量和性能报告工具。一些开发者对这些工具的使用十分在行,而另一些开发者则发现大量的工具和指标令人应接不暇。网站所有者要想了解他
Lighthouse 如何计算网站的整体性能得分?
从为什么分数会波动,它是如何组成的,以及 Lighthouse 如何对每个单独的指标进行评分三部分来介绍lighthouse。
核心web指标对业务的影响
您是否正在努力说服您的利益相关者采用核心 Web 指标? 或者您想知道它是否真的对您的业务有帮助? 本文将通过探索已经对其用户和业务产生积极影响的公司示例,帮助您了解核心 Web 指标如何与关键业务指标相关联。为什么核心 Web 指标对您的用户和业务很重要?组织中的不同利益相关者可以有不同的优先
关键渲染路径及度量
优化关键渲染路径是指优先显示与当前用户操作有关的内容。要提供快速的网络体验,浏览器需要做许多工作。这类工作大多数是我们这些网络开发者看不到的: 我们编写标记,屏幕上就会显示出漂亮的页面。但浏览器到底是如何使用我们的 HTML、CSS 和 JavaScript 在屏幕上渲染像素的呢?从收到 HT