详解重排重绘

详解重排重绘

  • 前言
  • 页面渲染
    • 页面渲染
  • 重排
  • 重绘
  • 重排重绘哪个更耗时间
  • 避免重排重绘
  • 发生重排重绘实例

前言

本文主要讲解在页面加载成功后可能因为页面中DOM元素样式或布局被修改从而引发的重排重绘进行一个讲解,那么好,本文正式开始.

页面渲染

因为重排重绘这两个概念其实是基于页面渲染这个层面进行一个拓展和延申,那么我们在讲解重排重绘前,先了解以下页面是如何渲染的,这里不对URL、DNS解析、三次握手四次挥手做深入展开,只针对渲染做讲解。

页面渲染

  1. 解析HTML,并把解析到的HTML渲染到DOM树,包括元素和布局都解析上去。
  2. 解析CSS,就是将CSS解析到CSSOM(规则)树。
  3. 将HTML树和CSS树构建成一个render(呈现)树。
  4. 布局:根据render树上各个DOM元素上的位置,在页面上进行对应的布局。
  5. 绘制:遍历render树进行页面元素的进一步的绘制。

那么了解这些,接下来讲解重排重绘的概念以及影响就方便很多了。

重排

概念:页面布局发生影响,比如某个在页面上已经呈现且在DOM树中的元素,被删除了,同时DOM树也没有这个节点了,那么就会进行重排操作。

重绘

概念:页面样式发生影响,比如某个元素的颜色发生变化了,这时候浏览器就会自动进行重绘的操作。

重排重绘哪个更耗时间

重排要比重绘更耗时间,因为在页面渲染模块我们发现,布局是要比绘制更耗时间,因为重排需要涉及到更多的关于遍历DOM树深度等的计算操作,而重绘省去了布局和分层阶段,所以重绘的效率更高

避免重排重绘

当我们频繁的去让页面处在一个动态的状态下,那么就会导致不断的去自动发生重排重绘的操作,那么就会对性能造成影响,所以在日常开发中,应该尽量避免重排重绘操作的出现。

发生重排重绘实例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width:100px;height:100px;border:1px solid gray;}</style></head><body><div id="chongpai"></div><br><button onclick="btn1()">点击重排</button><div id="chonghui"></div><br><button onclick="btn2()">点击重绘</button><script>let cp=document.getElementById('chongpai')let ch=document.getElementById('chonghui')function btn1(){cp.style.display="none"}function btn2(){ch.style.backgroundColor='red'}</script></body>
</html>

默认图:
在这里插入图片描述
点击重排按钮,调用重排:
在这里插入图片描述
在上述按钮中,我们创建了一个方法,这个方法控制div元素,让上面div元素的display为none,同时displaynone就是把渲染树上的这个div进行去除,那么就会导致重排效果出现。
点击重绘:
在这里插入图片描述
点击重绘后我们发现,颜色发生改变,那么如果样式发生变化时,就会引起重绘。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/170555.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于C#实现三元组

我们知道矩阵是一个非常强大的数据结构&#xff0c;在动态规划以及各种图论算法上都有广泛的应用&#xff0c;当然矩阵有着不足的地方就是空间和时间复杂度都维持在 N2 上&#xff0c;比如 1w 个数字建立一个矩阵&#xff0c;在内存中会占用 1w*1w1 亿的类型空间&#xff0c;这…

01 _ 高并发系统:它的通用设计方法是什么?

我们知道&#xff0c;高并发代表着大流量&#xff0c;高并发系统设计的魅力就在于我们能够凭借自己的聪明才智设计巧妙的方案&#xff0c;从而抵抗巨大流量的冲击&#xff0c;带给用户更好的使用体验。这些方案好似能操纵流量&#xff0c;让流量更加平稳地被系统中的服务和组件…

前端路由hash和history的六大区别

前端路由hash和history的区别 前言谁的URL有#回车刷新时hash和history变化 谁支持低版本浏览器hash不会重新加载页面谁有历史记录谁需要后台配置hash缺点 前言 本文主要讲解hash和history路由的区别&#xff0c;那么好本文正式开始。 谁的URL有# 路由Hash的地址上有#,而hist…

阻塞队列

文章目录 阻塞队列BlockingQueue实现阻塞队列生产者消费者模型 阻塞队列 阻塞队列是什么呢&#xff1f; 阻塞队列是一种特殊的队列&#xff0c;满足队列的基本要求 - 先进先出。同时阻塞队列使一种线程安全的数据结构。不过阻塞队列相较于普通队列也有着它的特殊之处。 线程安…

HTML新手入门笔记整理:HTML常用标签总结表

HTML常用标签 标签 英文全称 语义 div division 区块(块元素) span span 区块(行内元素) p paragraph 段落 ol ordered list 有序列表 ul unordered list 无序列表 li list item 列表项 dl definition list 定义列表 dt definition term 定义术语 d…

