web页面回流与重绘

最新推荐文章于 2024-08-09 06:19:12 发布
最新推荐文章于 2024-08-09 06:19:12 发布
阅读量298 收藏
点赞数
分类专栏： js 学习 经验总结 文章标签： 回流重绘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Garrettzxd/article/details/87778279
版权
学习 同时被 3 个专栏收录
40 篇文章 0 订阅
订阅专栏
js
34 篇文章 1 订阅
订阅专栏
经验总结
11 篇文章 1 订阅
订阅专栏

当浏览器必须重新处理和绘制部分或全部页面时，回流就会发生，例如当一个交互式站点更新后，前面这段话是在MDN上对回流的表述，那么这段话啥意思呢，实际上就是当元素的内容、结构、位置、尺寸等发生变化时会引起回流，而回流必定会引起重绘

  1. 页面初始化
  2. DOM树发生变化（增删节点）
  3. render树变化（如padding变化）
  4. 窗口resize

以上都会导致回流的产生

Garrettzxd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浏览器的渲染过程、回流和重绘及优化
codewhy的博客
09-09 546
回流和重绘可以说是每一个web开发者都经常听到的两个词语，看了一些博客和书籍，整理了一些内容并且结合自己的体会，写了这篇文章，希望可以帮助到大家。 文章目录1. 浏览器的渲染过程1.1 渲染过程1.2 生成渲染树2. 回流和重绘2.1 回流2.2 重绘2.3 何时发生回流重绘3. 浏览器的优化机制4. 减少回流和重绘4.1 最小化重绘和重排4.2 批量修改DOM4.3 避免触发同步布局事件4.4 对于复杂动画效果,使用绝对定位让其脱离文档流4.5 css3硬件加速（GPU加速） 1. 浏览器的渲染过程 1.
了解及优化页面回流和重绘
zoro的博客
03-12 499
题记：web开发经常会听到回流和重绘这两个词，最近看了一些文档，简单记录下自己对这两个概念的理解以及怎么尽可能避免回流和重绘，提高页面渲染速度。 概念 回流： 浏览器的渲染过程中，计算DOM节点在视口内的显示/隐藏，确切位置和大小，这个计算的阶段就是回流。 重绘 是一个元素外观的改变(自身的宽高，布局，及显示或隐藏没有改变)所触发的浏览器行为，例如改变vidibility、backgr...
高性能WEB开发 - 页面呈现、重绘、回流
kopolwu的专栏
12-09 614
<br />页面呈现流程 <br /><br />     在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。       <br /><br />     1.  浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象(<html> tag)。dom树就是我们用fir
回流和重绘
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-09 837
本文将深入探讨回流（reflow）和重绘（repaint）这两个概念，它们是页面渲染过程中两个关键的性能瓶颈点。通过上述的内容，我们应该对回流和重绘有了更深入的理解。无论是对于初学者还是有经验的开发者来说，了解这些概念和技巧都将有助于编写出更加高效、流畅的Web应用。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，
页面重绘和回流
qq_32862143的博客
11-06 415
基础知识         要了解页面的重绘与回流，就得先对页面的呈现机制有所了解，下面流程图是浏览器对页面呈现的处理流程（不同的浏览器，可能会有些许不同）。 浏览器把获取到的html代码解析成一颗DOM树，每个标签（tag）都是DOM树的一个节点，根节点就是我们常用的document对象。DOM树主要包含：HTML...
页面的重绘与回流，以及如何优化
IT修真院：初学者转行到互联网的聚集地
11-19 166
页面的重绘与回流，以及如何优化 浏览器对页面的呈现流程 页面呈现流程 浏览器把取到的HTML代码解析成1个DOM树 HTML中的每个tag都是DOM中的1个节点 根节点是document对象 DOM树里包含了所有HTML标签 包括display:none;隐藏（因为DOM tree无法识别样式），还有用JS动态添加的元素等 浏览器把所有样式解析成样式结构体，解析过...
前端优化之页面回流与重绘
宇cccc
07-18 520
近日有一朋友去面试,遇到如下一道题目,要给一个dom元素循环添加一组dom元素,要放在循环内还是循环外, 代码如下:let div = document.getElementById('div') div.forEach(item=>{ // 循环给div append添加dom或者其他 }) // 一次append相信绝多数fe都知道要放在循环外 问: 为什么？ 答：因为
高性能WEB开发 页面呈现、重绘、回流。
10-29
在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。
前端之页面优化——回流(重排)与重绘
云中自有锦书
07-19 858
参考资料： https://blog.csdn.net/a419419/article/details/90402561 https://kb.cnblogs.com/page/169820/ https://www.cnblogs.com/chenyanlong/p/10551080.html 回流（reflow）与重绘（repaint），在性能优化的时候，经常会提起，因为涉及到浏览器底...
前端性能优化—回流与重绘
2401_84097696的博客
04-22 920
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。先得哦。**[外链图片转存中…(img-evox60RQ-1713722207644)][外链图片转存中…(img-zWOYoBvw-1713722207644)]
浏览器从URL输入到页面展现到底发生了什么？ 回流、重绘
南栀的博客
11-16 1025
浏览器从URL输入到页面展现到底发生了什么？
页面的回流与重绘
主要领域：前端开发
05-16 5753
页面呈现的具体过程 Step1 浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。 DOM树里包含了所有HTML标签，包括使用了display:none隐藏的元素，还有用JS动态添加的元素等。 Step2 浏览器把所有样式（用户定义的CSS和用户代理）解析成样式结构体（CSSOM树），在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而FF会去掉_开头的样式。 Step3 DOM树和样式结构体（
Web页面回流与重绘
KysonLai的博客
08-20 575
回流（reflow）： 当HTML结构发生变化时，浏览器都需要重新计算一遍最新的DOM结构，重新对当前页面进行渲染 重绘（repaint）： 如果只是改变某个元素的背景色、文字颜色、边框颜色等，而不影响它周围或内部布局的属性，浏览器只需重新渲染当前的元素即可 回流是不可避免的，我们可以通过以下的方式减小回流带来的影响： 1.css中避免使用不必要的复杂选择器，特别是后代选择器，因为这会消...
页面的回流(reflow)和重绘(repaintd)
weixin_42011096的博客
04-17 507
1.首先需要了解的是页面渲染过程(如下图所示):2.回流和重绘的概念:回流:浏览器重新构建render tree的过程重绘:浏览器根据render tree重新绘制界面的过程3.引起回流的操作当改变界面已有元素的位置,大小(width,height,border,padding,margin,content),或者新添加元素的时候,都会引起回流;每个页面至少有一次回流,也就是页面刚开始加载的时候4...
页面优化——重绘和回流
weixin_47450807的博客
03-18 2219
一、写在前面 页面优化在面试的过程中经常遇到的问题，今天就来总计一下重绘和回流的问题。 二、重绘和回流是什么 我们都知道一个页面从加载到完成，首先是构建DOM树，然后根据DOM节点进行几何布局形成render树(渲染树)，当渲染树构建完成后，页面就根据DOM树开始布局，渲染树也根据设置的样式渲染这些节点。 在这一过程中，比如我们删除DOM节点，修改一个元素的宽高，页面布局发生变化，DOM树也发生变化，那么肯定要重新构建DOm树，而DOM树和渲染树紧密相连，DOM树渲染完了，渲染树也会随之进行渲染，这个过程就
什么是页面的重绘和回流
weixin_43792396的博客
03-15 213
什么是页面重绘:页面重绘表示当前一个元素自身的高度,布局,以及显示或隐藏没有改变.而只是改变了元素的外观风格的时候,就会产生页面重绘.比如改变了元素的背景颜色,字体的颜色等 什么是页面回流:当渲染页面时候部分或者全部的元素因为改变了自身的宽高,布局,显示或者隐藏,或者元素内部的文字结构发生变化,需要重新构建页面的时候,会就就会产生 如何能够最小化重绘和回流? 1.需要对元素进行复杂操作时,可以先隐藏(display:none),操作完后再显示. 2. 如果需要创建多个DOM节点时,使用Document
什么是网页重绘与回流
玫瑰余香20100615的专栏
10-09 1065
页面呈现流程       在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。            1.  浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根
浏览器回流与重绘
天书笔记
02-12 1805
回流必定会发生重绘，重绘不一定会引发回流。重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。根据改变的范围和程度，渲染树中或多或少的部分节点需要重新计算，有些改变还会触发整个页面的重排。
理解Web性能：页面呈现、重绘与回流
"高性能WEB开发的关键点之一是理解页面呈现、重绘和回流的概念，这些因素直接影响到网页的性能和用户体验。" 在Web开发中，为了实现高性能的页面加载和展示，开发者需要深入理解页面从HTML和CSS代码到用户看到的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值