javascript - 为什么在 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 门票和错误有一个兔子洞，所以您可能有探索以获得全貌。