display：none和visibility：hidden 以及repaint（重绘）和reflow（渲染）

最新推荐文章于 2022-04-23 13:21:31 发布
最新推荐文章于 2022-04-23 13:21:31 发布
阅读量2.6k 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39224105/article/details/106175774
版权

display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间

repaint(重绘)

repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,backgroundcolor，不会影响到dom结构渲染。

reflow(渲染)

与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。
所以display:none才会产生reflow visibility:hidden只会出发repaint

十贰_
关注
visibility:hidden；与display:none；的区别和渐进增强与优雅降级的区别
wx112728的博客
03-16 1768
1.作用不同 visibility:hidden; 将元素隐藏，但是在网页中的位置不会被取缔。 display:none; 将元素的显示设为无，在网页中不占任何位置。 2.定义不同 visibility 属性指定一个元素是否可见的 display 这个属性用于定义建立布局时元素生成的显示框类型 visibility:hidden;会触发重绘（repaint） display:none;会触发回流（reflow） 重绘不一定回流，回流一...
JavaScript中的Repaint和Reflow用法详解
10-23
值得注意的是，display:none会触发Reflow，而visibility:hidden只会触发Repaint，因为前者改变元素布局而后者不改变。此外，对DOM节点的属性值进行循环操作是一个性能低下的实践，因为每次读写操作都可能导致浏览器...
面试题16：重绘（reflow）和回流（repaint）,visibility: hidden 和 display: none的区别
qq_51066068的博客
04-23 3777
面试官：请说一下什么是重绘和回流和visibility: hidden 和 display: none的区别 回流与重绘 概念 当JS对页面的节点进行操作时，就会产生回流或重绘 回流/重排（reflow）： 因为节点的尺寸、布局、显示(display: none/block)改变这些属性改变的时候，渲染树中的一部分或者全部需要重新构建，这种重新构建的现象就是回流。一个页面至少有一次回流。 重绘（repaint）： 回流时，浏览器会看重新构建受影响部分的渲染树，只要渲染树一被改变或重新构建，就一定会.
回流(reflow)与重绘(repaint)
weixin_33691700的博客
08-26 224
回流(reflow)与重绘(repaint) 很早之前就听说过回流与重绘这两个名词，但是并不理解它们的含义，也没有深究过，今天看了一套网易的题目，涉及到了这两个概念，于是想要把它们俩弄清楚。。。 一、概念 首先我们要明白的是，页面的显示过程分为以下几个阶段： 1、生成DOM树(包括display:none的节点) 2、在DOM树的基础上根据节点的集合属性(margin,padding,w...
reflow与repaint
p13132312312的博客
10-10 352
重流和重绘 重流就是页面的布局发生了彻彻底底的改变，元素位置或者宽高发生了变化，整个页面需要重新布局，这个时候就需要reflow。 重绘可能就是只绘一小部分，而不会绘制全部整个页面。 Repaint——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。 Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的...
visibility:hidden与display:none区别（关于重绘和渲染）
qq_34893429的博客
03-11 8158
visibility:hidden会保留元素的空间，仅为视觉上的完全透明（看不见、摸得着） display:none不为被隐藏的对象保留其物理空间（看不见摸不着）何为重绘（repaint） repaint发生的时候，元素的外观会被改变，且在没有改变布局的情况下发生，如改变： outline、visibility、backgroundcolor 不会影响到dom结构的变
回流(reflow)、重绘(repaint)
weixin_41643133的博客
02-26 447
一、概念 首先我们要明白的是，页面的显示过程分为以下几个阶段： 生成DOM树(包括display:none的节点) 在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树(不包括display:none，head节点，但是包括visibility:hidden的节点) 在render树的基础上继续渲染颜色背景色等样式 reflow:...
css元素隐藏原理及display:none和visibility:hidden
09-22
2. 回流与渲染：当元素被设置为display:none时，可能会引起浏览器重新计算和布局页面的其他元素，这被称为reflow和repaint，从而影响页面性能。而visibility:hidden不涉及布局的改变，仅影响元素的渲染，性能影响较...
谈谈CSS隐藏元素(display,visibility)的区别
12-03
- **回流与渲染**：当元素的`display`属性改变时，会引起浏览器的重排（reflow）和重绘（repaint），因为该元素及与其相关的元素都需要重新计算位置和大小。 - **株连性**：`display: none`的株连性很强，如果一个...
回流(reflow)和重绘(repaint)
俗人
08-25 547
回流(reflow)与重绘(repaint) 一、概念 首先我们要明白的是，页面的显示过程分为以下几个阶段： 生成DOM树(包括display:none的节点) 在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树(不包括display:none， head节点，但是包括visibility:hidden的节点) 在render树的基础上继续渲染颜色背景色等样式 reflow:当render树的一部分或者全部因为大小边距等问题发生改变而
display：none与visibility：hidden
qq_43982131的博客
03-04 228
display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint
display:none和visibility:hidden的区别
小小马的博客
09-07 890
display:none 和 visibility:hidden的区别一、空间占据 dispaly:none 隐藏后的元素不占据任何空间 visibility:hidden 隐藏的元素空间依然存在 二、回流与重绘 display:none 隐藏产生重绘 ( repaint ) 和回流 ( relfow ) visibility:hidden 不会产生重绘和回流 三、株连性 一旦父元素使用 displ
display: none；和visibility:hidden;的区别
sleepwalker_1992的专栏
05-23 1589
置换元素display: none；display: none；不为被隐藏的对象保留其物理空间；visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明；display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间 repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况...
reflow（回流）和repaint（重绘）及其优化
ClaireKe的博客
05-11 7790
为什么不能用CSS通配符 *，CSS选择器层叠为什么不能超过三层，CSS为什么尽量使用类选择器，书写HTML为什么少使用table，为什么结构要尽量简单-DOM树要小…. 对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow； 当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定
display和visibility的区别以及回流和重绘
qq_41681425的博客
07-12 9515
display:none会脱离文档流，不占据页面空间；visibility:hidden,只是隐藏内容，并没有脱离文档流，会占据页面的空间。讲述回流以及重绘之前需要先了解页面在文档加载完成之后到完全显示中间的过程：1.根据文档生成DOM树(包括display：none的节点)2.在DOM树基础上根据节点的几何属性(margin/padding/width/height等)生成render树(不包括...
浏览器渲染页面原理，reflow、repaint及其优化
爱丽丝漫游前端小世界
04-10 2078
浏览器的主要组件包括：1.      用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的你请求的页面外，其他显示的各个部分都属于用户界面。2.      浏览器引擎 - 在用户界面和渲染引擎之间传送指令。3.      渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。4.      网络...
display:none;和 visibility: hidden;知多少
骆天一
10-20 510
关于如何解决块级元素消失底下的元素自动上移的问题
Reflow和Repaint的基本认识和优化
michael8512的博客
08-18 422
1. 什么的Repaint和Reflow 浏览器解析大概的工作流程： 这张图应该很好理解，归纳为四个步骤： 1)  解析HTML以构建DOM树：渲染引擎开始解析HTML文档，转换树中的html标签或js生成的标签到DOM节点，它被称为——内容树； 2)  构建渲染树：解析CSS（包括外部CSS文件和样式元素以及JS生成的样式），根据CSS选择器计算出节点的样式，创建另一个树——渲染
今日头条2017秋招前端工程师笔试试卷
Bidding
08-16 1382
1、变量a是一个64位有符号的整数，初始值用16进制表示为：0Xf000000000000000； 变量b是一个64位有符号的整数，初始值用16进制表示为：0x7FFFFFFFFFFFFFFF。 则a-b的结果用10进制表示为多少？（） 正确答案: C 1 -(2^62+2^61+2^60+1) 2^62+2^61+2^60+1 2^59+(2^55+2^54+…+2^2+2^1+2
display:none 和 visibility:hidden
最新发布
07-17
display:none和visibility:hidden的区别在于： display:none会将元素完全隐藏，不占据任何空间，即使在HTML代码中也不会显示出来；而visibility:hidden则是将元素隐藏，但仍然占据空间，即在HTML代码中仍然存在，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值