浏览器渲染那些事之 Reflow、Repaint

morgan 发布于2019-08-29 12:19 / 3060人阅读

摘要：原文链接浏览器渲染那些事之浏览器内核渲染引擎在各个浏览器厂商你追我赶的形势下，截止今日，产生了很多不同的浏览器，各个浏览器本质大同小异，核心部分基本相似，由渲染引擎和引擎组成。

原文链接

浏览器渲染那些事之 Reflow、Repaint 浏览器内核（渲染引擎）

在各个浏览器厂商你追我赶的形势下，截止今日，产生了很多不同的浏览器，各个浏览器本质大同小异，核心部分基本相似，由渲染引擎和 JS 引擎组成。当你在访问网站页面的时候，浏览器做了很多事情，从发送请求，到解析 HTML 源码，构建渲染树，最后将内容像素绘制到设备屏幕上，一步步完成用户最终需要的场景。然而，在浏览器完成整个渲染的过程中，最为核心的就是“渲染引擎”。以下分别列出一些主流浏览器的渲染引擎：

chrome - webkit

safari - webkit

opera - webkit（早期是 presto）

firefox - gecko

ie - trident

渲染流程

结合浏览器渲染原理，来剖析以下代码渲染构建过程：

1.HTML 源码：

browser rendering

Hello web performance students!

2.CSS 源码：

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

3.该图为以上源代码构建树：

浏览器渲染页面整个过程描述：

首先，解析 HTML Source，构建 DOM Tree；

同时，解析 CSS Style，构建 CSSOM Tree；

然后，组合 DOM Tree 与 CSSOM Tree，去除不可见元素，构建 Render Tree；

再执行 Reflow，根据 Render Tree 计算每个可见元素的布局（几何属性）；

最后，执行 Repaint，通过绘制流程，将每个像素渲染到屏幕上。

注意：

Render Tree 只包含渲染网页所需要的节点；

Reflow 过程是布局计算每个对象的精确位置和大小；

Repaint 过程则是将 Render Tree 的每个像素渲染到屏幕上。

哪些阶段影响渲染效率

我们都知道，网页是需要挂载在客户端的浏览器上运行，但是随着互联网的快速发展，为保证用户访问应用的流畅性，往往对客户端的设备配置要求较高。然而，对于用户的设备，我们是无法控制；因此，作为一名开发者，就需要找到除了用户设备配置之外导致访问不流畅的问题，下面就从渲染流程中找到影响性能的问题。

浏览器初始化渲染时会执行一次 Reflow 过程，这个过程主要是用来确定页面上每个元素在屏幕上的几何位置属性。但是，每执行一次 Reflow 会需要花费大量的时间，耗费大量的设备资源，所以尽量避免执行 Reflow 过程。同时，执行完 Reflow 都会伴随着一次 Repaint 过程，这个过程也会耗费大量的计算机资源，严重影响页面的渲染性能。所以，在浏览器渲染阶段，主要影响页面渲染的阶段是 Reflow 和 Repaint 过程，因此在编写代码时应该尽量避免 Reflow 和 Repaint 过程的执行，如：避免在 JS 代码里直接改变元素的几何属性。

reflow & repaint 简介

reflow 在渲染过程中称为回流，发生在 Render Tree 阶段，它主要是用来确定每个元素在屏幕上的几何属性，需要大量计算每个元素的位置。在代码里每改变一个元素的几何属性，均会发生一次回流过程。

repaint 在渲染过程中称为重绘，发生在 reflow 过程之后，当元素的几何属性确定之后便要开始将元素绘制在屏幕上展示。repaint 执行过程就是将元素的颜色、背景等属性绘制出来。在代码里没改变一次元素的颜色等属性时均会对相关元素执行一次重绘。

如何触发 reflow 和 repaint 过程

1.改变元素 font-size：

document.getElementsByTagName("body")[0].style.fontSize = "20px"; // reflow,repaint

2.改变元素盒模型margin、border、padding、width：

let styles = document.getElementsByTagName("body")[0].style;
styles.margin = "40px"; // reflow,repaint
styles.border = "40px solid #f00"; // reflow,repaint
styles.padding = "40px"; // reflow,repaint
styles.width = "300px"; // reflow,repaint

3.改变元素颜色、背景色属性：

