css重绘(repaint)、回流(reflow)区分以及我自己

首先说一下书写的样式规则

因为在代码足够多之后,css也会变得不好维护,所以有了按照一定顺序书写样式规则的想法。在网上搜索了一圈之后,发现并没有让我比满意的代码规范,所以,自己给自己制定一套。

• 总体来说就是将,回流事件放在上方,将重绘事件放在下方,中间用一个空行隔开。
• 回流事件顺序:1.position相关 或 display相关 (都有的话position先写,display后写) 2.宽高 3.margin,padding 4.font相关回流事件(fontsize,white-space) 5.lineheight 6.border相关回流
• 重绘事件顺序:1.background相关 2.color相关
• transition相关,与transform相关放在最后。(transform事件并不会触发回流,仅仅是视图层面的改变,而transition是否触发回流要看改变的是什么,如果变化的内容是重绘事件,那么transiton每时每刻知道结束,触发的都是重绘事件,如果变化的内容是回流事件,那么每时每刻都会触发回流!很影响性能)

• 如图所示:

  
  Snipaste_2018-02-06_22-39-31.png

附:回流事件区分原则

添加或者删除可见的DOM元素
元素位置改变
元素尺寸改变
元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
页面渲染初始化（无法避免）
浏览器窗口尺寸改变