前端最常用的技术html，css，js，知识点不多，从标签到选择器，从选择器到事件好像已经把前端概括了，但是，如果详细考量，却发现在这之下隐藏很多值得我们品味的知识点，那么这次我们基于页面呈现的过程来聊聊重绘和回流。
HTML页面呈现过程
前端的小伙伴都知道，我们编写页面的基础语言是HTML（超文本标记语言），浏览器解析的过程如下：
1、写好的页面交给浏览器，浏览器把获取到的HTML标签转化成一个树状结构，这里应该很好理解，因为html页面都是以一个根标签开始的，通常是html，我们把浏览器转化HTML得到的树状结构称为DOM树，注意，DOM树包含head标签,display属性为none在内的所有标签。
2、但是注意，第一部的时候dom树只是把标签结构给整合了出来，并没有添加样式（行内样式也没有生效），那么在第二步就会基于页面上的代码把所有的样式（CSS）解析出来，形成样式的树状结构，也就是（CSSOM）树，当然，这里是浏览器在解析，所以只会解析浏览器可以理解的样式，如果不理解会直接舍弃，所以，也就有了前端小伙伴深恶痛绝的样式兼容问题。
3、第一步有了结构，第二步有了样式，那么接下来需要把结构和样式结合起来，这个过程类似后端模板渲染的样子，形成一个新的具有结构标签和对应样式（CSS选择器的作用），也就是RENDER树。相比较第一步的结构树，RENDER树只会记录影响布局的标签和样式，比如：有display:none属性的标签不会包含，但是visibility:hidden会包含。
4、接下来浏览器就会安装RENDER树把页面绘制出来。
重绘
基于HTML页面呈现的过程，我们来聊聊重绘概念吧，顾名思义，重绘就是从新绘制页面，比如DOM元素颜色的修改，透明度的修改，注意，这里聊的样式不包含集合样式，也就是说当前元素的修改不会影响到其他元素，比如：background。
那么浏览器就会从新绘制这个元素，但是不会从新渲染整个页面
回流
相比较重绘，回流会对页面效果照成比较大的影响，所谓的回流就是，当一个DOM元素的尺寸发送变化或者其他形变，导致其他DOM元素的位置受到影响，这个时候，浏览器会基于现在的改变重构整个页面，也就形成了回流。
但是这里要注意
1、重绘不见得回流，但回流会带来重绘。
2、回流对浏览器资源的开销比较大，我们在开发的过程当中要进行要尽量避免回流
避免方案
所谓的避免，其实就是减少页面的从新布局，所以思路上可以：
1、尽量避免行内样式，采用多个class组合生成样式，这样避免，直接在DOM树的时候和CSSOM树的时候进行重绘，并且本身使用的范围以比较狭窄。
2、定义元素的固定最大或者最小高度，避免页面自适应导致的回流。
3、批量的进行dom元素操作，比如添加元素。
4、不要使用table布局（估计也没有人用了），tab修改很容易导致尺寸上的变化从而导致回流。
当然，还有很多方法，这里就不列举了，欢迎各位大佬多多指点。
