Home > Article > Web Front-end > A brief analysis of CSS loading and loading order

A brief analysis of CSS loading and loading order

小云云Original: 2017-12-26 09:20:032287browse

This article is very suitable for basic students and friends. This article mainly introduces the loading and loading order of CSS and the analysis of the problems encountered. The article also gives you a supplementary introduction to the loading order of html, css and js. , friends in need can refer to it, I hope it can help everyone.

Usual css loading order

Under normal circumstances, our css style sheet is placed at the head. At the same time, in order to reduce requests, we usually merge and compress the css. At present, our css is generally loaded as follows:

<head>
  <link rel="stylesheet" href="/all-of-my-styles.css">
</head>
<body>
  …content…
</body>

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

Problem:

All css are merged Compress it into a file and load it at the head of the page. Maybe we only use a little bit of css on the first screen, but load all the css in the header, resulting in unreasonable loading and waste of resources. If the css is very large, it will seriously affect the web page loading speed and the first screen display speed.

Change your thinking

If you do not merge and use a single CSS compression reference, the file size will be smaller, but the number of requests will be larger. After weighing the two and conducting performance tests and comparisons, we found that the following writing method is indeed faster than loading all our css in the head at once and displaying the first screen faster:

<head>
</head>
<body>
  <!-- HTTP/2 push this resource, or inline it, whichever&#39;s faster -->
  <link rel="stylesheet" href="/site-header.css">
  <header>…</header>
  <link rel="stylesheet" href="/article.css">
  <main>…</main>
  <link rel="stylesheet" href="/comment.css">
  <section class="comments">…</section>
  <link rel="stylesheet" href="/about-me.css">
  <section class="about-me">…</section>
  <link rel="stylesheet" href="/site-footer.css">
  <footer>…</footer>
</body>

But there are still areas where performance can be optimized!

For example:

Only the header and articles are displayed on the first screen, and other modules are not displayed on the first screen. Then, we can load the css of other modules completely asynchronously. How to load asynchronously?

Please see below

loadCSS and Preload

Regarding preload, I will post 2 articles for you to read:

1. Pass rel="preload" Content preloading: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content

2. Preload w3 documentation: https://www.w3.org/TR /preload/

For some css that are not loaded on the first screen, we can write it as follows:

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel=&#39;stylesheet&#39;">

To prevent the browser from banning js, to be on the safe side, we can also write it as follows:

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel=&#39;stylesheet&#39;">

In order to avoid that some browsers will re-call the handler rel='stylesheet' attribute, we generally recommend the following writing method:

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.onload=null;this.rel=&#39;stylesheet&#39;">
<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

Therefore, without considering browser compatibility issues (considering compatibility issues, you can use loadCss, no more demonstration here), we optimize the above code again:

<head>
  <link rel="stylesheet" href="/首屏加载css.css">
  <link rel="preload" href="/不是首屏加载的css.css" as="style" onload="this.onload=null;this.rel=&#39;stylesheet&#39;">
</head>
<body>
  <header>…</header>
  <main>…</main>
  <section class="comments">…</section>
  <section class="about-me">…</section>
  <footer>…</footer>
</body>

PS: Let’s take a look at the loading order of html, css and js

<head lang="en">
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/*.css">
    <script src="js/*.js></script>
</head>

The loading order of DOM documents is from top to bottom;

1 , DOM is loaded into the link tag

The loading of the css file is parallel to the loading of the DOM. That is to say, the Dom continues to load and build when the css is loaded, and the css style or img encountered in the process, A request will be sent to the server, and after the resource is returned, it will be added to the corresponding location in the dom;

2. The DOM is loaded into the script tag

Since the js file will not match the The DOM is loaded in parallel, so you need to wait for the entire js file to be loaded before you can continue loading the DOM. If the js script file is too large, it may cause the browser page to lag behind in display and appear in a "suspended death" state. This effect is called the "blocking effect" ”; will lead to a very bad user experience;

And this feature is also why $(document).ready(function(){}) or (function(){}) is needed at the beginning of the js file Or window.onload, which means to execute the js file only after the DOM document is loaded, so that there will be no problems such as not being able to find the DOM node;

The reason why js blocks the loading of other resources is: the browser Prevent js from modifying the DOM tree and need to rebuild the DOM tree;

3. Solution

Premise, js is an external script;

Add defer in the script tag = "ture", the js and DOM will be loaded in parallel, and the js file will be executed after the page is loaded. In this way, there will be no blocking;

Add async="ture" in the scirpt tag, this attribute tells The js file of the browser is loaded and executed asynchronously, that is, it does not depend on other js and css, which means that the loading order of the js files cannot be guaranteed, but it also has the effect of loading in parallel with the DOM;

Use at the same time When defer and async attributes are used, the defer attribute will be invalid;

You can put the scirpt tag after the body tag so that there will be no loading conflicts.

Related recommendations:

html, css and js file loading sequence and execution

Page loading sequence problem_html /css_WEB-ITnose

Detailed introduction to the execution results of the loading order of classes in Java

The above is the detailed content of A brief analysis of CSS loading and loading order. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of CSS weird box model and standard box model examplesNext article：Detailed explanation of CSS weird box model and standard box model examples

See more

A brief analysis of CSS loading and loading order

Related articles