CSS样式的书写顺序及原理——很重要!

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树构建render树布局render树绘制render树

css样式解析到显示至浏览器屏幕上就发生在②③④步骤,可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式,完成第②步,然后开始遍历每个树结点的css样式进行解析,此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中,一旦浏览器发现某个元素的定位变化影响布局,则需要倒回去重新渲染正如按照这样的书写书序:

width: 100px;

height: 100px;

background-color: red ;

position: absolute;

当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离文档流,而之前却是按照普通元素进行解析的,所以不得不重新渲染,解除该元素在文档中所占位置,然而由于该元素的占位发生变化,其他元素也可能会受到它回流的影响而重新排位。最终导致③步骤花费的时间太久而影响到④步骤的显示,影响了用户体验。

所以规范的的css书写顺序对于文档渲染来说一定是事半功倍的!

扩展:还有一个会影响浏览器渲染性能的词汇“repaint(重绘)”

repaint(重绘):改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。

注意:为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。

风清洋

风清洋

前端老兵,一路上搬过C++、C#、Java的砖,现在在搬Node.js

评论