当前位置：网站首页 > 技术文章 > 正文

浏览器的渲染机制、重绘、重排

zhezhongyun 2025-08-03 09:28 60 浏览

1、什么是重排和重绘

网页生成过程：

HTML被HTML解析器解析成DOM 树
css则被css解析器解析成CSSOM 树
结合DOM树和CSSOM树，生成一棵渲染树(Render Tree)
生成布局（flow），即将所有渲染树的所有节点进行平面合成
将布局绘制（paint）在屏幕上

重排(也称回流): 当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。触发：

添加或者删除可见的DOM元素
元素位置改变
元素尺寸改变
元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
页面渲染初始化（这个无法避免）
浏览器窗口尺寸改变

重绘： 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。触发：

改变元素的color、background、box-shadow等属性

2、重排和重绘的代价究竟多大

var times = 15000;
 
// code1 每次过桥+重排+重绘
console.time(1);
for(var i = 0; i < times; i++) {
  document.getElementById('myDiv1').innerHTML += 'a';
}
console.timeEnd(1);
 
// code2 只过桥
console.time(2);
var str = '';
for(var i = 0; i < times; i++) {
  var tmp = document.getElementById('myDiv2').innerHTML;
  str += 'a';
}
document.getElementById('myDiv2').innerHTML = str;
console.timeEnd(2);
 
// code3 
console.time(3);
var _str = '';
for(var i = 0; i < times; i++) {
  _str += 'a';
}
document.getElementById('myDiv3').innerHTML = _str;
console.timeEnd(3);
 
 
// 1: 2874.619ms
// 2: 11.154ms
// 3: 1.282ms

3、重排优化建议：

分离读写操作
样式集中修改
缓存需要修改的DOM元素
尽量只修改position：absolute或fixed元素，对其他元素影响不大
动画开始GPU加速，translate使用3D变化

transform 不重绘，不回流是因为transform属于合成属性，对合成属性进行transition/animate动画时，将会创建一个合成层。这使得动画元素在一个独立的空间中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。

作者：cc先生

https://juejin.cn/post/6992724318044028964

transform-style 属性

上一篇：托福写作高频考题写作思路&词汇丨考虫独家
下一篇：脑洞:琼恩·雪诺、蝙蝠侠和魔形女的灵魂宠物了解一下

浏览器的渲染机制、重绘、重排

1、什么是重排和重绘

2、重排和重绘的代价究竟多大

3、重排优化建议：

相关推荐

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

旧手机新玩法，MacroDeck进阶指南

推荐36种免费React模板和主题「干货」

免费领取→可编辑危废标签模板首发!

业余无线电UV段几种常见天线（uv段最强天线）

今年最常见的前端面试题，你会做几道?

GitHub和码云上，7个h5页面制作工具推荐

BarTender10.1条码软件如何制作模板标签

顶级Javaer，常用的 14 个类库