为什么在 HTML 开始下载之前发生第一次绘制？

Question

我正在使用 Navigation Timing API 收集数据。

具体来说，这四个指标：

// Time spent during redirection
var redirectTime = performance.timing.redirectEnd - performance.timing.redirectStart;

// DNS query time
var lookupDomainTime = performance.timing.domainLookupEnd - performance.timing.domainLookupStart;

// TCP connection time
var connectTime = performance.timing.connectEnd - performance.timing.connectStart;

// Time to first paint, in milliseconds.
var firstPaintTime = window.chrome.loadTimes().firstPaintTime * 1000 - performance.timing.navigationStart;

我经常发现 redirectTime + lookupDomainTime + connectTime > firstPaintTime。如果 Chrome 的第一次绘制指标是从 navigationStart 计算的，那么这意味着第一次绘制发生在 任何 HTML 下载之前 。这似乎是不可能的。

如果 firstPaintTime 不是从 window.performance.timing.navigationStart 计算的，它是从什么时候计算的？

Answer 1

这样做是为了让最后一个 page/tab 的主题颜色或背景颜色保持不变，直到新页面找出它需要的颜色。

这可以防止从深色页面到深色页面的白色闪烁。

您可以在此处详细了解去年对初始油漆的更改： https://bugs.chromium.org/p/chromium/issues/detail?id=470669 有很多票和错误，因此您可能需要探索才能获得完整的图片。