为什么在 HTML 开始下载之前首先绘制

Question

我正在使用导航计时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有一个门票和虫子的兔子洞，所以你可能不得不探索才能得到一个完整的画面。