浏览器渲染过程、回流重绘

最新推荐文章于 2024-05-20 13:11:50 发布
最新推荐文章于 2024-05-20 13:11:50 发布
阅读量518 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 浏览器 文章标签： 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaozhuo_tang/article/details/78300852

渲染引擎

渲染引擎，中文名字非常清晰，就是负责页面渲染的引擎（感觉并没有解释），另一个名词渲染引擎通常也就是浏览器内核，从js拥有了自己的引擎（比如V8）之后，解析JS的工作就从浏览器中独立出来。
简单介绍一下浏览器内核的分类，现如今的主流浏览器以及内核；

浏览器内核关系
ChromeChromium早期为webkit
FireFoxGecko开源内核
safariWebkitChrome内核原型
IETrident
EdgeEdgeHTML全新引擎
OperaBlinkChromium计划一部分

引擎对HTML的支持不尽相同，所以了解各个浏览器的引擎是什么还是有一定必要的；

渲染过程

浏览器如何组织我们的HTML与CSS并最终形成页面：
1. 加载解析HTML代码，形成DOM TREE；
2. 加载解析CSS代码，形成CSS TREE；
3. 由CSS TREE 与DOM TREE共同构成Rendering Tree，不过Rendering Tree中并不包含在CSS TREE中display:none的标签、<head>标签；
4. 对Rendering Tree 中的元素，开始进行布局计算，通过具有的相应的宽高属性确定每个元素的坐标
5. 最后便是，将我们布局好的元素Paint出来；
下面是一张关于三个树的图，很明显可以看到与展示无关的head标签、title、script等标签与display:none的元素最终不进入Render Tree；

DOM树、CSS树与Rendering树
浏览器渲染简单过程：
这里写图片描述

不可绕过的两个问题—Reflow与Repaint

当第一次布局与渲染之后，页面肯定需要与用户产生交互，产生交互就意味着页面需要重新绘制（变红、变蓝）甚至重新布局（缩小了一块区域），这就涉及到两个概念Reflow与Repaint；
Repaint：重绘，重新绘制。repaint 执行过程就是将元素的颜色、背景等属性重新绘制出来，为什么会发生重绘，因为相应区块(div、span……)的边框颜色、背景颜色、字体颜色等发生了改变；
Reflow：回流，重新排版。当页面的元素产生宽高变化，可能占据了其他元素的位置，这时浏览器就需要对页面的布局进行重新的计算，确定元素的坐标，回流发生必定伴随这重绘；

那么什么操作会触发重绘或者回流？

触发重绘：改变元素样式信息，诸如background-color、border-color、 visibility等
触发回流：改变元素的位置信息，宽高信息甚至删除或者添加DOM元素
1. DOM操作（增、删、改，改变DOM排序）
2. 浏览器窗口的操作
3. 内容变化，包括表单域内的文本改变(font-size的改变)
4. 增删样式表内容()
5. 修改class属性
6. 伪类激活(:hover、:active)
7. offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算， 会使浏览器将渐进回流队列Flush，立即执行回流。

回流与重绘的影响

最简单的来说，当然是会导致性能不佳了。如果长期操作DOM，产生浏览器的回流（回流必定导致重绘），内核一定是相当忙的要不停地去计算位置、宽高，完了还要去填充像素（重绘）。

优化方向

那么优化方向就是，减少页面的重绘与回流。怎么做？看看谁导致他们回流与重回就知道了。
1. 避免多层样式，已经有class的情况下去添加style属性只会让浏览器多计算一次，多来一次回流，我们应该通过改变class的方法去设置样式（这样也便于管理整体样式不是吗？）；
2. 牺牲平滑度换取速度，在操纵移动时，如果每秒移动1px与3px的差距可以忍受，那么用3px，我们的回流与重绘也将大大减少；
3. 避免使用古老的table布局，因为table是个和罕见的可以影响在它们之前已经进入的DOM元素的显示的元素，并且即使一些小的变化将导致table中的所有其他节点回流
4. 在具有fixed、absolute属性的元素上使用动画（OR在动画元素上添加fixed、absolute），他们独自成了自己的文档流，不会影响到主文档流的布局；
5. offsetWidth, width, clientWidth, scrollTop/scrollHeight等值缓存，避免过多访问（DOM元素访问也要缓存）；

