什么是回流与重绘 (Reflow & Repaint)

本文介绍了浏览器的渲染机制,重点关注回流(Reflow)和重绘(Repaint)。回流发生在元素尺寸、位置或内容变化时,浏览器需要重新计算布局并可能影响到其他元素。重绘则仅涉及样式变化,不改变布局。回流成本高于重绘,浏览器通过队列优化绘制。避免两者的方法包括减少DOM操作、使用绝对定位、一次性修改样式等。
摘要由CSDN通过智能技术生成

写在前面

在讨论今天的主角之前,我们要先了解一下浏览器的渲染机制。以Google,Firefox,Safari为例,Firefox 使用Geoko——Mozilla 自主研发的渲染引擎,SafariChrome 都使用 webkit

我们主要以 Webkit的主流程为例

  • 浏览器使用流式布局模型 (Flow Based Layout)
  • 解析HTML 生成 DOM
  • 解析CSS 生成CSSOM 规则树
  • DOM 树与 CSSOM 规则树合并在一起生成渲染树Render Tree
  • 根据渲染树遍历拿到每个节点开始布局,计算每个节点的位置大小信息
  • 将渲染树每个节点绘制到屏幕

回流(Reflow)

上面我们知道,我们会根据 Render Tree 去遍历渲染,所以当我们的节点发生改变时,浏览器重新渲染部分节点或者全部文档,我们称这个过程为回流

大致整理会导致回流的一些操作

  • 页面首次渲染
  • 浏览器窗口大小发生改变
  • 元素尺寸或位置发生改变
  • 元素内容变化(文字数量或图片大小等等)
  • 元素字体大小变化
  • 添加或者删除可见的DOM元素
  • 激活CSS伪类(例如:
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值