哇~渲染引擎的重绘与回流还可以这样理解

最新推荐文章于 2024-09-10 22:55:28 发布
最新推荐文章于 2024-09-10 22:55:28 发布
阅读量104 收藏
点赞数
分类专栏： vue 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46474841/article/details/124697928
版权

关于渲染引擎的重绘与回流介绍

image.png

在这里插入图片描述

  • 浏览器渲染解析页面完整流程

  • 1.先解析HTML，生成DOM树（重要步骤）

  • 2.后解析CSS，生成样式规则

  • 3.根据DOM树与样式规则，得到一颗渲染树Render Tree（重要步骤）

    • DOM树：只有结构没有样式
    • 渲染数：DOM树 + CSS样式 （可以理解为附加了样式的DOM树）

  • 4.渲染引擎开始工作，解析渲染树。

    • 这个步骤发生 回流(又称重排) : 计算节点的尺寸、结构、布局

  • 5.开始绘制

    • 这个步骤发生重绘 : 根据重排结果进行绘制页面

  • 6.渲染完成，呈现页面

  • 重要概念： 重排一定会引起重绘，但是重绘不一定引起重排

    • 引起重排操作：主要是修改了尺寸、布局（总结起来就是对布局产生印象）

      • 如：修改盒子的尺寸， 修改盒子位置、修改字体大小、边框等等影响盒子模型布局的都会导致重绘
      • 重排：会导致页面大面积重绘，甚至是整个页面重新绘制。（影响性能）

    • 引起重绘操作：不影响布局，只是影响盒子自身属性

      • 如：修改颜色，修改透明度等，对布局没有任何影响的

在这里插入图片描述