资料：
  1. So how does the browser actually render a website | JSConf EU 2015 https://www.youtube.com/watch?v=SmE4OwHztCc
决战浏览器渲染：减少重绘（Repaint）与重排（Reflow）的性能优化策略
码觉客的博客
04-18 852
浏览器渲染是一个精密的过程，重排和重绘是其中不可避免但可以被有效管理的环节。优化它们并非一劳永逸，而是在开发过程中需要持续关注的实践。理解重排（布局计算）和重绘（像素绘制）的触发条件和性能代价。最小化DOM操作，利用或隐藏元素进行批量修改。**优先使用transform和opacity**进行动画和视觉变换，利用合成层优势。谨慎使用。坚决避免强制同步布局，遵循“读写分离”原则。使用处理JS动画，对高频事件进行节流/防抖。利用DevTools等工具进行诊断和验证优化效果。
【前端知识之CSS】回流和重绘
weixin_44337386的博客
05-17 614
本系列主要整理前端面试中需要掌握的知识点。本节介绍回流和重绘以及什么时候会触发。
【浏览器渲染机制】回流（Reflow）和重绘（Repaint）
一起寻找DX3906-探索未知
05-20 1021
回流（Reflow）和重绘（Repaint）性能优化
浏览器的渲染过程及回流、重绘
Sky_msk的博客
08-01 334
浏览器渲染引擎 理解： 一个渲染引擎主要包括：HTML解析器，CSS解析器，javascript引擎，布局layout模块，绘图模块…等等 浏览器渲染页面的整个过程：浏览器会从上到下解析文档。 遇见 HTML 标记，调用HTML解析器解析为对应的 token （一个token就是一个标签文本的序列化）并构建 DOM 树（就是一块内存，保存着tokens，建立它们之间的关系）。 遇见 style/link 标记调用相应解析器处理CSS标记，并构建出CSS样式树。 遇见 script 标记 调用javascr
浏览器渲染页面的步骤
longholidays的博客
03-14 8005
浏览器的渲染页面时，表示网站资源已经请求成功。 渲染时，大致的流程如下： （解析html以构建dom树->构建render树->布局render树->绘制render树） 具体的流程如下： 1：浏览器会将HTML解析成一个DOM树，DOM树的构建过程是一个深度遍历过程，当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点， 2：将CSS解析成CSS规则树； 3：根据DOM树和
浏览器渲染流程和重绘，回流
kun的博客
11-20 455
1、渲染大致流程 渲染引擎首先通过网络获得所请求文档的内容，渲染引擎在取得内容之后的基本流程： ①解析html以构建dom树    ②构建render树 （render tree一般翻译为渲染树） ③布局render树       ④绘制render树 2、渲染具体流程 1. ①浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好...
浏览器渲染页面的过程，以及重绘和重排
MOONCOM的博客
05-23 857
浏览器的渲染过程 1，浏览器解析html源码，然后创建一个 DOM树。 在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。 DOM树的根节点就是 documentElement。 2，浏览器解析CSS代码，计算出最终的样式数据。 对CSS代码中非法的语法她会直接忽略掉。 解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户
浏览器的重绘与回流
07-20
理解重绘与回流对浏览器渲染效率的影响的PPT。用于知识分享
浏览器从URL输入到页面展现到底发生了什么？ 回流、重绘
南栀的博客
11-16 1139
浏览器从URL输入到页面展现到底发生了什么？
浏览器的回流与重绘 (Reflow & Repaint)
今天又懒得加班
05-23 410
写在前面 在讨论回流与重绘之前，我们要知道： 浏览器使用流式布局模型 (Flow Based Layout)。 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。 由于浏览器使用流式布局，对Render Tree的...
对于页面渲染的过程和回流，重绘概念的总结 :
Wu hao's blog
05-30 391
浏览器的渲染过程 : 当浏览器获得一个html文件时，会“自上而下”加载，并在加载过程中进行解析渲染。 浏览器会将 HTML 解析成一个 DOM 树，DOM树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 将 CSS 解析成CSS 规则树（Style Rule）。 根据 DOM 树和 CSS 规则树来构造 Rendering Tree（渲染树）。注意：Rendering Tree 并不等同于DOM树，因为一些像Header或d...
一文搞懂回流和重绘
cpa0701的博客
10-13 225
浏览器的渲染过程 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素 Display:将像素发送给GPU，展示在页面上。（这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而css3硬件加速的原理则是新建合成层，这里我们不
浏览器的渲染以及回流和重绘
weixin_64105376的博客
04-05 486
提到回流和重绘我们就要先了解一下浏览器渲染页面的过程
浏览器——渲染、回流与重绘
02-01 1153
在上面的例子中，当主线程解析HTML和CSS 时，预加载扫描器发现了脚本和图像，并开始下载他们。当我们输入目标的域名的时候，客户端需要找到对应资源的位置。在解析DOM 时，会并行解析CSS，并进行CSSOM 的构建，CSSOM对象模型和DOM是相似的。当DOM发生变化，引起元素几何信息发生改变的时候（如大小和位置），浏览器需要重新计算几何属性，会触发回流，使得最新的元素布局渲染到页面上。即在当前真实DOM 树之外，创建一份新的文本，在内存中创建和修改节点，然后再将他们新增到文档中，这样避免回流和重绘次数。
浏览器渲染中的重绘和回流
duanshilong的博客
04-17 404
重绘和回流 影响 重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。 重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘 回流是布局或者几何属性需要改变就称为回流。 回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。 以下几个动作可能会导致性能问题： 改变 window 大小...
浏览器的渲染原理以及回流优化
2301_79538907的博客
10-29 114
requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。隐藏元素，应用修改，重新显示，这会在展示和隐藏节点的时候，产生两次重绘。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。该过程的第一步和第三步可能会引起回流，但是经过第一步之后，对DOM的所有修改都不会引起回流，因为它已经不在渲染树了。
浏览器渲染——什么是重排（回流），重绘？（前端性能优化）
秋天，黄叶坠地，凉风有信。
03-30 1249
重排和重绘 每个页面至少在初始化的时候会有一次重排操作，任何对渲染树的修改，都可能引发重排或者重绘。 重排： 当渲染树中一部分，因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。 重绘（repaint）: 当盒子的位置、大小以及其他属性，浏览器便把这些都按照各自的特性绘制一遍，将内容呈现在页面中。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 重排和重绘的关系：在回流的时候，浏览器会使
浏览器的回流和重绘浅谈理解
qq_45335911的博客
08-07 276
浏览器的回流和重绘浅谈 页面的回流和重绘会影响JavaScript的性能，如果你的html很大很复杂，页面回流和重绘是一个非常值得关注的点。对于重绘和回流的概念不是很清晰，查看了许多博文，在这里说一下自己的理解！！欢迎同学们与我交流。 什么是回流 当Render Tree中部分或全部元素尺寸、结构或某些属性发生改变的时候，浏览器会重新渲染部分或全部的文档的过程做回流。回流必将引起重绘，而重绘不一定会引起回流。 什么是重绘 当页面上的元素样式改变并不会影响到他在文档流的位置，浏览器会将新样式赋给他并
前端面试之浏览器渲染（十）
qq_43238599的博客
05-15 412
最近在准备面试，感觉好些东西了解，但是了解的深度有限。自己就总结了几个模块，打算强化一下。如果你感觉我的文章对你有帮助，请点赞。如果感觉有哪些不足之处，可以留言。让我们一同进步，学习！！！ 最后在说明一下，这个系列我会一直写下去。如果，你有什么好的方向，也可以提出来。 渲染过程 上面这个图的基本流程如下： 1、解析html代码(HTML代码本质是字符串)转化为浏览器认识的节点，生成DOM树，也就是DOM Tree 2、解析css，生成CSSOM(CSS规则树) 3、把DOM Tree 和CSSOM结合.
浏览器渲染过程
最新发布
08-12
浏览器的渲染过程是一个复杂但高效的机制，主要涉及多个关键步骤，包括构建DOM树、CSS规则树、渲染树、布局、绘制和合成等阶段。以下是详细说明： ### 构建DOM树 当浏览器接收到HTML文档后，会解析HTML并生成DOM（Document Object Model）树。DOM树是一个由HTML标签转换而来的层次结构，每个节点代表一个HTML元素。解析过程中，浏览器会处理HTML标签并生成相应的节点对象，形成树状结构 [^3]。 ### 构建CSS规则树 与此同时，浏览器会解析CSS样式表，将CSS规则转化为CSS对象模型（CSSOM），即CSS规则树。CSSOM与DOM树是分开构建的，但它决定了每个DOM节点的样式属性。CSSOM的构建需要解析CSS文件、内联样式以及浏览器默认样式 [^3]。 ### 构建渲染树 在DOM树和CSSOM构建完成后，浏览器会将两者结合，生成渲染树（Render Tree）。渲染树包含所有可见元素及其样式信息，不包括隐藏元素（如`<head>`标签中的内容或`display: none`的元素）。渲染树的构建是为后续的布局和绘制做准备 。 ### 布局（Layout） 布局阶段也称为“回流”（Reflow），是计算每个元素在页面中的确切位置和大小的过程。浏览器会根据渲染树遍历所有节点，并将它们以盒模型的形式写入文档流。这个阶段决定了每个元素的几何属性，如宽度、高度、位置等 [^1]。 ### 绘制（Painting） 在布局完成后，浏览器会进入绘制阶段。此阶段会将每个元素的视觉信息（如颜色、边框、文本、阴影等）绘制到屏幕上。绘制过程是逐层进行的，通常分为多个图层进行管理，以提高渲染效率 [^3]。 ### 合成（Compositing） 最后，浏览器会将多个图层按照正确的顺序进行合成，最终呈现给用户。现代浏览器通常使用GPU进行合成操作，以提升性能。复合图层可以避免不必要的重绘和重排，提高页面渲染效率 [^3]。 ### 回流与重绘 当DOM元素的几何属性发生变化时（如修改宽度、高度或位置），浏览器会触发回流（Reflow），重新计算元素的位置和大小。回流之后通常会触发重绘（Repaint），将新的几何属性绘制到屏幕上。频繁的回流和重绘会影响性能，因此在开发中应尽量减少此类操作 [^4]。 ### 浏览器渲染引擎的组件 浏览器的渲染引擎负责解析HTML和CSS，并将结果显示到窗口中。其核心组件包括： - **DOM解析器**：负责解析HTML文档并构建DOM树。 - **CSS解析器**：负责解析CSS样式并生成CSSOM。 - **布局引擎**：负责计算元素的几何属性。 - **绘制引擎**：负责将元素绘制到屏幕上。 - **JavaScript引擎**：负责解析和执行JavaScript代码，可能会影响DOM和CSSOM的更新 [^2]。 ### 优化渲染性能 为了提升浏览器的渲染性能，开发者可以采取以下措施： - **减少DOM操作**：频繁的DOM修改会触发多次回流和重绘，应尽量合并DOM操作。 - **使用CSS动画优化**：使用`transform`和`opacity`属性进行动画操作，可以避免触发回流。 - **避免强制同步布局**：某些JavaScript操作会强制浏览器立即执行布局，影响性能。 - **使用复合图层**：将频繁变化的元素提升为复合图层，可以减少对其他元素的影响 。 ```css /* 使用 transform 进行动画优化 */ .element { transition: transform 0.3s ease; } .element:hover { transform: scale(1.1); } ``` ### 相关问题 1. 什么是回流（Reflow）和重绘（Repaint）？它们对性能有什么影响？ 2. 如何通过CSS和JavaScript优化浏览器的渲染性能？ 3. 浏览器是如何处理复合图层的？复合图层有哪些优缺点？ 4. DOM树、CSSOM和渲染树之间有什么关系？ 5. JavaScript是如何影响浏览器渲染过程的？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值