常见的会引起网页重排和重绘的操作有哪些?

3 min read

引起Reflow的操作:

  1. 改变视窗大小

  2. 改变文字大小

  3. 改变字体、字重、行高等文字属性

  4. 改变元素位置、尺寸、边距、边框

  5. 改变元素内容、子元素数量或属性

  6. 改变表格列宽、行高、单元格内容等

  7. 改变样式,如添加、删除、修改样式等

引起Repaint的操作:

  1. 改变元素的透明度、背景色等

  2. 改变元素的文字颜色、装饰等

  3. 添加或移除阴影效果

  4. 改变元素的轮廓线、边框样式等

  5. 修改元素的变换效果,如旋转、缩放等

  6. 改变元素的过渡效果

需要注意的是,Reflo和Repaint是相互关联的,单个操作可能会同时引起两个操作的进行。因此,在进行前端开发时,需要尽可能减少对视觉渲染的影响,提高网页的性能和用户体验。