首页 > 试题广场 >

浏览器渲染流水线：构建 DOMCSSOM、回流与重绘的触发

[问答题]
浏览器渲染流水线：构建 DOM/CSSOM、回流与重绘的触发与优化。
查看答案及解析
添加回答
DRZv头像 DRZv
1. 流程：HTML解析DOM → CSS解析CSSOM → 合成渲染树 → 回流（算几何）→ 重绘（画样式）→ 合成显示； ​ 2. 触发：回流（改几何/结构/读布局属性），重绘（改样式不影响几何）； ​ 3. 优化：批量操作DOM/CSS、用transform/opacity做动画、脱离文档流缩小回流范围。
发表于 2025-11-03 06:43:08 回复(1)
秋水夏树头像 秋水夏树
优化回流次数 1. 读写分离。边读边写，会导致改完后，下次读的时候浏览器发现布局发生改变了，会强制同步回流来获取元素的最新信息 2. 修改 DOM 操作合并：设置 display:none 属性，多次更改完后再删除该属性 3. transform 或 opacity 实现动画将操作提至 CPU 处理，直接操作合成层，避免了回流重绘 4. 设置 will-change / transform 将该层提至新的独立合成层中，之后的回流重绘操作都只会在该层内部，不会影响外部元素
发表于 2025-09-15 20:21:54 回复(1)
WangYibo头像 WangYibo
1.解析HTML & CSS-->构建DOM & CSSOM 树，生成渲染树，【回流】和【】重绘呈现出来，优化的关键在与最小化回流和重绘的次数范围
发表于 2026-01-14 14:10:12 回复(0)
牛客41767380号头像 牛客41767380号
解析HTML构建DOM树，解析CSS构建CSSOM树--二者合称渲染树--回流/重排--重绘--合成现实 回流触发：改变几何/结构/读取布局属性；重绘触发：改颜色等不影响几何 优化：读写分离，批量操作DOM
发表于 2026-01-10 15:03:20 回复(0)
提交观点

问题信息

来自：前端开发-牛客面经八股
难度：
4条回答 330浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号