let styles = document.getElementsByTagName("body")[0].style;
styles.color = "#fff"; // repaint
styles.backgroundColor = "#f00"; // repaint

4.特殊：offset、scroll、client*、getComputedStyle、currentStyle：

由于浏览器在处理批量修改页面元素样式时，会将批量操作缓存起来，然后再做一次 reflow 过程（异步 reflow），避免每次操作都执行 reflow 消耗资源。但是如果在某个操作之后立马调用了以上执行属性，为了等够得到最新的样式，会检查缓存的操作，是否需要 reflow，这样就 flush 出最新的样式。

如何减少 reflow 和 repaint 过程

1.减少 JS 逐行修改元素样式：

let body = document.getElementsByTagName("body")[0];
body.className += " class-name";

2.离线处理 DOM 操作：

通过 documentFragment 集中处理临时操作；

克隆节点进行操作，然后进行原节点替换；

使用 display:none; 进行批量操作。

3.减少样式的重新计算，即减少 offset、scroll、client*、getComputedStyle、currentStyle 的使用，因为每次调用都会刷新操作缓冲区，执行 reflow & repaint。

参考资料

渲染性能；

Rendering: repaint, reflow/relayout, restyle - 译文；

浏览器的渲染原理简介；

分析运行时性能；

如何使用 Timeline 工具。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111809.html

浏览器渲染的那些事（三）

摘要：浏览器会对发生变化的呈现器以及其子代标注为，表示需要进行标记分为两种和。异步和同步异步，简单来说，就是指浏览器为了尽可能减少和的操作，而将这些操作积攒起来，再统一做一次。终于到了布局的部分了！布局当渲染对象被创建并添加到树中，是没有位置和大小的，计算这些值的过程称为layout或reflow。布局是一个递归过程，由根渲染对象开始，对应html文档元素，布局继续递归的通过一些或所有...

ralap 2019-08-02 15:55 评论0 收藏0
浏览器渲染的那些事（三）

摘要：浏览器会对发生变化的呈现器以及其子代标注为，表示需要进行标记分为两种和。异步和同步异步，简单来说，就是指浏览器为了尽可能减少和的操作，而将这些操作积攒起来，再统一做一次。终于到了布局的部分了！布局当渲染对象被创建并添加到树中，是没有位置和大小的，计算这些值的过程称为layout或reflow。布局是一个递归过程，由根渲染对象开始，对应html文档元素，布局继续递归的通过一些或所有...

Near_Li 2019-08-30 13:05 评论0 收藏0
浏览器渲染的那些事（三）

摘要：浏览器会对发生变化的呈现器以及其子代标注为，表示需要进行标记分为两种和。异步和同步异步，简单来说，就是指浏览器为了尽可能减少和的操作，而将这些操作积攒起来，再统一做一次。终于到了布局的部分了！布局当渲染对象被创建并添加到树中，是没有位置和大小的，计算这些值的过程称为layout或reflow。布局是一个递归过程，由根渲染对象开始，对应html文档元素，布局继续递归的通过一些或所有...

codergarden 2019-08-19 18:26 评论0 收藏0
浏览器渲染的那些事（三）

摘要：浏览器会对发生变化的呈现器以及其子代标注为，表示需要进行标记分为两种和。异步和同步异步，简单来说，就是指浏览器为了尽可能减少和的操作，而将这些操作积攒起来，再统一做一次。终于到了布局的部分了！布局当渲染对象被创建并添加到树中，是没有位置和大小的，计算这些值的过程称为layout或reflow。布局是一个递归过程，由根渲染对象开始，对应html文档元素，布局继续递归的通过一些或所有...

weakish 2019-08-05 17:49 评论0 收藏0
【译】浏览器渲染：repaint,reflow/relayout,restyle

摘要：屏幕的变化就被称为或者是。而浏览器的目标之一就是减少以及的负面影响，其中的一个策略就是干脆不做，又或者说至少不是现在做。但有时脚本语句会破化浏览器优化，并使其刷新队列以及执行所有批处理的改变。 **首先说翻译这篇文章的目的其实是，之前回答的关于浏览器js渲染的问题被打脸了 ಥ_ಥ ，不得不正视自己半路出家学前端的事实，所以这篇文章就算是自己的一个笔记吧，学而时习之，不亦乐乎，翻译错了，...

godlong_X 2019-08-29 11:17 评论0 收藏0