|July 11th, 2013|
|ideas, tech [html]|
Won't that mean painting ugly unstyled content? Yes it will, but that's better than making the user wait forever on a blank screen. For example, on an example page, it would look like this:
(Try your browser here)
Displaying only the html isn't a new thing: text-based browsers have done this for years and there's already one for Android. But the user shouldn't have to think "this page might be slow because I have a bad internet connection and it's really big so let's open it in a text-only browser". Instead regular browsers should just paint what they've already downloaded if they've been keeping the user waiting too long.
Update 2013-07-11: Instead of a pure timeout, it might be better to display a button like "unstyled text available now, click here to load" that would force an early paint. You would still want a timeout of a few seconds so that you don't display this button when someone would get the whole page if they were just a little more patient.
 What your browser does to download a simple web page:
- Use DNS to look up the IP of your site:
Browser: What is www.jefftk.com? DNS Server: www.jefftk.com is 22.214.171.124
- Open a TCP connection to the site.
Browser: SYN Web Server: SYN-ACK Browser: ACK
- Download the HTML
Browser: GET / HTTP/1.1 Host: www.jefftk.com Web Server: Server: nginx/1.4.1 Date: Thu, 11 Jul 2013 11:27:07 GMT Content-Type: text/html ... <link rel=stylesheet href=main.css> <script src=scriptes/main.js< ... about a month ago I <a href="news/2013-06-05"> got some citric acid</a>. Since then I've tried putting it on and in various things. Chocolate was strange, Strawberries were good, but my favorite has definitely been watermelon: <p> <img src="/citric-acid-watermelon.jpg"> ...
- The browser could paint here (or continuously as it downloads the html) but doesn't, to avoid a flash of unstyled content.
- Download the referenced resources that
go are required for
displaying the page:
Browser: GET /main.css HTTP/1.1 Host: www.jefftk.com Web Server: [contents of main.css] Browser: GET /scripts/main.js HTTP/1.1 Host: www.jefftk.com Web Server: [contents of /scripts/main.js]
- Display the page in its initial state (first paint!)
- Download lower priority resources:
Browser: GET /citric-acid-watermelon.jpg HTTP/1.1 Host: www.jefftk.com Web Server: [contents of /citric-acid-watermelon.jpg]
- Display the page in its final state. There could be multiple paints during the previous step.