“第一次绘画的时间"与“第一次有意义的绘画" [英] 'time to first paint' vs 'First Meaningful Paint'

问题描述

SO 是否有 Web 性能部分?

Is there a Web Performance section of SO?

假设没有(我还没有找到)那么第一次绘制时间(https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool) 和 首次有意义的绘制(https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)?

Assuming not (I haven't found one) then what is the difference, if any, between time to first paint (https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool) and First Meaningful Paint (https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)?

推荐答案

有几个有趣的绘制时间.第一个是

There are a few interesting paint times. The first one is

• 首次绘制:在屏幕上绘制第一个像素的时间.例如页面的背景颜色.
• First Contentful Paint: DOM 中的第一个内容片段(即某些文本或图像)被绘制的时间.
• 首次有意义的绘制:浏览器绘制用户感兴趣的内容的时间.这在很大程度上取决于页面.

• First Paint: The time when the first pixel is painted onto the screen. For example a background color of the page.
• First Contentful Paint: The time when the first content piece from the DOM is painted, i.e. some text or an image.
• First Meaningful Paint: The time when the browser paints the content that users are interested in. This is highly depends on the page.

前两个实际上可以通过 Chromes 计时 API 进行跟踪，并在例如 Google Analytics 中报告.

The first two can actually be tracked by Chromes timing API and reported in Google Analytics for example.

目前无法通过浏览器 API 衡量第一次有意义的绘制 (FMP).测量 FMP 时的一般想法是定义英雄元素，即构成主要用户内容的元素，并测量它们的绘制时间.目前无法获取 DOM 中特定元素的绘制时间

The first meaningful paint (FMP) cannot be measured from browser APIs at the moment. The general idea when measuring the FMP would be to define Hero Elements, i.e. elements that make up the main user content, and measure their paint times. Currently there is no way to get the paint times of a specific element in the DOM

Lighthouse 或 WebPageTest 等工具通过在渲染时将最大的布局更改作为主要候选对象来估计 FMP.

Tools like Lighthouse or WebPageTest estimate the FMP by taking the biggest layout change when rendering as the primary candidate.

这篇关于“第一次绘画的时间"与“第一次有意义的绘画"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！