【转】css样式的书写顺序及原理——很重要!
记得刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一种方式。那么是怎么个顺序呢?
(1)定位属性:position display float left top right bottom overflow clear z-index
(2)自身属性:width height padding border margin background
(3)文字样式:font-family font-size font-style font-weight font-varient color
(4)文本属性:text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
(5)css3中新增属性:content box-shadow border-radius transform……
按照上述1 2 3 4 5的顺序进行书写。
目的:减少浏览器reflow(回流),提升浏览器渲染dom的性能
原理:浏览器的渲染流程为——
①解析html构建dom树,解析css构建css树:将html解析成树形的数据结构,将css解析成树形的数据结构
②构建render树:DOM树和CSS树合并之后形成的render树。
③布局render树:有了render树,浏览器已经知道那些网页中有哪些节点,各个节点的css定义和以及它们的从属关系,从而计算出每个节点在屏幕中的位置。
④绘制render树:按照计算出来的规则,通过显卡把内容画在屏幕上。
css样式解析到显示至浏览器屏幕上就发生在②③④步骤,可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式,完成第②步,然后开始遍历每个树结点的css样式进行解析,此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中,一旦浏览器发现某个元素的定位变化影响布局,则需要倒回去重新渲染正如按照这样的书写书序:
width: 100px;
height: 100px;
background-color: red ;
position: absolute;
当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离文档流,而之前却是按照普通元素进行解析的,所以不得不重新渲染,解除该元素在文档中所占位置,然而由于该元素的占位发生变化,其他元素也可能会受到它回流的影响而重新排位。最终导致③步骤花费的时间太久而影响到④步骤的显示,影响了用户体验。
所以规范的的css书写顺序对于文档渲染来说一定是事半功倍的!
扩展:还有一个会影响浏览器渲染性能的词汇“repaint(重绘)”
repaint(重绘):改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。
注意:
a.render树的结构不等同于DOM树的结构,一些设置display:none的节点不会被放在render树中,但会在dom树中。
b.有些情况,比如修改了元素的样式,浏览器并不会理科reflow或repaint,而是把这些操作积攒一批,然后做一次reflow,这也叫做异步reflow.但在有些情况下,比如改变窗口,改变页面默认的字体等,对于这些情况,浏览器会马上进行reflow.
c.为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。
此文部分是参考博客园
https://mp.weixin.qq.com/s?__biz=MzA3NTIwOTYxMw==&mid=2447522046&idx=1&sn=754ba20d30a93bb754013d59d001ef44&chksm=8b62961cbc151f0abb932aa218e00ddc512e0f9179e3e83b6f4af87ccd8dd6e679fa75b9aba8&mpshare=1&scene=23&srcid=0120TWyG73R2Ur6y1e2McZWc#rd
文章内容进行编写的。
---------------------
作者:QPQ_
来源:CSDN
原文:https://blog.csdn.net/qq_36060786/article/details/79311244
版权声明:本文为博主原创文章,转载请附上博文链接!
【转】css样式的书写顺序及原理——很重要!的更多相关文章
- css样式的书写顺序及原理——很重要!
记得刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一 ...
- css样式的书写顺序及原理
刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一种方 ...
- 面试准备 css 书写顺序及原理
书写顺序 (1)定位属性:position display float left top right bottom overflow clear z-index (2)自身属性: ...
- css样式加载顺序及覆盖顺序深入理解
注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...
- css样式加载顺序
css样式加载顺序: A: id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 B: 如果要让某个样式的优先级变高,可以使用!important来指定: .clas ...
- css样式的优先顺序
一.css样式的权重:!important(1000+) > 内联样式( 1000 ) > ID选择器(100 ) > 类选择器(10) > 标签选择器( 1 ) > ...
- 引用css样式的书写格式
css的书写格式一共有三种 行内样式:意思是在行内中写样式 例如说<p style="color:red">用行内样式编写我的颜色</p> 只适用于< ...
- CSS样式表书写位置
一.内嵌式写法:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type=”text/css”> 样式表写法 </style> < ...
- css样式,层叠顺序属性z-index
在做项目的时候,居然单击后显示的顺序一直被别的li标签压着,最后终于找到了,是css的z-index属性赋值了,值越大,显示的层就越高 详情推荐百度百科:z-index z-index是针对网页显示中 ...
随机推荐
- java日期比较工具类
package com.net.util; import java.text.DateFormat; import java.text.SimpleDateFormat; import java.ut ...
- 1.2异常处理和服务配置、aop、日志、自定义事件处理
一.异常处理 2.1.数据验证 现在假设说要进行表单信息提交,肯定需要有一个表单,而后这个表单要将数据提交到 VO 类中,所以现在的基本实现如下: 1. 建立一个 Member.java 的 VO 类 ...
- NIT校赛-- 雷顿女士与分队
题意:https://ac.nowcoder.com/acm/contest/2995/D 思路: 和最大子串很像,dp[i]=max(dp[i-1]+a[i],a[i]),要不和前面连一起,要不就是 ...
- python中int是什么类型
python中的基本数据类型 1:虽然python中的变量不需要声明,但使用时必须赋值整形变量浮点型变量字符型2:可以一个给多个变量赋值,也可以多个给多个变量赋值3:python3中有6个标准数据类型 ...
- opencv实现人脸识别(三) 训练图片模块
现在我们已经拍好了需要训练的图片,接下来就是进行训练 流程图: 我们在这里用到了numpy库,NumPy是一个功能强大的Python库,主要用于对多维数组执行计算. 使用numpy的目的是减少pyth ...
- redis集群搭建及一些问题
redis 1.简化版redis (本套Redis集群为简化版安装部署,只需解压至普通用户家目录下或者任意目录,解压后修改脚本,执行脚本后即可使用.) 注意,此版本需要在redis配置文件中添加 pr ...
- JS中json数组多字段排序方法(解决兼容性问题)(转)
前端对一个json数组进行排序,用户需要动态的根据自己的选择来对json数据进行排序. 由于后台表设计问题所以不能用sql进行排序,这里用到了js的sort方法. 如果对单字段排序,那么很简单,一个s ...
- 利用ant-design封装react的地址输入组件
在上一节利用element-ui封装地址输入的组件留下了个尾巴,说react搭配ant-design封装一下地址输入的组件的.本来应该早早就完成的,但是由于这中间发生了一些事情,导致了突发性的换了工作 ...
- 怎样获取从服务器返回的xml或html文档对象
使用 xhr.responseXML; 通过这个属性正常获取XML或HTML文档对象有两个前置条件: 1. Content-Type头信息的值等于: text/xml 或 application/x ...
- C#端口、IP正则
端口正则: string pattrn = "^[0-9]+$"; if (System.Text.RegularExpressions.Regex.IsMatch(Porttex ...