浏览器渲染原理总结（重绘和重排）

最新推荐文章于 2024-08-07 00:17:27 发布
最新推荐文章于 2024-08-07 00:17:27 发布
阅读量267 收藏
点赞数
分类专栏： 面试题 JavaScript 文章标签： 浏览器 渲染原理 面试题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Yolanda_NuoNuo/article/details/119922587
版权
决战浏览器渲染：减少重绘（Repaint）与重排（Reflow）的性能优化策略
码觉客的博客
04-18 802
浏览器渲染是一个精密的过程，重排和重绘是其中不可避免但可以被有效管理的环节。优化它们并非一劳永逸，而是在开发过程中需要持续关注的实践。理解重排（布局计算）和重绘（像素绘制）的触发条件和性能代价。最小化DOM操作，利用或隐藏元素进行批量修改。**优先使用transform和opacity**进行动画和视觉变换，利用合成层优势。谨慎使用。坚决避免强制同步布局，遵循“读写分离”原则。使用处理JS动画，对高频事件进行节流/防抖。利用DevTools等工具进行诊断和验证优化效果。
动画02 浏览器的重绘与重排以及动画性能优化
多啦的博客
02-02 1258
浏览器渲染过程 大体上，浏览器渲染过程分为5步 处理HTML生成DOM树 处理CSS生成样式树 将DOM树和样式树合并为Render树（渲染树） 对Render树进行布局计算，生成盒模型 将信息绘制到屏幕的真实节点 重排（reflow） 当DOM变化影响了元素的几何属性（比如宽、高），浏览器需要重新计算元素几何属性 导致渲染树发生了改变，需要重新构造Render树 重绘（r
前端知识点分析——重排和重绘
sophia_little的博客
03-19 9994
1.document.write和innerHTML的区别document.write重排整个页面 innerHTML可以重绘页面的一部分2.浏览器运行机制1、构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；2、构建渲染树（construct）：解析对应的CSS样式文...
浏览器渲染机制、重绘、重排
HUIDEV_的博客
08-24 273
渲染 网页在生成时，渲染次数 >= 1，因为在用户访问的过程中，会不断重新渲染，重新渲染有两种形式：重排与重绘 重排 概念： 当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。 理解： 重新生成布局，重新排列元素。使页面的结构发生改变，所以要重新排列。重排又称回流，就好比向河里扔了块石头，水面的涟漪扩散，周边的水流都受到了波及，不得不重排。 例子： 1. 添加或者删除可见的DOM元
详解浏览器的工作原理之重绘和重排
朽木自雕的博客
04-14 546
详解浏览器的工作原理之重绘和重排 css图层 浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。 在渲染DOM的时候，浏览器所做的工作实际上是： 1. 获取DOM后分割为多个图层 2. 对每个图层的节点计算样式结果 （Recalculate style--样式重计算） 3. 为每个节点生成图形和位置 （Layout--重排,回流） 4. 将每个...
浏览器渲染机制触发重排和重绘
初竹殇的博客
05-20 335
什么是Doctype及作用？ DTD（document type definition，文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式； DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错； HTML4.01 有个严格模式和传统模式。 浏览器渲染过程？ 构建DOM树(DOM tree)：从上到下解析HTML文档生
浏览器视角看——重绘、重排
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-07 1149
解决这个问题的一个方法是将所有行一次性添加到一个离屏容器中，再整体插入到DOM中，这样就可以显著减少重排的次数。接下来，你可以尝试在自己的项目中应用这些知识，看看是否能够进一步提升页面的性能表现。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在可能的情况下，使用CSS动画而不是JavaScript来控制元素的动画效果，因为CSS动画由浏览器优化，可以减少重排和重绘。重绘只涉及视觉效果的改变，不涉及元素位置的调整，因此它的性能开销相对较小。
浏览器的重绘repaints与重排reflows深入分析
12-13
主要原因是这些效果通常会产生一系列的浏览器重绘和重排，需要付出高昂的性能代价。那么，什么是浏览器的重绘和重排呢？二者何时发生以及如何权衡？如何在具体的开发过程中将重绘和重排引发的性能问题考虑进去？本文...
了解重排与重绘
10-16
当DOM树中的元素发生变化，浏览器需要更新渲染树以反映这些变化，这个过程就涉及到了重排和重绘。 **重排（Reflow）**是指当元素的几何属性，如宽度、高度、位置等发生变化时，浏览器需要重新计算元素及其子元素的...
浏览器渲染原理，重绘与重排
weixin_30555125的博客
12-03 95
前端开发操作DOM会引起浏览的重绘和重排 浏览器向服务器发送请求，然后解析html生成DOM（文档对象模型），css生成CSSOM（css对象模型），2者生成渲染树，渲染树上的节点有了样式。当渲染树构建完成，渲染树的节点就放置到了正确位置。根据渲染树上的样式绘制出页面 重绘是元素外观的改变，不会改变元素在文档流的位置 列入color visibility 重排则是渲染树重新计算 　　引...
初探浏览器渲染原理
止水聊技术
11-24 257
关于浏览器内容大部分参考自 解锁浏览器背后的运行机制[1]浏览器内核可以分成两部分：渲染引擎（Layout Engine 或者 Rendering Engine）和 JS...
浏览器渲染的流程---关键渲染路径
Garlen20o的博客
06-28 316
从MDN对关键渲染路径定义开始，并展开对渲染流程的分析理解，引出了DOM与CSSOM，JS三个在解析渲染时的关系，带出了脚本标签的两个属性derfer和async，得到两个的区别。最后对浏览器渲染的流程有个初步认识...
浏览器加载、解析、渲染的过程
yjreset的博客
03-09 292
浏览器加载、解析、渲染的过程 提高网站的访问速度 how browsers work
你应该要知道的重绘与重排
weixin_34242509的博客
12-10 554
转自你真的了解回流和重绘吗 回流和重绘可以说是每一个web开发者都经常听到的两个词语，我也不例外，可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享，所以对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。 浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到...
详细理解重绘与回流/重排的过程
开心大表哥
05-21 7516
前言：重绘与回流是由于浏览器的再次渲染所引起的一个话题，所以我们需要先了解浏览器的渲染过程； 一个前端页面无非就是有hmtl、css、JavaScript组成的。 通常来说，渲染引擎会解析HTML文档来构建DOM树，与此同时，渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树。接下来，DOM树和CSSOM树关联起来构成渲染树（RenderTree），这一过程称为Attachment。然后浏览...
浏览器运行机制详解和回流和重绘
weixin_43613849的博客
05-12 962
1、进程与线程 可以这样理解： - 进程是一个工厂，每个工厂有其独立的资源。 - 线程是工厂中的工人，可能只有一个，可能有好多个。多个工人协同完成工作。工人共享工作资源。 回到硬件上来理解： - 工厂的资源 -> 系统分配的内存。 - 工厂之间相互独立 -> 进程之间相互独立，也即进程分配到的内存相互独立，无法读到对方内存中的数据。 - 一个工厂有一个或多个工人 -> 一个线程中有一个或多个线程。 - 多个工人协同完成工作 -> 进程中多个线程协同完成工作。即线程之间能
浏览器渲染原理&&重绘和回流
Jancy的博客
03-24 4307
浏览器渲染原理浏览器向服务器请求到了HTML文档后便开始解析，产物是DOM（文档对象模型），如果有css，会根据css生成CSSOM（CSS对象模型），然后再由DOM和CSSOM合并产生渲染树，有了渲染树，知道了所有节点的样式，便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局。最后把节点绘制到浏览器上。 css的加载和解析不会阻塞html文档的解析 css的解析会阻塞js的执行，
浏览器渲染机制 （二）浏览器主进程-浏览器内核-浏览器渲染流程
qq_43952245的博客
12-07 3699
文章目录浏览器主进程（Brower进程）和浏览器内核（浏览器渲染进程）的通信过程浏览器内核（渲染进程）中线程之间的管理GUI渲染线程与JS引擎线程互斥JS阻塞页面加载css加载是否会阻塞dom树渲染WebWorker,JS的多线程？WebWorker与SharedWorker总结浏览器渲染流程load事件与DOMContentLoaded事件的先后普通图层和复合图层如何变成符合图层（硬件加速）ab...
浏览器的渲染机制（一）
hancao97的博客
01-02 986
浏览器的渲染机制（一） 作为一名前端工程师，我们必须时刻保持高度的好奇心与求知欲，提出问题并去探索其原因或机制。 于是，我抛出一个问题，浏览器是如何将“没有趣味”的代码变成“五彩缤纷”的网页的？ 如下图，我将介绍，这个 rendering 的过程。 CONTENT 首先，我们要明确一个概念，我们我指的网页内容是什么，content负责的是哪个区域，从架构角度出发，Chromium c++代码库中的 “content”的命名空间所负责的是图片中红框里面的所有内容。即，标签栏，地址栏，导航...
请详细解释浏览器的渲染机制，特别是关于重绘和重排的过程。
最新发布
03-01
<think>嗯，用户让我详细解释浏览器的渲染机制，特别是重绘和重排的过程。首先，我需要确保自己对这一块的理解是正确的。记得浏览器渲染页面有几个主要步骤，比如解析HTML和CSS，构建DOM树和CSSOM树，然后合并成渲染树，再布局和绘制。不过具体每个步骤的细节可能需要再回忆一下。 重绘和重排这两个概念经常被提到，但有时候容易混淆。重排应该涉及到布局的改变，也就是几何属性的变化，比如宽度、高度或者位置变化，这样浏览器需要重新计算元素的位置和大小，这个过程比较耗费性能。而重绘则是当元素的外观发生变化，但不影响布局时发生的，比如颜色、背景色的改变，这时候不需要重新布局，直接绘制即可。不过具体哪些属性会触发重排，哪些触发重绘，可能需要进一步确认。 另外，用户可能想知道如何优化，减少重绘和重排的次数。比如合并多次DOM操作，使用文档碎片（DocumentFragment），或者使用CSS的transform属性来做动画，因为这些不会触发重排。可能还需要提到现代浏览器的渲染队列机制，它们会批量处理重排，但某些操作会强制刷新队列，比如获取布局信息（offsetTop等），这时候需要注意避免在修改样式后立即读取这些属性。 还有，CSS的某些属性如transform和opacity可以利用GPU加速，这样可以在合成层进行处理，避免重绘和重排，提升性能。这也是优化的一部分。另外，隐藏元素（display:none）进行操作后再显示，可以避免中间状态的重排，也是一个技巧。 不过，我需要确保这些信息是准确的，可能需要回顾一下浏览器渲染流程的具体步骤，以及各个阶段触发的条件。比如，在渲染树构建完成后，布局阶段计算每个节点的位置和大小，绘制阶段填充像素。当元素变化影响到布局时，会触发重排，进而导致后续元素也需要重新布局，这称为“回流”。而如果只是不影响布局的变化，比如颜色，就只需要重绘。 用户可能在实际开发中遇到性能问题，比如频繁操作DOM导致页面卡顿，这时候了解重绘和重排的机制就能帮助优化代码。比如使用class一次性修改多个样式，而不是逐个修改，或者将元素脱离文档流（比如使用绝对定位），这样它的变化不会影响其他元素，减少重排的范围。 总结起来，我需要分步骤解释渲染流程，明确重排和重绘的定义，触发条件，以及优化方法。可能还需要举一些例子，比如修改width会触发重排，修改color触发重绘，使用transform则不会触发重排。同时，强调两者对性能的影响，尤其是重排的开销更大，应该尽量减少。</think>浏览器渲染机制是通过多阶段流水线将HTML/CSS代码转换为可视化页面，其中重绘(Repaint)和重排(Reflow)是影响性能最关键的环节。以下是完整技术解析： $$ \begin{aligned} &\text{关键渲染路径} \\ &1. \text{解析HTML构建DOM树} \rightarrow \text{Parse HTML} \\ &2. \text{解析CSS构建CSSOM树} \rightarrow \text{Parse CSS} \\ &3. \text{合并成渲染树(Render Tree)} \rightarrow \text{Attachment} \\ &4. \text{布局计算(Layout)} \rightarrow \text{Reflow阶段} \\ &5. \text{绘制(Painting)} \rightarrow \text{Repaint阶段} \\ &6. \text{合成显示(Composite)} \rightarrow \text{GPU加速} \end{aligned} $$ **重排(Reflow)触发条件**： - 几何属性变更：$width$, $height$, $padding$, $margin$等 - 布局相关操作：添加/删除DOM节点、修改$display:none$ - 获取布局信息：$offsetTop$, $scrollHeight$等强制同步布局 **重绘(Repaint)触发条件**： - 非几何样式变更：$color$, $background$, $visibility$等 - 不改变元素在文档流中的位置 **性能对比**： $$ \text{重排成本} \gg \text{重绘成本} \gg \text{合成层操作} $$ **优化策略**： 1. 使用`documentFragment`批量DOM操作 2. 避免逐行读取布局属性（强制同步布局） 3. CSS优化： ```css .box { transform: translateZ(0); /* 启用GPU加速层 */ will-change: transform; /* 预声明变化类型 */ } ``` 4. 使用`requestAnimationFrame`集中样式变更 5. 复杂动画使用`position: absolute`脱离文档流 **现代浏览器优化机制**： - 渲染队列：浏览器会合并连续的重排请求 - 增量重排：仅重新计算受影响区域(Dirty Rect) - 合成层：通过`transform`和`opacity`实现独立光栅化 **调试工具**： - Chrome DevTools > Performance面板可捕获详细渲染过程 - Rendering面板开启`Paint flashing`高亮重绘区域 通过理解这些机制，开发者可以编写出性能提升$3\text{x}$以上的Web应用，特别是在处理动态内容更新时效果显著。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值