浏览器回流

1. 局部回流必然会造成当前所在文档流的整体回流

2. 脱离文档流（定位 position属性 absolute，fixed）

3534846-00ef9f3d405462ef.png

主要说一下浏览器在各个流程中做了什么

1. 解析HTML树，生成一个树状结构 解析css树

// dom树
            document
            html
   body             head 
div   div       meta  link
span
// css树
div { color: red, width: 100px, height: 100px };
div span { color: blue }

2. 浏览经过复杂的算法实现了将css属性丰富了对应的dom节点，这个时候这个树不包含不显示元素，比如head style display：none这些元素 我们称他为 render树

render树 = html树 + css树 - 不可见和不展示的元素

3. layout - 经过上面实现的render树， 但是他并没有大小和位置信息，确认这个的过程就是layout布局过程，浏览器采用一种流式布局方法，从上倒下，从左到右实现。

布局从render树的根节点进行，对应dom树的document，其初始位置是0，0

1. 父节点的宽度是他本身的render确定的
2. 父节点的高度是通过，遍历子元素，调用子元素的layout方法确定其高度，然后父节点根据子元素的height, margin. padding 确定自己的高度

4. 绘制paint

几条关于优化渲染效率的建议

结合上文有以下几点可以优化渲染效率。

1. 合法地去书写HTML和CSS ，且不要忘了文档编码类型。
2. 样式文件应当在head标签中，而脚本文件在body结束前，这样可以防止阻塞的方式。
3. 简化并优化CSS选择器，尽量将嵌套层减少到最小。
4. DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。
5. 如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。
6. 不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。
7. 尽量用transform来做形变和位移
8. 尽量使用离线DOM，而不是真实的网页DOM，来改变元素样式。比如，操作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用cloneNode()方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。
9. 先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。
10. position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。
11. 只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。
    使用window.requestAnimationFrame()、window.requestIdleCallback()这两个方法调节重新渲染。

参考文献
链接： 浏览器渲染原理与过程 https://www.jianshu.com/p/e6252dc9be32
链接 https://www.cnblogs.com/luluping/archive/2013/04/05/3000460.html