回流与重绘理解，助攻CSS

HTML渲染过程中回流和重绘是比较重要的概念，了解他们有助于编写性能更好的css代码

回流：指几何属性需改变的渲染，将整个网页填白，对内容重新渲染，只不过以人眼的感官速度看上去浏览器回流是不会有任何变化的
实质上每次回流都会将页面清空，再从左上角第一个像素点从左往右从上往下一一渲染。
渲染树的节点发生改变，影响该节点的几何属性，导致该节点位置发生变化，就会触发浏览器回流并重新生成渲染树。
回流意味着节点的几何属性发生改变，需浏览器重新计算并生成渲染树，渲染树会发生全部或者局部变化。

重绘：重绘是指外观属性而不影响集合属性的渲染。重绘较回流相对温和些。
渲染树节点改变，但不影响该节点的几何属性，回流较重绘消耗性能要高些，并且回流一定伴随重绘，重绘不一定有回流。

上面有讲几何属性和外观属性，可能有些童鞋不清楚

• 几何属性：包括布局、尺寸等可用数学几何衡量的属性
  • 布局：display、float、position、list、table、flex、columns、grid
  • 尺寸：margin、padding、border、width、height
• 外观属性：包括界面、文字等可用状态向量描述的属性
  • 界面：appearance、outline、background、mask、box-shadow、box-reflect、filter、opacity、clip
  • 文字：text、font、word

给一个比较好记忆的理解吧：大家喜欢喝奶茶吧，我最喜欢的是一点点奶茶茶，相信很多人喜欢，不然怎么生意好到爆，排队排的老长了，

突然又问素质较低的小伙子，插队了，引起后面的小哥强烈不满，两人你推我搡的快打起来了，幸好店长劝和，大家有重新排队，这个过程就跟回流差不多，

大家重新排队影响了大家的时间，怨声载道的，然后又来了一个帅帅的小哥哥，心疼女朋友排队站的太久脚痛，替她排队买，这样皆大欢喜，他女朋友也高兴，大家也不用重新排队

这个过程除了妹纸，其余人的位置和顺序都无发生变化，跟重绘差不多。

这样我们得出了个性能优化法则：回流必定引发重绘，重绘不一定引发回流。

很多童鞋可能不知，回流重绘其实与浏览器的事件循环有关

 

• 浏览器刷新频率为60Hz，即每16.6ms更新一次
• 事件循环执行完成微任务
• 判断document是否需更新
• 判断resize/scroll事件是否存在，存在则触发事件
• 判断Media Query是否触发
• 更新动作并发送事件
• 判断document.isFullScreen是否为true(全屏)
• 执行requestAnimationFrame回调
• 执行IntersectionObserver回调
• 更新界面

 上述就是浏览器每一帧中可能会做到的事情，若在一帧中有空闲时间，就会执行requestIdleCallback回调。

 回到正题，通过定向法则回流必定引发重绘，重绘不一定引发回流可知道，尽量减少回流重绘，就是CSS性能优化中一个很好的指标。

如何减少和避免回流重绘？

1. 使用visibility:hidden替换display:none；

2. 使用transform代替top；top是几何属性，操作top会改变节点位置从而引发回流，使用transform:translate3d(x,0,0)代替top，只会引发图层重绘，还会间接启动GPU加速，该情况在第12章变换与动画中会详细讲解。

3. 避免使用Table布局
4. 避免规则层级过多。浏览器的CSS解析器解析css文件时，对CSS规则是从右到左匹配查找，样式层级过多会影响回流重绘效率，建议保持CSS规则在3层左右。

5. 避免节点属性值放在循环里当成循环变量

6. 动态改变类而不改变样式。不要尝试每次操作DOM去改变节点样式，这样会频繁触发回流。

7. 将频繁回流重绘的节点设置为图层

CSS编码排序推荐：

根据回流和重绘原理。涉及到几何属性和外观属性，结合盒模型规范和从外到里进行属性排序，将一些回流的几何属性排在最前面，决定布局尺寸相关的
状态，在添加外观属性,布局》尺寸》界面》文字》交互 的方式定义顺序，交互的属性放在最后，如transform混入animation会让节点重新生成图层，
新图层不会对其他图层造成影响。如建楼一样：从无到有,从打桩(存在)、搭设(布局)、主体(尺寸)、砌体(界面)、装修(文字)、装潢(交互)到验收(生成一个完整的节点)，
每一步都基于前一步作为基础才能继续下去，符合我们正常的逻辑思维。
借鉴太极哲学思想：太极生两仪，两仪生四象，四象生八卦，从无极生太极开始，一直通过物质派生而构筑一个完整的立体结构，
这一过程是一个立体并包含位次顺序的四维关系。

布局属性

• 显示：display visibility
• 溢出：overflow overflow-x overflow-y
• 浮动：float clear
• 定位：position left right top bottom z-index
• 列表：list-style list-style-type list-style-position list-style-image
• 表格：table-layout border-collapse border-spacing caption-side empty-cells
• 弹性：flex-flow flex-direction flex-wrap justify-content align-content align-items align-self flex flex-grow flex-shrink flex-basis order
• 多列：columns column-width column-count column-gap column-rule column-rule-width column-rule-style column-rule-color column-span column-fill column-break-before column-break-after column-break-inside
• 格栅：grid-columns grid-rows

尺寸属性

• 模型：box-sizing
• 边距：margin margin-left margin-right margin-top margin-bottom
• 填充：padding padding-left padding-right padding-top padding-bottom
• 边框：border border-width border-style border-color border-colors border-[direction]-<param>
• 圆角：border-radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius
• 框图：border-image border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
• 大小：width min-width max-width height min-height max-height

界面属性

• 外观：appearance
• 轮廓：outline outline-width outline-style outline-color outline-offset outline-radius outline-radius-[direction]
• 背景：background
• 遮罩：mask mask-mode mask-image mask-repeat mask-repeat-x mask-repeat-y mask-position mask-position-x mask-position-y mask-size mask-origin mask-clip mask-attachment mask-composite mask-box-image mask-box-image-source mask-box-image-width mask-box-image-outset mask-box-image-repeat mask-box-image-slice
• 滤镜：box-shadow box-reflect  filter  mix-blend-mode  opacity,
• 裁剪：object-fit clip
• 事件：resize  zoom cursor  pointer-events  touch-callout  user-modify  user-focus  user-input  user-select  user-drag

文字属性

• 模式：line-height line-clamp vertical-align direction unicode-bidi writing-mode ime-mode
• 文本：text-overflow text-decoration text-decoration-line text-decoration-style text-decoration-color text-decoration-skip text-underline-position text-align text-align-last text-justify text-indent text-stroke text-stroke-width text-stroke-color text-shadow text-transform text-size-adjust
• 字体：src font font-family font-style font-stretch font-weight font-variant font-size font-size-adjust color
• 内容：overflow-wrap word-wrap word-break word-spacing letter-spacing white-space caret-color tab-size content counter-increment counter-reset quotes page page-break-before page-break-after page-break-inside

交互属性

• 模式：will-change perspective perspective-origin backface-visibility
• 变换：transform transform-origin transform-style
• 过渡：transition transition-property transition-duration transition-timing-function transition-delay
• 动画：animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode

在此已经整合了大部分的属性，可满足大部分的属性排序。其他未列入的属性，可根据自身使用习惯添加。分类只提供参考

文章仅为学习笔记，无写作艺术，仅供大家参考。