Analysis on the loading and loading order of CSS

This article is very suitable for the basic and small partners, this article mainly introduces the loading and loading order of CSS and the problem thinking analysis, the article also gives you the introduction of the HTML,CSS,JS three load order problems, need to refer to the friend, hope to help everyone.

The usual CSS loading order

In general, our CSS style sheets are placed on the head, and in order to reduce requests, we usually do a merge compression on the CSS. Currently our CSS is generally loaded as follows:

This is possible, but there are several performance issues that we can continue to optimize:

Problem:

All of the CSS is merged into a file that is loaded on the page header. Perhaps the first screen we just use a little bit of CSS, but in the head loaded with all the CSS, causing the unreasonable load and waste of resources. If the CSS is very large, seriously affect the page loading speed and the first screen display speed.

A different idea.

If not merged, a single CSS compression reference, the file size is small, but the number of requests more. Weigh the two, and compare the performance test, found that the following is true than all of our CSS placed in the head one-time loading, the first screen display speed is faster:


But there is a place where performance can be optimized!

For example:

Our first screen only shows the head and the article, the other module does not display the first screen. Well, the CSS of the other modules we can load completely asynchronously. How does it load asynchronously?

Take a look below

Loadcss and preload

About preload, advance 2 articles for everyone to see:

1. Pre-load content by rel= "preload": https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content

2, Preload's W3 document: https://www.w3.org/TR/preload/

For some CSS that isn't loaded on the first screen, we can do the following:

<link rel= "preload" href= "path/to/haorooms.css" as= "style" onload= "this.rel= ' stylesheet '" >
Prevent the browser from prohibiting JS, for insurance purposes, can also be as follows:

<link rel= "preload" href= "path/to/haorooms.css" as= "style" onload= "this.rel= ' stylesheet '" ><noscript> <link rel= "stylesheet" href= "Path/to/haorooms.css" ></noscript>
To avoid some browsers calling handlers rel= ' stylesheet ' This property, we generally recommend the following notation:

<link rel= "preload" href= "path/to/haorooms.css" as= "style" onload= "this.onload=null;this.rel= ' stylesheet '" > <noscript><link rel= "stylesheet" href= "Path/to/haorooms.css" ></noscript>
For better compatibility with rel=preload, you can use LOADCSS, github address: Https://github.com/filamentgroup/loadCSS

So, without regard to browser compatibility issues (consider compatibility issues, you can use LOADCSS, not many demos here), we re-optimized the above code:


PS: Take a look at the loading order of the three Html,css,js


This feature is why it is necessary to start with a $ (document) in the JS file. Ready (function () {}) or (function () {}) or window.onload, which is to have the DOM document loading complete before the JS file is executed, This does not appear to find the DOM node and other issues;

JS blocks the loading of other resources due to: the browser in order to prevent JS modification of the DOM tree, the need to reconstruct the DOM tree, the case arises;

3. Solution

Premise, JS is an external script;

Adding defer= "ture" to the script tag will allow JS to load in parallel with the DOM, and then execute the JS file after the page is loaded, so there is no blocking;

Add async= "Ture" in the scirpt tag, this property tells the browser that the JS file is executed asynchronously, that is, does not depend on other JS and CSS, that is, there is no guarantee the JS file loading order, but also with the DOM parallel loading effect;

The defer property is invalidated when using both the defer and async properties;

You can place the scirpt tag after the body tag so that there is no load conflict.