search
HomeWeb Front-endCSS TutorialA 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:

  <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&#39;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!

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
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

DVWA

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

SecLists

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.

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.