• 1.浏览器是如何进行界面渲染的

1. 先解析HTML,生成DOM树(重要步骤)
2. 后解析CSS样式,生成CSS样式树(规则树)
3. 将DOM树和CSS树结合,生成渲染树Render Tree（重要步骤）

• DOM树：只有结构没有样式
• 渲染数：DOM树 + CSS样式

2.重绘和回流(重排)

• 回流(重排)

  当Render Tree中部分或者全部元素的尺寸、结构、布局等发生改变的时,浏览器就会重新渲染部分或全部文档的过程叫做称为回流 (回流也称重排)

  回导致回流(重排)的操作:

  1.页面的首次刷新
  2.浏览器的窗口大小发生改变
  3.元素的大小或位置发生改变
  4.改变字体的大小
  5.内容的变化(如:input框的输入,图片的大小)
  6.激活伪类(如:hover)
  7.脚本操作DOM(添加或者删除可见的DOM元素)
  等等.....
  

• 重绘
  由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时,只影响盒子自身属性(比如,color,background-color,opacity,outline等),称为重绘

  注意: 重绘不会引起回流,而回流一定会引起重绘

3.如何减少重绘与回流

1、CSS优化法

（1）使用 transform 替代 top

（2）使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局

（3）避免使用table布局，可能很小的一个小改动会造成整个 table 的重新布局。

（4）尽可能在DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点。

（5）避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。

（6）将动画效果应用到position属性为absolute或fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度可以选择 requestAnimationFrame，详见探讨 requestAnimationFrame。

（7）避免使用CSS表达式，可能会引发回流。

（8）将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如will-change、video、iframe等标签，浏览器会自动将该节点变为图层。

（9）CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。

2、JavaScript优化法

（1）避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。

（2）避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。

（3）避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。