浏览器的重流和重绘

浏览器的组成

浏览器由两部分组成 渲染引擎, 和js引擎.

• 常见浏览器内核:IE safari chrome firfox Edge

• 浏览器的渲染分为四个阶段

  1. 将html解析成dom树,将css解析成样式书
  2. 将dom树和样式树合并成 渲染树 render tree
  3. 计算出渲染树的页面布局 layout
  4. 将渲染树绘制到屏幕上.

这四步不是按顺序执行的,有可能第一步没执行完,后边的就开始执行了

• 流和绘
  流:渲染树到布局的过程叫流flow
  绘制:布局到页面这个过程叫做绘制

• 流和绘会占用大量的资源
  他们具有阻塞效应,会消耗很多事件和计算资源

• 重流和重绘的关系 :重流必然导致重绘,重绘,不一定会重流.
  比如改变某个元素的颜色,会导致重绘,但是不会导致重流.改变页面布局一定会导致重流重绘
  浏览器会将重流和重绘控制在相关的子渲染树上,避免不必要的性能消耗.

-避免减少重流和重绘的方法
作为开发者,我们应当尽量减少重流和重绘

1. 避免操作高层dom
2. flex布局和table布局消耗很大,能不动就不动
3. 使用requestAnimationFrame 将重绘放到下次重流集中处理.