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树。它是解析完一部份内容就显示一部份内容，同时，可能还在经过网络下载其他内容。

相信不少人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期，如学了一段时间没有方向感或者坚持不下去一我的学习枯燥乏味有问题也不知道怎么解决，对此我整理了一些资料 喜欢个人文章想与更多资深大牛一块儿讨论和学习的话 欢迎加入个人学习交流群907694362