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:
<link> …content…
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:
<!-- HTTP/2 push this resource, or inline it, whichever's faster --> <link> <header>…</header> <link> <main>…</main> <link> <section>…</section> <link> <section>…</section> <link> <footer>…</footer>
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>
To prevent the browser from banning js, to be on the safe side, we can also write it as follows:
<link>
In order to avoid that some browsers will re-call the handler rel='stylesheet' attribute, we generally recommend the following writing method:
<link>
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:
<link> <link>… … … …
PS: Let’s take a look at the loading order of html, css and js
<link> <script></script>
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!

In this post, Blackle Mori shows you a few of the hacks found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.

Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.

Interactive CSS animations with elements ricocheting off each other seem more plausible in 2025. While it’s unnecessary to implement Pong in CSS, the increasing flexibility and power of CSS reinforce Lee's suspicion that one day it will be a

Tips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.

Well, it turns out that SVG's built-in animation features were never deprecated as planned. Sure, CSS and JavaScript are more than capable of carrying the load, but it's good to know that SMIL is not dead in the water as previously

Yay, let's jump for text-wrap: pretty landing in Safari Technology Preview! But beware that it's different from how it works in Chromium browsers.

This CSS-Tricks update highlights significant progress in the Almanac, recent podcast appearances, a new CSS counters guide, and the addition of several new authors contributing valuable content.

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obvio


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

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Atom editor mac version download
The most popular open source editor

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Dreamweaver CS6
Visual web development tools

SublimeText3 Chinese version
Chinese version, very easy to use

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
