CSS样式还有书写顺序?
样式还有书写顺序?样式这么简单的东西,不是随便写写就行的么。很多初学者,甚至有一定工作经验的人都会发出这种疑问。而样式的书写顺序到底对页面有没有影响呢?答案是肯定的。如何写出好的css样式也是一个优秀的开发者必须要知道的!而且应该养成习惯,融入到开发中!好的习惯不是一点养成的。
为什么要注意书写顺序?
减少浏览器reflow(回流),提升浏览器渲染dom的性能
浏览器渲染原理
①:解析html构建dom树,解析css构建css树:将html解析成树形的数据结构,将css解析成树形的数据结构
②:构建render树:DOM树和CSS树合并之后形成的render树。
③:布局render树:有了render树,浏览器已经知道那些网页中有哪些节点,各个节点的css定义和以及它们的从属关系,从而计算出每个节点在屏幕中的位置。
④:绘制render树:按照计算出来的规则,通过显卡把内容画在屏幕上。
css样式解析到显示至浏览器屏幕上就发生在②③④步骤,可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式,完成第②步,然后开始遍历每个树结点的css样式进行解析,此时的css样式的遍历顺序完全是按照之前的书写顺序。
样式的书写顺序是如何影响网页的?
比如如下代码:
当浏览器解析到display的时候,突然发现元素是块级元素,而之前是按照行内元素渲染的!这个时候不得不回头重新渲染,在按照块级元素解析span标签。正确的做法是display写在样式最前面,一开始就以块级元素渲染span标签。
再看一个例子:
这个例子 解析到position的时候,突然发现该元素是绝对定位元素需要脱离文档流,而之前却是按照普通元素进行解析的,所以不得不重新渲染,而绝对定位是根据已经定位的父元素定位的,如果父元素的大小不一样,就会出现.box大小会重新改变的结果,使页面闪动。定位又是脱离文档流的,浮起来之后可能会影响其他元素排列布局。
一遍能过的非要渲染两遍 是很浪费性能的,大量的重绘页面会导致页面一闪一闪的,影响用户体验~
推荐的书写顺序是什么呢?
我们应该按照什么顺序来写样式呢?
(1)定位属性:
(2)自身属性:
(3)文字样式:
(4)文本属性:
(5)css3中新增属性:
更加细分
今天先分享这么多,如果大家喜欢的话我会再更新,正在学习WEB前端技术的小伙伴可以进群(618522268)一起交流学习,群里还有大量学习资料可供大家自行下载参看,欢迎大家一起来交流讨论。。
更多专业前端知识,请上 【猿2048】www.mk2048.com