小阳阳i
关注
专栏目录
前端优化之回流（Reflow）与重绘（Repaint）
qq_45716607的博客
06-14 409
回流（Reflow）与重绘（Repaint） 开篇我们先对上上节介绍的回流与重绘的基础知识做个复习（跳读的同学请自觉回到上上节补齐 →_→）。 回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。 重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性
什么是回流与重绘 (Reflow & Repaint)
w候人兮猗
12-18 551
写在前面 在讨论今天的主角之前，我们要先了解一下浏览器的渲染机制。以Google,Firefox,Safari为例，Firefox 使用Geoko——Mozilla 自主研发的渲染引擎，Safari 和Chrome 都使用 webkit。 我们主要以 Webkit的主流程为例 浏览器使用流式布局模型 (Flow Based Layout) 解析HTML 生成 DOM 树 解析CSS 生成CSSOM 规则树 将 DOM 树与 CSSOM 规则树合并在一起生成渲染树Render Tree 根据渲染树遍历拿到每
浏览器回流、重绘
田兴的博客
08-28 1637
1.浏览器重绘与重排的区别？ 重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素 重绘: 由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变 单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分 重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我
重绘与回流(重排)
echo_Ae的博客
05-19 592
这时候你要先了解防抖、节流（可以看看我的文章） 防抖 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行（比如说我们一直点击按钮 只有不点击按钮之后1秒才会触发） 节流 指定时间间隔内只会执行一次任务（比如说我们一直点击按钮 1秒之后会触发一次 然后1秒之后又会触发一次......） 重绘与回流 重绘（repaint）：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少（元素背景颜色，字体颜色等的改变...
回流与重绘，以及解决回流与重绘的办法
m0_72089989的博客
07-19 1573
重绘当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如background-color，我们将这样的操作称为重绘。避免触发同步布局事件，我们在获取offsetwidth这类的属性时，可以使用变量将查询结果存起来，避免多次查询，每次对offset/scroll/client等属性进行操作时都会触发回流。回流任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。回流（重排）一定会触发重绘，重绘不一定会触发回流（重排）。...
回流和重绘
fujiaxu666的博客
02-08 5966
资料 你真的了解回流和重绘吗 - SegmentFault 思否 回流与重绘 - 掘金 (juejin.cn) 面试官：怎么理解回流跟重绘？什么场景下会触发？ | web前端面试 - 面试官系列 (vue3js.cn) 浏览器渲染过程 渲染页面：浏览器的工作原理 - Web 性能 | MDN (mozilla.org) 解析HTML，形成DOM树，当遇到非阻塞资源时，如图片则会继续解析，当遇到css文件时，也会继续解析。当时遇到了js文件（特别是没有defer和async）的阻塞渲染并停止HTML的
回流和重绘引发思考——DocumentFragment、Vue(keep-alive)
黄彪博客
07-09 1697
https://javascript.ruanyifeng.com/dom/node.html document.createDocumentFragment() keep-alive 虚拟DOM 回流和重绘 文章参考 document.createDocumentFragment() 详解回流和重绘及优化 问题描述 昨天同事培训Vue问了一个“回流”和“重绘”的问题，自己回答的是数据量过大导致浏览器渲染慢和卡顿的问题，Vue解决办法是使用虚拟DOM，缓存DOM组件，应该是没有给出准确答案，会后自己深入
13.怎么理解回流跟重绘？什么场景下会触发？
kleinBlue.的博客
11-07 308
一、是什么 在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘： 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制 具体的浏览器解析渲染机制如下所示： 解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进行回流(Lay..
CSSBox:纯Java HTML / CSS渲染引擎-开源
04-24
这个过程涉及DOM树的构建、CSS规则的解析、盒模型的计算以及重绘和回流等复杂步骤。 ### 2. DOM树与CSSOM树的构建 CSSBox首先构建DOM（文档对象模型）树，它将HTML文档解析为一系列相互关联的对象节点。接着，CSS...
前端基本功（四）：性能优化之你真的懂回流、重绘与合成层吗？
tianduantoutiao的博客
06-16 999
1. 页面的呈现流程 浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，...
前端面试题 | 什么是回流和重绘？它们的区别是什么？
热门推荐
weixin_48491416的博客
03-13 1万+
在了解回流和重绘之前我们可以先简单了解一下浏览器的渲染过程~ 1. 解析获取到的HTML，生成DOM树，解析CSS，生成CSSOM树 2. 将DOM树和CSSOM树进行结合，生成渲染树（render tree） 3.根据生成的渲染树，进行回流（Layout）,得到节点的几何信息（位置，大小） 4.重绘（Painting）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素（像素，背景色，外观等） 5.Displa...
前端进阶（二）重绘和回流
前端产品工程师
06-14 4188
今天结合项目说下重绘和回流。公司代码有个bug是这样的，上面两个容器都是用Highcharts画的图，但是页面重绘导致其中一个图形在第二次回流时超出了容器边界，页面下方是个表格。这个问题我折腾了大半天都没找到根源。最后才发现是下方表格由于有多余的边框，有段js逻辑代码是这样写的：function ClearBorderRight(source) { $("#" + source + "_u...
vue(1)--指令,回流与重绘---2019.5.20学习笔记
weixin_34198881的博客
05-20 1518
Vue作者:尤雨溪框架:MVVM渐进式的Javascript框架框架与类库的区别?举例:jquery好处:1.抹平了各个浏览器之间的差异2.链式操作DOM套餐框架:全家桶渐进式:vue只会包含核心语法,如需其他功能需要单独安装,例如:路由 vuex 前后端数据交互的方式什么是MVVM?mvc:model view controller 大多数会用在后端MVVM: 大多数用在前端M:m...
什么是回流和重绘？说一下你对回流和重绘的理解，如何优化？
前端报刊
05-18 681
面试题总结：什么是回流和重绘？说一下你对回流和重绘的理解，如何优化？
重绘与回流——影响浏览器加载速度
斩落千山
11-01 1609
对于重绘和回流的概念不是很清晰，查看了许多博文，在这里说一下自己的理解！！欢迎同学们与我交流。1、重绘概念重绘：在不改变布局和改变自身大小的情况下，对元素的背景颜色，字体样式样式进行设置，如：font-weight、color、background-color.2、回流的概念回流：因为元素的尺寸，布局，隐藏等改变而需要重新对其进行构建的操作（重构页面）。 包括： 1、对font-size,margi
前端性能优化--重绘与回流
weixin_33691700的博客
02-26 409
简介 实际案例 说明 performance:性能layers: 图层recalculate style: 重新计算样式paint:重绘layout：回流update layer tree: 更新图层树composite layers: 合并图层 translate代替top top <!DOCTYPE html> ...
vue计算属性，过滤器，侦听器，JS中的回流与重绘
m0_57923701的博客
09-11 616
重绘与回流(重排)的概念： 回流(重排): 当浏览器必须重新处理和绘制部分或全部页面时，回流就会发生 重绘: 不影响布局, 只是标签页面发生变化, 重新绘制 注意: 回流(重排)必引发重绘, 重绘不一定引发回流(重排) JSON的方法使用： JSON.stringify(JS数据) - 把JS数据序列化成JSON格式字符串 JSON.parse(JSON字符串) - 把JSON格式化字符串, 再转回成JS数据 v-for 更新监测 数组变更方法, 就会导致v-for更新, 页面更新...
CSS —— 界面布局
最新发布
m0_73557953的博客
09-10 1067
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"
HTML、CSS实现树状图
p_s_p的博客
09-09 577
【代码】HTML、CSS实现树状图。
CSS知识点：Web标准、display与visibility的区别及页面回流重绘
页面回流和重绘是浏览器渲染过程中的关键步骤。回流（reflow）发生在元素的尺寸、布局或隐藏状态改变，导致整个或部分渲染树需要重新构建，以反映这些更改。而重绘（repaint）则发生在元素的视觉样式改变但不影响...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值