display和visibility的区别以及回流和重绘

display:none会脱离文档流,不占据页面空间;

visibility:hidden,只是隐藏内容,并没有脱离文档流,会占据页面的空间。

讲述回流以及重绘之前需要先了解页面在文档加载完成之后到完全显示中间的过程:

1.根据文档生成DOM树(包括display:none的节点)

2.在DOM树基础上根据节点的几何属性(margin/padding/width/height等)生成render树(不包括display:none、head节点但会包含visibility:hidden节点)

3.在render树基础上进行一步渲染包括color,outline等样式

reflow:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流。

repaint:当元素的一部分属性发生变化,如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。

display:none会引起回流和重绘,visibility:hidden会引起重绘

Original: https://www.cnblogs.com/sexintercourse/p/16538670.html
Author: 漫思
Title: display和visibility的区别以及回流和重绘

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/553420/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 【编程教室】Python绘制冬奥吉祥物“冰墩墩”

    大家好,欢迎来到 Crossin的编程教室 ! 这两天,随着北京冬奥会的开幕,吉祥物”冰墩墩”可是火出了圈,多少人排长队都买不到。据说甚至有人把价格炒到了几…

    技术杂谈 2023年7月24日
    077
  • 最简单的学习往往是最无效的

    想必大家都是从学生时代过来的,或者现在还处于学生时代。 在学生时代,大家有没有见过,有的同学非常非常努力,上课听得非常认真,笔记也记录得非常认真,同时各种颜色和标记把书上画得密密麻…

    技术杂谈 2023年6月22日
    055
  • 关于连接服务器redis的教程

    第一步:下载RedisDesktopManager 这个百度一搜就有了,但是现在的版本ssh用不了建议找可以用的版本,这个百度,懂得都懂。 第二步:服务器宝塔redis设置 在配置…

    技术杂谈 2023年7月25日
    066
  • 数字数组

    3、【剑指Offer学习】【面试题03:找出数组中重复的数字】 4、【剑指Offer学习】【面试题04:二维数组中的查找】 11、【剑指Offer学习】【面试题11:旋转数组的最小…

    技术杂谈 2023年6月21日
    071
  • 「周记」拓扑排序

    拓扑排序的英文名是 Topological sorting。拓扑排序要解决的问题是给一个图的所有节点排序。拓扑排序的目标是将所有节点排序,使得排在前面的节点不能依赖于排在后面的节点…

    技术杂谈 2023年7月24日
    052
  • 都是中文用户名惹的祸~

    进入公司遇到的第一个棘手BUG; 在数据库连接和配置都无误的前提下,服务怎么都启动不了,控制台报如下的错: 在经过百度的检索以及老员工的提点后,最终确定了问题所在; 都是中文用户名…

    技术杂谈 2023年7月23日
    065
  • 在 max环境下 下载、安装、运行 Antlr4

    1. 下载安装 ##1. 切目录 cd /usr/local/lib ##2. 下载jar包 wget https://www.antlr.org/download/antlr-4…

    技术杂谈 2023年7月11日
    070
  • Flink CDC 与Hudi整合

    之前写过Flink CDC sink 到 Iceberg中,本篇主要实践如何CDC到hudi中. 什么是hudi? Hudi is a rich platform to build…

    技术杂谈 2023年7月10日
    0101
  • Python-装饰器的入门讲解

    小白在学习装饰器时,会遇到一些地方不太理解或者不太清楚,这是因为一开始你就直接撸装饰器的缘故,那么怎样才能将装饰器理解并且弄懂呢?所以在学装饰器之前必须要弄懂函数的嵌套以及闭包,接…

    技术杂谈 2023年7月25日
    072
  • 基类和派生类之间的同名函数处理方式

    【 基类和派生类之间的同名函数处理方式】 class A { public: void fn() {} void fn(int a) {} }; class B : public …

    技术杂谈 2023年5月31日
    095
  • SpringBoot中通过AOP整合日志文件

    1.SpringBoot中通过AOP整合日志文件 1. 导入相关的依赖 org.springframework.boot spring-boot-starter org.sprin…

    技术杂谈 2023年6月21日
    074
  • 单例模式的七种写法

    第一种(懒汉,线程不安全): 这种写法lazy loading很明显,但是致命的是在多线程不能正常工作。 第二种(懒汉,线程安全): 这种写法能够在多线程中很好的工作,而且看起来它…

    技术杂谈 2023年5月31日
    079
  • 快速排序

    题目链接 快速排序板子题,练习快速排序的代码,下面是排序算法的一些对比 快速排序的思路图 快速排序的代码 #include using namespace std; const i…

    技术杂谈 2023年6月21日
    084
  • 一文搞懂│php 中的 DI 依赖注入

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    技术杂谈 2023年7月11日
    064
  • Python3中datetime不同时区转换介绍与踩坑

    最近的项目需要根据用户所属时区制定一些特定策略,学习、应用了若干python3的时区转换相关知识,这里整理一部分记录下来。 下面涉及的几个概念及知识点: GMT时间:Greenwi…

    技术杂谈 2023年6月21日
    063
  • HTML网页中,img标签和Ajax请求是支持跳转(Redirect)的

    我们知道在HTTP请求中,状态码301和302代表跳转,也叫重定向(Redirect)。 301-Moved Permanently:永久移动。请求的资源已被永久的移动到新URI,…

    技术杂谈 2023年5月31日
    0110
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球