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!

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

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

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

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

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

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

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


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

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

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 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 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
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.
