current position:Home>Basics are often 5: what is the best writing order for CSS style sheet attributes?
Basics are often 5: what is the best writing order for CSS style sheet attributes?
2021-08-27 10:07:09 【A small brick】
This is my participation 8 The fourth of the yuegengwen challenge 6 God , Check out the activity details :8 Yuegengwen challenge Already more Wen 6 God
( Basic knowledge is often 5:CSS What is the best writing order for style sheet attributes ?) I'm writing demo You don't have to consider code optimization , If you can test the effect , But in practice , In enterprise work , Performance must be improved , Optimize the code , Let customers have a high experience , So I inquired about the relevant information on the Internet ,
(1) Location attribute :position、display、float、left、top、right、bottom、overflow、clear、z-index
(2) Self attribute :width、height、padding、border、margin、background
(3) Writing style :font-family、font-size、font-style、font-weight、font-varient color
(4) Text attribute :text-align、vertical-align、text-wrap、text-transform、text-indent、text-decoration、letter-spacing、word-spacing、white-space、text-overflow
(5)css3 New attribute in :content、box-shadow、border-radius、transform
Copy code
So far , We already know the writing order , But why on earth do you write like this ? In a word : Its purpose is to Reduce browser reflow( backflow ), thus Promote browser rendering dom Performance of . Another specific analysis is : ① analysis html structure dom Trees , analysis css structure css Trees : take html Data structure parsed into tree , take css Data structure parsed into tree
② structure render Trees :DOM Trees and CSS Formed after tree merging render Trees .
③ Layout render Trees : With render Trees , The browser already knows which nodes are in those pages , Of each node css Define and and their dependencies , Then the position of each node in the screen is calculated .
④ draw render Trees : According to the calculated rules , Draw the content on the screen through the video card .
css The style resolution to the display to browser screen occurs at ②③④ step , It can be seen that the browser is not the first to obtain css The style starts to parse immediately, but according to the css The writing order of the style is as follows dom Structure distribution of trees render style , Completion of ② Step , Then start to traverse the css Style for parsing , At this time css The traversal order of styles is exactly the same as the previous writing order .
During parsing , Once the browser finds out that the positioning of an element changes, it will affect the layout , You need to go back and re render it, as in the order of writing a book :
width: 100px;
height: 100px;
background-color: red ;
position: absolute;
Copy code
When the browser resolves to position It is suddenly found that the element is an absolute positioning element, which needs to be separated from the document flow , But before, it was parsed according to common elements , So I had to re render , Remove this element from the document , However, due to the change of the occupation of this element , Other elements may also be rearranged by its reflow . Eventually lead to ③ Steps take too long to affect ④ Display of steps , Impact on the user experience .
therefore , Irregular attribute writing order will make the browser reflow many times during rendering , Did a lot “ No hard work ”, A reasonable style sheet can get twice the result with half the effort .
Maybe the above paragraph will be very boring for many beginners , It doesn't matter , The principle is of higher order , We just need to remember Style attributes can be in the following order
Welcome to comment
copyright notice
author[A small brick],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827100705751h.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich