A brief analysis of CSS loading and loading order
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'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='stylesheet'">
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='stylesheet'">
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='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
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='stylesheet'"> </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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
How to view the date of bootstrap
Apr 07, 2025 pm 03:03 PM
Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
