为什么在 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

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

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

您可以在此处阅读有关去年初始涂装变化的更多信息： https://bugs.chromium.org/p/chromium/issues/detail?id=470669 有一个门票和漏洞的兔子洞，所以您可能需要探索才能获得完整的照片。