Why is first paint happening before HTML starts downloading?

Question

I'm collecting data using the Navigation Timing API.

Specifically, these four metrics:

// 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;

I'm finding that on a regular basis redirectTime + lookupDomainTime + connectTime > firstPaintTime. If Chrome's first paint metric is calculated from navigationStart, then this means the first paint happens before any HTML has been downloaded. That seems impossible.

If firstPaintTime isn't calculated from window.performance.timing.navigationStart, from what point is it calculated?

Answer 1

This is done to allow the theme color or the background color of the last page/tab to stay around until the new page figures out the color it needs to be.

This prevents white flashes going from Dark page to Dark page.

You can read more about the changes last year to the initial paint here: https://bugs.chromium.org/p/chromium/issues/detail?id=470669 There is a rabbit hole of tickets and bugs, so you may have to explore to get a full picture.