Max—— 前端攻城狮 's Blog

A Simple pure blog generated by jekyll

浏览器的重绘与重排

<< Back

什么是重绘和重排?

重绘(Repaint)是一个元素外观发生改变索触发的浏览器行为,浏览器会根据元素的新属重新绘制,使元素呈现新的外观,重绘不会带来重新布局,不一定伴随重排,性能开销相对较小;

重排(Reflow)是更加深入的一种改变,浏览器会根据元素的空间位置,几何形状等等重新渲染DOM树和规则树,性能开销相对较大;

浏览器从下载文档到最终显示出页面的过程是个复杂的过程,其中就包含了重绘和重排。各家浏览器引擎的工作原理略有差别,但也有一定规则。简单讲,通常在文档首次加载时,浏览器引擎会解析HTML文档来构建DOM树(结构内容),之后根据DOM元素的几何属性(即CSS样式组成的规则树中的几何属性部分,例如宽度,高度,边框等)构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性,类似于盒子模型(由于隐藏元素不需要显示,渲染树中并不包含DOM树中隐藏的元素)。当渲染树构建完成之后,浏览器引擎就可以将元素放置在正确地位置了,再根据渲染树节点的样式属性绘制出页面。(即添加CSS样式组成的规则树中的展现部分,例如背景颜色,字体颜色等)。

结论:重排比重绘更耗性能。

性能优化

  • 减少DOM操作,尽量减少重排的可能性;
  • 如果要操作DOM,尽量合并成一个操作(中间状态用变量保存);

参考浏览器的重绘与重排

发表于: 24 Sep 2013