4 ms·
> A big one we’re seeing here is called progressive rendering: browsers download the top part of the page first, then show it on the screen while the rest of th
by yazboo 7y ago
> A big one we’re seeing here is called progressive rendering: browsers download the top part of the page first, then show it on the screen while the rest of the page finishes downloading
I question your reasoning here -- I don't think this is how progressive rendering works in browsers. The browser has to download the entire document to construct the DOM, and CSS in the head tag all has to be downloaded and parsed into the CSSOM before the browser can make smart decisions about what to render.
For a simple page, I also doubt that progressive rendering could account for a >1s difference in rendering time. I would suspect the disparity in loading time is related to network IO.
- csande17 7y ago> The browser has to download the entire document to construct the DOM Actually, the browser can construct the DOM for the first part of the page while it's waiting for the rest of it to download. Like, if the browser starts downloading a page and it sees this: <body> <h1>My Cool Website</h1> <p>Hello there ...it can add the <h1> element to the DOM, since no matter what comes after this in the HTML code, the <h1> will always be first on the page. (It might actually be able to add the <p> tag, too. I'm not 100% on the details.) A cool demo of this is https://harmless.herokuapp.com/main https://harmless.herokuapp.com/main , a JavaScript-less chat app that works by holding the connection open (essentially never "finishing the page load") and sending new chat messages as they arrive. > CSS in the head tag all has to be downloaded and parsed into the CSSOM before the browser can make smart decisions about what to render. That's true, but in this case, the CSS is already present in the browser cache, so it doesn't need to be re-downloaded.