中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂

attachment --> Render Tree

• 结合 dom树 与 style树，生成渲染树

5. 重绘与回流

当元素的样式发生变化时，浏览器需要触发更新，重新绘制元素。这个过程中，有两种类型的操作，即重绘与回流。

• 重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少

• 回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。会触发回流的操作:

  • 页面初次渲染
  • 浏览器窗口大小改变
  • 元素尺寸、位置、内容发生改变

  • 元素字体大小变化

    • 添加或者删除可见的 dom 元素
  • 激活 CSS 伪类（例如：:hover）

  • 查询某些属性或调用某些方法

    - clientWidth、clientHeight、clientTop、clientLeft 
    - offsetWidth、offsetHeight、offsetTop、offsetLeft 
    - scrollWidth、scrollHeight、scrollTop、scrollLeft 
    - getComputedStyle() 
    - getBoundingClientRect() 
    - scrollTo() 

回流必定触发重绘，重绘不一定触发回流。重绘的开销较小，回流的代价较高。

最佳实践:

• （编辑：西安站长网）

  【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!