浅谈JS重绘与回流

1 重绘(repaint):当元素样式的改变不影响页面布局时,比如元素的颜色,浏览器将对元素进行的更新,称之为重绘

常见的重绘操作有:

  • color、background-color、visibility、opacity、
  • border-style、border-radius、
  • box-shadow、outline

2 回流(reflow):也叫做重排。当元素的尺寸或者位置发生了变化,就需要重新计算渲染树,这就是回流,比如元素的宽高、位置,浏览器会重新渲染页面,称为回流,又叫重排(layout)

  • 盒子模型相关属性的改变:width、height、padding、border、margin、display、border-width、min-height
  • 定位属性及浮动元素位置的心迹:top、right、bottom、left、position、float、clear
  • 节点内部文字结构,行内属性的改变 font-size、line-height

 

3 关系:回流必定会触发重绘,重绘不一定会触发回流。重绘的开销较小,回流的代价较高。

posted @ 2022-04-28 19:13  博星  阅读(142)  评论(0编辑  收藏  举报