思维模型 波纹效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。小变化&#xff0c;大影响。 1 波纹效应的应用 1.1 波纹效应在市场中的应用 2008 年&#xff0c;美国金融危机爆发&#xff0c;导致全球经济陷入衰退。这场危机的起因是美国房地产市场的崩…

GIS入门,开源 JavaScript二维地图引擎OpenLayers介绍

VueOpenLayers中文教程推荐&#xff0c;不同于OpenLayers官方文档使用htmljs原生原生教程&#xff0c;博主专栏包含大量vue整合案例和实际开发案例&#xff0c;非常适合地图开发小白快速入门。 vue整合OpenLayers6入门教程&#xff1a; 《VueOpenLayers入门教程汇总目录》vue整…

Linux操作系统之apt常用命令记录

文章目录 apt 命令apt 语法apt 常用命令列出所有可更新的软件清单命令升级软件包列出可更新的软件包及版本信息升级软件包&#xff0c;升级前先删除需要更新软件包安装指定的软件命令&#xff1a;安装多个软件包&#xff1a;更新指定的软件命令显示软件包具体信息,例如&#xf…

Post请求数据格式

一、常用的数据编码格式 协议规定POST提交的数据必须放在请求体中&#xff0c;但是协议没有规定必须使用什么编码方式。而常用的数据编码方式有&#xff1a; Content - Type&#xff1a;application/x-www-form-urlencode&#xff1a;数据被编码为名称/值对&#xff0c;默认类…

基于阻塞队列的生产者消费者模型

目录 生产者消费者模型 生产者消费者模型是什么&#xff1f; 生产者消费者模型优点 基于阻塞队列的生产者消费者模型 生产者消费者模型 前面我们学习了生产者多线程&#xff0c;以及多线程的控制&#xff0c;下面我们看一下多线程中最常见的一个应用——生产者消费者模型。…

C语言进阶之路-运算符小怪篇

目录 一、学习目标 二、运算符详谈 算术运算符 关系运算符 逻辑运算符 位运算符 特殊运算符 条件运算符 sizeof 运算符 打怪实战 三、控制流 二路分支 多路分支 const while与 do…while循环 语法&#xff1a; for循环 break与continue goto语句&#xff08…

MySQL MHA高可用架构搭建

快捷查看指令 ctrlf 进行搜索会直接定位到需要的知识点和命令讲解&#xff08;如有不正确的地方欢迎各位小伙伴在评论区提意见&#xff0c;博主会及时修改&#xff09; MySQL MHA高可用架构搭建 MHA&#xff08;Master HA&#xff09;是一款开源的 MySQL 的高可用程序&#xf…

如何获得微软MVP徽章

要成为微软MVP&#xff0c;需要在特定领域成为专家&#xff0c;并积极参与社区&#xff0c;为其他人提供帮助和支持。以下是一些步骤可以帮助你成为MVP&#xff1a; 在特定领域成为专家&#xff1a;要成为MVP&#xff0c;需要在某个领域具有专业知识和经验。这可以通过阅读相关…

ffmpeg下载与配置环境变量

FFmpeg 是一个强大的多媒体框架&#xff0c;可以让用户处理和操纵音频和视频文件。具有易于使用的界面&#xff0c;用户可以在 Windows、Mac 或 Linux Ubuntu 系统上下载 FFmpeg 并将其提取到文件夹中。然后&#xff0c;该软件可以加入 PATH 环境变量中就可以快捷的使用软件了.…

pytorch矩阵乘法

torch.matmul torch.matmul是PyTorch中执行一般矩阵乘法的函数&#xff0c;它接受两个矩阵作为输入&#xff0c;并返回它们的乘积。它适用于任何两个矩阵&#xff0c;无论是密集矩阵还是稀疏矩阵。 import torch # 创建两个 2x2 矩阵 mat1 torch.tensor([[1, 2], [3, 4]]…

【LeeCode】27. 移除元素

给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并原地修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长度后面的…

MYSQL基础知识之【修改数据,删除数据】

文章目录 前言MySQL UPDATE 查询使用PHP脚本更新数据 MySQL DELETE 语句从命令行中删除数据使用 PHP 脚本删除数据 后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;Mysql &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术…

使用 STM32 读取和解析 NTC 热敏电阻的数值

本文介绍了如何利用 STM32 微控制器读取和解析 NTC&#xff08;Negative Temperature Coefficient&#xff09;热敏电阻的数值。首先&#xff0c;我们将简要介绍 NTC 热敏电阻的原理和特性。接下来&#xff0c;我们将详细讨论如何设计电路连接和采用合适的 STM32 外设进行数值读…

Java——包机制(package、import)

包机制是Java中管理类的重要手段。开发中我们会遇到大量同名的类&#xff0c;通过包我们很容易对解决类重名的问题&#xff0c;也可以实现对类的有效管理。包对于类&#xff0c;相当于文件夹对于文件的作用。 package 我们通过package实现对类的管理&#xff0c;package的使用…

Element-Plus 图标自动导入

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…