Difference between revisions of "How do browsers load stylesheets?"

Latest revision as of 18:24, 18 May 2018

Most web pages contain Cascading Style Sheets (CSS) which are loaded in parallel.

Aside from the amount of time it takes for your web server to deliver the HTML page itself, the time it takes for the page to fully load is heavily dependent on these external resources.

Retrieving CSS

Most Web browsers load CSS files and Images in parallel, meaning if your web page looks like this:

<html>
<head><title>Example page</title>
<link rel="stylesheet" href="css0.css" media="all />
<link rel="stylesheet" href="css1.css" media="all />
<link rel="stylesheet" href="css2.css" media="all />
</head>
<body>
<p>Our style sheets affect how text is shown on this page</p>
<img src="image0.png" />
<img src="image1.png" />
<img src="image2.png" />
</body>
</html>

Then the browser will attempt to retrieve css0.css, css1.css, and css2.css at the same time. Similarly, image0.png, image1.png and image2.png will be loaded at the same time. (Three requests to the web server within the same time frame.)

Some browsers will limit the number of remote requests they make to a web server; so if you have a page which contains 20 stylesheets, the browser will only request (for example) 5 at a time. Once an stylesheet is loaded, it then requests another (until 5 are being requested simultaneously) until all stylesheets have been loaded.

Browsers which load CSS serially

Using this test:

http://test.marketruler.com/js/css-load.php

... which loads 16 stylesheets, each of which takes 2 seconds to load, and then records how long the entire process takes. If the total time takes more than 2 seconds times 16 CSS sheets, the assumption is that the browser loads CSS in serial.

The following browsers tested load CSS serially:

AOL 9.1
Camino 1.5
Explorer 5.2 (Macintosh OS X)
FireFox 1.5, 2
Mozilla 1.6, 1.7
Netscape 6.2, 7.2. 9
Opera 10

Interestingly, Opera 9 loads CSS in parallel, but Opera 10 does not.

Most modern browsers load CSS in parallel:

FireFox 3+
Internet Explorer 6+
Chrome (all versions)
Safari (all versions)

@@ Line 52: / Line 52: @@
 == See also ==
 * [[How does JavaScript run on a web page?]]
+* [[DOM]]
 [[Category:ConversionRuler FAQ]]
 [[Category:FAQ]]