本文详细探讨了浏览器的重绘和重排过程，包括何时发生重排（reflow）和重绘（repaint），如添加删除元素、改变尺寸和内容、调整浏览器窗口尺寸等场景。重排涉及整个或部分渲染树的布局更新，而重绘仅涉及样式更改的视觉呈现。浏览器解析网页的步骤包括构建DOM Tree、CSSOM Tree，形成渲染树并执行重排和重绘以最终显示在页面上。
浏览器的重绘和重排
- 重排（reflow）：页面结构发生改变(html)
- 重绘（repaint）：样式（颜色）发生改变(css)，但是结构没有变化
以下情况会发生重排：
- 页面初始渲染，这是开销最大的一次重排
- 添加/删除可见的DOM元素
- 改变元素位置
- 改变元素尺寸，比如边距、填充、边框、宽度和高度等
- 改变元素内容，比如文字数量，图片大小等
- 改变浏览器窗口尺寸，比如resize事件发生时
- 激活CSS伪类（例如：:hover）
- 设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow
- 查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，除此之外，当我们调用getComputedStyl方法，或者IE里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”
- …
以下情况会发生重绘：
- color
- border-style
- border-radius
- text-decoration
- box-shadow
- outline
最低0.47元/天 解锁文章
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
