浏览器渲染过程及重绘重排

最新推荐文章于 2024-08-07 00:17:27 发布
最新推荐文章于 2024-08-07 00:17:27 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： HTML CSS 随记 文章标签： 浏览器渲染 重绘重排
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LL18781132750/article/details/81327578
版权
本文详细解析了浏览器从HTML和CSS生成DOM和CSSOM，到渲染树构建、布局与绘制的过程。重点讨论了重排与重绘的概念，指出两者之间的关系，并列举了触发重排和重绘的常见操作。为了提高性能，文章提供了多项优化建议，如集中DOM操作、缓存计算结果、利用离线DOM和使用虚拟DOM技术等。
摘要由CSDN通过智能技术生成

浏览器渲染过程

  1. HTML代码转化成DOM
  2. CSS代码转化成CSSOM（CSS Object Model）
  3. 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
  4. 生成布局（layout），即将所有渲染树的所有节点进行平面合成
  5. 将布局绘制（paint）在屏幕上

详情可以思考下面两张图：

 

重排和重绘（重新布局、重新绘制）

  • 修改DOM
  • 修改样式表
  • 用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）

"重绘"不一定需要"重排"，"重排"必然导致"重绘"

以下变量会导致浏览器重排、重新渲染。

  • offsetTop/offsetLeft/offsetWidth/offsetHeight
  • scrollTop/scrollLeft/scrollWidth/scrollHeight</
最低0.47元/天 解锁文章
xj-L
关注
专栏目录
网页性能 -- 浏览器的repaint和reflow
chrischeng9527的博客
06-27 689
#1.网页的生成过程 浏览器从下载文件到显示页面是一个很复杂的过程。 浏览器下载完页面中的所有组件 – HTML标记、JavaScript、CSS、图片 – 之后会解析并生成两个内部数据结构： 1. DOM树 -- 表示页面结构 2. 渲染树 -- 表示 DOM 节点在页面中如何显示（宽高、位置等） 下面我们来看一下网页具体的一个生成过程，如下图： HTML代码转...
浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]
weixin_34242819的博客
12-24 280
很多人都知道要减少浏览器的重排和重绘，但对其中的具体原理以及如何具体操作并不是很了解，当突然提起这个话题的时候，还是会一脸懵逼。希望大家可以耐着性子阅读本文，仔细琢磨，彻底掌握这个知识点！ 博客、前端积累文档、公众号、GitHub 网页生成过程： HTML被HTML解析器解析成DOM 树 css则被css解析器解析成CSSOM 树 结合DOM树和CSSOM树，生成一棵渲染树(Render T...
浏览器视角看——重绘、重排
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-07 931
解决这个问题的一个方法是将所有行一次性添加到一个离屏容器中，再整体插入到DOM中，这样就可以显著减少重排的次数。接下来，你可以尝试在自己的项目中应用这些知识，看看是否能够进一步提升页面的性能表现。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在可能的情况下，使用CSS动画而不是JavaScript来控制元素的动画效果，因为CSS动画由浏览器优化，可以减少重排和重绘。重绘只涉及视觉效果的改变，不涉及元素位置的调整，因此它的性能开销相对较小。
浏览器回流、重绘
田兴的博客
08-28 1685
1.浏览器重绘与重排的区别？ 重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素 重绘: 由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变 单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分 重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我
浏览器：重绘（repaint）与回流/重排（reflow）
snowball的博客
11-06 2552
3.1、理解回流/重排当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。回流：是布局或者几何属性需要改变就称为回流。
浏览器的重排和重绘
杨小白
02-24 309
参考文章：https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/ 浏览器的高层结构 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6oKA8Wm4-1614155685460)(https://cdn.nlark.com/yuque/0/2021/png/164495/1614094080989-341c3ee0-ed60-4cae-bd39-7e6d370890a5.png#align=lef.
浏览器的重绘repaints与重排reflows深入分析
12-13
浏览器从下载文档到显示页面的过程是个复杂的过程，这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别，但也有一定规则。简单讲，通常在文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树，之后根据DOM...
详解浏览器渲染页面过程
08-31
浏览器渲染页面的过程是网页开发中至关重要的一环，它涉及到用户从输入URL到看到完整页面的整个体验。下面我们将深入探讨这个过程的各个阶段，并提供一些优化页面性能的策略。 首先，浏览器接收到HTML文件后开始...
了解重排与重绘
10-16
当DOM树中的元素发生变化，浏览器需要更新渲染树以反映这些变化，这个过程就涉及到了重排和重绘。 **重排（Reflow）**是指当元素的几何属性，如宽度、高度、位置等发生变化时，浏览器需要重新计算元素及其子元素的...
浏览器重排与重绘详解
星河梦~的博客
12-19 2048
浏览器的渲染机制，对于重排与重绘的理解，以及减少重排与重绘的方法
浏览器的重绘、重排
xin_sleep的博客
02-22 426
浏览器提升页面性能，重绘，重排
浏览器渲染页面的过程，以及重绘
weixin_48196628的博客
10-05 235
回流 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。 重绘 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。 注意 回流必将引起重绘，而重绘不一定会引起回流。执行顺序：先回流后重绘。 回流何时发生： 当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流： 1
浏览器的重绘与重排
laokdidiao的专栏
05-09 546
在项目的交互或视觉评审中，前端同学常常会对一些交互效果质疑，提出这样做不好那样做不好。主要原因是这些效果通常会产生一系列的浏览器重绘(redraw)和重排(reflow)，需要付出高昂的性能代价。那么，什么是浏览器的重绘和重排呢？二者何时发生以及如何权衡？如何在具体的开发过程中将重绘和重排引发的性能问题考虑进去？本文期待可以部分解释以上三个问题。 　　浏览器从下载文档到显示页面的过程是个复杂
浏览器的重绘和重排
qq_38361229的博客
02-13 412
浏览器渲染页面的过程
浏览器重绘与重排
seimeii的博客
10-10 223
重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺⼨需要重新计算，表现为重新⽣成布局， 重新排列元素。 重绘: 由于节点的⼏何属性发⽣改变或者由于样式发⽣改变，例如改变元素背景⾊时，屏幕上的部分内容需要更 新，表现为某些元素的外观被改变单单改变元素的外观，肯定不会引起⽹⻚重新⽣成布局， 但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分 重排和重绘代价是⾼昂的，它们会破坏⽤户体验，并且让UI展示⾮常迟缓，⽽相⽐之下重排的性能影响更⼤，在两者⽆法避免的情况下，⼀般我们宁可选择代价更⼩的重
浏览器重绘和重排
万少博-FE
04-25 690
时间：2017年4月25日12:40:06     前端开发岗位是一个知识范围比较综合的一个岗位，需要了解和探究的知识很多，因此，可以从广度和深度两个方面着手，初级工程师以广度学习为主，高级工程师以深度研究为主。     浏览器引擎解析web项目的过程：下载资源（HTML、CSS、JS、图片），构建DOM树（页面结构），将HTML元素放置到文档流中正确的位置，构建渲染树（DOM节点样式
探索前端性能关键：重排与重绘详解
文章深入探讨了浏览器渲染流程中的关键环节，强调了重排和重绘在其中的作用，并提供了一些实用的优化策略，这对于前端开发者来说是一份宝贵的参考资源。通过学习和实践，开发者可以更好地控制页面性能，确保网页的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值