Today’s article will talk about how browsers treat downloaded resources, such as JS, CSS, fonts, images, etc.

CSS, JS file enemies narrow

As I’m sure you all know, HTML parsing can get stuck in a synchronized script.

<! DOCTYPEhtml>
<html lang="en">
<body>
    <script>console.log(1)</script>
    <div>1</div>
</body>
</html>
Copy the code

In the above code, the HTML encounters and the code stops DOM parsing. Instead of stopping and doing nothing, a preload scanner scans the underlying files and prioritizes them based on their type.

The example above is inline code, if it is a JS file, then the code will be executed after the JS file is finished.

But generally we don’t have a monolithic file structure, and CSS files certainly do exist. Because JS can not only move the DOM but also change the style, the browser will have to wait for the CSS file to finish executing JS if there is another one before script.

So it’s not just JS that blocks DOM parsing, it’s CSS as well.

Of course, I don’t think many people write synchronous scripts any more.

The files are encountered at the same time. Do you start downloading at the same time?

For example, if browsers parse img, font, and background-image resources in HTML and CSS files, they can download multiple files at the same time.

The answer is no!

Img will be the first to download, and the other two will be downloaded after Layout. If you don’t believe me, here’s the picture:

Take font as an example

The font file is displayed in the lower right corner of the figure, and the CSS file is displayed above. The font should be loaded from the CSS file.

You can see that CSS files start to download and parse early, but font files do not start to download until FP indicator is about to appear, this time point is after layout is completed.

This is nuggets as an example, you can try other sites, you should find it is in line with expectations.

If you can download a background-image file from img, you can download it from img. This is true, but in the case of scoring, if the image appears in a position other than the first screen, there is no problem with background-image. Of course, lazy loading for IMG can also solve the problem.

So what is the priority of the file?

If you’ve ever used Performance to test your website, you can hover downloaded resources in the Network column and see the resource’s priority displayed.

From the figure, you can find that CSS and font resources have the highest priority, JS files have high or low priority (it depends on the type), images and SVG have low priority.

The priority of this section refers to the priority at a point in time, not to the entire cycle. For CSS file priority is the highest or quite well understood, after all, JS files rely on CSS files, more detailed content you can refer to the Chrome source to see how the browser load resources in the “3. Resource priority” content.

Network protocols are the biggest culprits

For browsers to download resources, TCP must be used, but TCP is inherently slow.

First have to shake hands, and then slow start algorithm, and we use thunder download things, bandwidth is very useless, speed is to climb up. If you add HTTPS, you’ll need more TLS handshakes.

And then back to the HTTP1.1 protocol. Chrome only supports up to six simultaneous requests in the same domain, so in previous protocols a stack of requests would have to be blocked until the previous download was complete.

Of course, HTTP2 is different now, the concept of basic people know, have not seen the pig but eat pork, for this knowledge of a few words no problem. Multiplexing, header merging, binary frames.

Thanks to the multiplexing in the HTTP2 protocol, we are no longer limited by the browser’s six concurrent requests. All requests in the same domain can run on the multiplexed six network channels, reducing the download time by several orders of magnitude.

How are they prioritized? Rely on? Bandwidth or something? After all, a bunch of resources occupy the same network channel, so it is necessary to coordinate who should download first and who can enjoy more bandwidth. Otherwise, if a bunch of images take up most of the bandwidth, and other CSS, JS files are slow, it will affect the performance of the entire web page.

For example, I now need to download CSS, JS, images and fonts. For example, in these files I want CSS files to be downloaded first and allocated more bandwidth; JS files can wait until the CSS file is finished; Other files have lower priority than CSS files, but can also enjoy bandwidth to download.

This requirement can be achieved through binary frames. The HTTP2 protocol has ten binary frames, in which you can assign a new PRIORITY through the HEADERS frame or change the PRIORITY through the PRIORITY frame.

Prioritization of streams can be adjusted in two ways:

  • When we adjust the stream dependencies, we can implement the JS file to wait until the CSS file has been downloaded
  • When we adjust the weight of the stream, we can allocate bandwidth so that certain resources can be downloaded more quickly

As you can see (ugly). The files in the first row are downloaded together, and the weight adds up to 20, so the CSS file gets half of the bandwidth, the others get a quarter each, and the JS file has to wait until the CSS is finished.

So how do you set these things up? Of course, the server side support, generally refers to the CDN service provider.

The last

The above is all content, we want to discuss can communicate together.