当前位置: 首页 > news >正文

页面的重排和重绘?

思路: 网页渲染HTML文件到浏览器的过程->定义->如何优化

网页渲染HTML文件到浏览器的过程
  1. HTML 文件通过HTML解析器解析生成DOM树;

  1. CSS文件通过CSS解析器生成CSSOM树;

  1. DOM树和CSSOM树生成渲染树(render tree);

  1. 生成布局,浏览器根据render tree进行布局,并计算各个节点的几何信息;(排列)

  1. 将节点绘制到屏幕上;(绘制)

什么是重排和重绘?

重绘:元素的外观改变,如:文字颜色透明度,背景颜色等;

重排:重新生成布局,重新排列元素。分为局部范围重排和全局范围重排

局部重排:对渲染树的某个部分或者某个渲染对象进行重新布局。 如:一个dom的宽高等几何信息定死,在dom内触发了重排,就只会重排该dom内部的元素而不影响到外界。

全局重排:从根节点html对整个渲染树进行重新布局。

优化:

1. 减少重排的次数

①不要频繁的操作样式,而是统一的在变量中编辑

//bad
var top = 10;
var left = 10;
// 第一次重排
el.style.top = top + "px";  //el就是获取dom节点,详细的可看如何获取dom节点的方法
// 第二次重排
el.style.left = left + "px";
// good
el.style.cssText += ";top:" + top + "px;left:" + left + "px";
// 因为cssText会覆盖之前的样式,所以需要采用叠加的方式

②离线操作元素:

1>使用display:none。(先拿掉再操作最后显示,两次重排)

个人理解:对这个节点进行操作时,先添加display:none样式(重排第一次);再进行一些操作;移除display:none样式(重排第二次)

2>通过document.Fragment先创建一个dom节点,对这个节点进行操作,再把这个元素添进去(重排一次)

document.createDocumentFragment(); //返回一个 documentFragment 类型的对象
//documentFragment 不是真实 DOM 树的一部分,
//它的变化不会触发 DOM 树的重新渲染,且不会导致性能等问题。

③使用fixed和 absolute将节点脱离文档流。这样子元素的重排的开销较小。

④分离读写操作

2.减小重排的范围

①尽量以局部布局的形组织HTML,使各个元素相互独立

②尽可能在底部元素上设置样式,削弱修改样式时的影响

③尽量不使用table布局

附加题:css的隐藏方式,至少说出三种,是否导致了重排?

1.display:none ; 导致重排,因为涉及到了dom的创建和销毁

2.visibility: hidden; 不会导致重排,因为这个dom节点还是存在

3.opacity:0 不会导致重排,相当于只是改变了字体颜色,只会引起重绘

4.width:0;heigth:0;overflow:hidden; 导致重排,改变了dom节点的几何信息

5.把这个元素移动到不可见区域等

6.。。。

相关文章:

页面的重排和重绘?

思路: 网页渲染HTML文件到浏览器的过程->定义->如何优化网页渲染HTML文件到浏览器的过程HTML 文件通过HTML解析器解析生成DOM树;CSS文件通过CSS解析器生成CSSOM树;DOM树和CSSOM树生成渲染树(render tree)&#x…...

人脸检测-python和c++实现

人脸检测是计算机视觉领域中的一个重要应用,其目的是从图像或视频中自动检测出其中的人脸,并对其进行识别、跟踪等操作。人脸检测技术已经广泛应用于安防、人机交互、娱乐等领域,具有广泛的应用前景。 人脸检测的基本思路可以分为以下几个步骤: 图像预处理:首先需要对输入…...

PowerJob源码环境搭建

一、IEDA导入PowerJob源码 gitgithub.com:PowerJob/PowerJob.gitPowerJob 由调度服务器(powerjob-server)和执行器(powerjob-worker)两部分组成 powerjob-server 负责提供 Web 服务和完成任务的调度powerjob-worker 则负责执行用…...

天梯赛刷题小记 —— L2

最近在重刷 天梯赛&#xff0c;浅浅记录一下&#xff0c;进入L2阶段了 L2-001 紧急救援 解题思路&#xff1a;典型的dijkstra模板题&#xff0c;带路径记录与权重&#xff0c;方案数记录&#xff0c;解析出过 Dijkstra(兼路径) #include <bits/stdc.h> #define inf…...

Prometheus监控实战系列十九:监控Kubernetes集群(上)

Kuberentes是一款开源的容器编排产品&#xff0c;由Google开发后发布到社区&#xff0c;并在2015年将该项目捐献给了云原生基金会&#xff08;Cloud Native Computing Foundation&#xff09;。从2014年第一个版本发布以来&#xff0c;Kubernetes便迅速获得开源社区的追捧&…...

番茄学习法——亲测超级好用

今天给大家分享下我最近使用的学习方法&#xff0c;真的非常好用&#xff01;大家用起来&#xff01; 在日常的学习和工作中&#xff0c;我们经常会遇到一些难以克服的问题&#xff1a;分心、效率低下、焦虑等。为了帮助人们更好地学习和工作&#xff0c;一些学习方法和工具应运…...

vue 项目中使用高德地图

一、账号准备 首先&#xff0c;需要注册并登录高德地图开放平台&#xff0c;申请密钥。操作指引&#xff1a;高德地图开放平台 二、安装高德地图加载器 npm 安装&#xff1a; npm i amap/amap-jsapi-loader --save或者 yarn 安装&#xff1a; yarn add amap/amap-jsapi-loa…...

【每日一题】病人排队

题目描述小理是个热爱生活的孩子。病人登记看病&#xff0c;小理想编写一个程序&#xff0c;将登记的病人按照以下原则排出看病的先后顺序&#xff1a;1. 老年人&#xff08;年龄 ≥≥ 60岁&#xff09;比非老年人优先看病。2. 老年人按年龄从大到小的顺序看病&#xff0c;年龄…...

【数据结构】链表OJ题

目录面试题 02.04 分割链表剑指 Offer II 027 回文链表160 相交链表141 环形链表142 环形链表 II138 复制带随机指针的链表面试题 02.04 分割链表 定义lesshead和greaterhead链接小于和大于等于k的值分别设置哨兵位和尾节点指针最后将两表去除哨兵位再链接 struct ListNode* p…...

冒泡 VS 插入 VS 选择——谁更胜一筹?(附排序源码)

文章目录什么样的“排序算法”更加优质&#xff1f;排序算法的执行效率排序算法的内存消耗排序算法的稳定性冒泡排序&#xff08;Bubble Sort&#xff09;插入排序&#xff08;Insertion Sort&#xff09;选择排序&#xff08;Selection Sort&#xff09;最终的胜利者&#x1f…...

[python tools] 今天看到另一个配置工具 YACS,所以做下笔记

YACS 实际上就只是把别人的readme翻译了一下 github: https://github.com/rbgirshick/yacs 样例代码: https://github.com/Wuziyi616/multi_part_assembly/blob/master/docs/config.md 一、使用方法 1. 首先搞一个config的python文件&#xff0c;用来存一下基本的配置信息 比…...

Prometheus cadvisor容器监控和node-exporter节点监控

往期文章 Prometheus监控系统 https://blog.csdn.net/qq_39578545/article/details/108754585 Docker之compose介绍 使用一个Dockerfile模板文件可以定义一个单独的应用容器&#xff0c;如果需要定义多个容器就需要服务编排。下面介绍Docker官方产品&#xff0c;Docker Comp…...

机器学习|正则化|评估方法|分类模型性能评价指标|吴恩达学习笔记

前文回顾&#xff1a;逻辑回归 目录 &#x1f4da;正则化 &#x1f407;过拟合的问题 &#x1f407;代价函数 &#x1f407;正则化线性回归 &#x1f407;正则化的逻辑回归模型 &#x1f4da;模型评估方法 &#x1f407;留出法&#xff08;hold-out&#xff09; &#…...

python迭代器详解

不懂的问题&#xff1a;什么是协变、逆变&#xff1f;渐进式&#xff1f; _T_co TypeVar("_T_co", covariantTrue) # Any type covariant containers.作者&#xff1a;20岁爱吃必胜客&#xff08;坤制作人&#xff09;&#xff0c;近十年开发经验, 跨域学习者&…...

关于Docker逃逸

关于Docker逃逸 文章目录关于Docker逃逸前言一、判断是否为docker容器&#xff1f;二、privileged特权模式启动容器逃逸三、 Docker Remote API未授权访问逃逸四、危险挂载导致Docker逃逸五、危险挂载Docker Socket逃逸六、 挂载宿主机procfs逃逸七、脏牛漏洞来进行docker逃逸八…...

@Autowired和@Resource区别

Autowired和Resource到底有什么区别 Autowired 和 Resource 都是用来实现依赖注入的注解&#xff08;在 Spring/Spring Boot 项目中&#xff09;&#xff0c;但二者却有着 5 点不同&#xff1a; 来源不同&#xff1a;Autowired 来自 Spring 框架&#xff0c;而 Resource 来自…...

动态内存管理详细讲解

目录 1.为什么存在动态内存分配 2. 动态内存函数的介绍 2.1 malloc和free 2.2 calloc 2.3 realloc 今天要和大家分享的内容是的动态内存管理&#xff0c;我们先从他的定义入手学习。 1.为什么存在动态内存分配 我们到现在已经掌握了内存开辟的方式就是要么创建一个变量…...

Python和Excel的完美结合:常用操作汇总(案例详析)

在以前&#xff0c;商业分析对应的英文单词是Business Analysis&#xff0c;大家用的分析工具是Excel&#xff0c;后来数据量大了&#xff0c;Excel应付不过来了&#xff08;Excel最大支持行数为1048576行&#xff09;&#xff0c;人们开始转向python和R这样的分析工具了&#…...

卡特兰数、斯特林数基础

卡特兰数 从格点(0,0)(0,0)(0,0)走到格点(n,n)(n,n)(n,n)&#xff0c;只能向右或向上走&#xff0c;不能穿过对角线&#xff0c;的路径的条数&#xff0c;称为卡特兰数HnH_nHn​。 则有H01H_01H0​1。 通项公式&#xff1a; Hn(2nn)−(2nn−1)H_n\begin{pmatrix} 2n\\ n \en…...

STL——mapmultimap和setmultiset

一、关联式容器 与序列式容器相同&#xff0c;关联式容器也是用于存储数据的&#xff0c;不同的是&#xff0c;关联式容器里存储的是<key, value>结构的键值对&#xff0c;在数据检索时比序列式容器效率更高。 二、键值对 用来表示具有一一对应的一种结构&#xff0c;该…...

2023热门抖音权重查询小程序源码

2023热门抖音权重查询小程序源码 跟抖音上很火的一模一样&#xff0c;小程序适配优化。接口免费。小程序不是网页 修改教程: 1&#xff0c;如果想修改或者去除水印&#xff0c;直接删除或修改“index.html”12&#xff5e;22行 2&#xff0c;如果想修改logo&#xff0c;直接…...

153.网络安全渗透测试—[Cobalt Strike系列]—[生成hta/exe/宏后门]

我认为&#xff0c;无论是学习安全还是从事安全的人多多少少都会有些许的情怀和使命感&#xff01;&#xff01;&#xff01; 文章目录一、后门简介1、hta后门2、exe后门3、宏病毒后门二、生成后门并测试0、测试环境1、生成hta后门并测试2、生成exe后门并测试3、生成宏病毒后门…...

如何成为优秀的程序员

崔宝秋&#xff0c;现任小米首席架构师、小米云平台负责人。1995年赴美留学&#xff0c;纽约州立大学石溪分校计算机科学系博士毕业&#xff0c;曾任IBM高级工程师和高级研发经理、雅虎搜索技术核心团队主任工程师、LinkedIn主任工程师&#xff0c;2012年回国加入小米科技。 20…...

多线程(四):线程安全

在开始讲解线程安全之前我们先来回顾一下我们学了那些东西了&#xff1a; 1. 线程和进程的认识 2. Thread 类的基本用法 3. 简单认识线程状态 4. 初见线程安全 上一章结束时看了一眼线程安全问题&#xff0c;本章将针对这个重点讲解。 一个代码在单线程中能够安全执行&am…...

[ROC-RK3568-PC] [Firefly-Android] 10min带你了解Camera的使用

&#x1f347; 博主主页&#xff1a; 【Systemcall小酒屋】&#x1f347; 博主追寻&#xff1a;热衷于用简单的案例讲述复杂的技术&#xff0c;“假传万卷书&#xff0c;真传一案例”&#xff0c;这是林群院士说过的一句话&#xff0c;另外“成就是最好的老师”&#xff0c;技术…...

C++之模拟实现string

文章目录前言一、包含的相关头文件二、构造和析构1.构造函数2.拷贝构造1.传统写法2.现代写法3.赋值运算符重载1.传统写法2.现代写法4.析构函数三、iterator四、modify1.push_back(尾插一个字符&#xff09;2.append&#xff08;尾插一个字符串&#xff09;3.运算符重载1.尾插字…...

SpringBoot实战(十三)集成 Admin

目录一、简介二、搭建 springboot-admin 管理服务1.Maven 依赖2.application.yml3.添加 EnableAdminServer4.启动服务&#xff0c;查看页面三、搭建 springboot-admin-client 客户端服务1.Maven 依赖2.application.yml3.启动服务&#xff0c;查看页面四、搭配 Eureka 使用1.搭建…...

mke2fs命令:建立ext2文件系统

以下内容源于网络资源的学习与整理&#xff0c;如有侵权请告知删除。 使用格式 mke2fs [options] [设备名称] [区块数] options与含义 -c&#xff1a;检查是否有损坏的区块。-F&#xff1a;不管指定的设备为何&#xff0c;强制执行mke2fs。-M&#xff1a;记录最后一次挂入的…...

免费分享一个springboot+vue的办公系统

springbootvue的OA系统项目介绍项目部署项目特点项目展示项目介绍 这是一个采用前后端分离开发的项目&#xff0c;前端采用 Vue 开发、后端采用 SpringBoot Mybatis 开发。 很适合java初学者练手和学习。 前端技术&#xff1a;Vue3.2 Vue-Router Pinia Ant Design Vue 3.X…...

STM32数据搬运工DMA

DMA的概念DMA&#xff0c;全称为&#xff1a;Direct Memory Access&#xff0c;即直接存储器访问。DMA 传输方式无需 CPU 直接控制传输&#xff0c;也没有中断处理方式那样保留现场和恢复现场的过程&#xff0c;通过硬件为 RAM 与 I/O 设备开辟一条直接传送数据的通路&#xff…...

做网站公司赚钱吗?/公司网站设计模板

Jenkins是一个基于Java的开源自动化服务器&#xff0c;它提供了一种简单的方法来建立持续集成和连续交付(CI / CD)管道。本教程将引导您完成使用官方Jenkins存储库在CentOS 7系统上安装Jenkins的步骤。安装Jenkins要在CentOS系统上安装Jenkins&#xff0c;请按照以下步骤操作&a…...

网站建设建设公司/网页设计制作网站

晕啊&#xff0c;今天不顺啊&#xff0c;白天毕设因为一个小问题耽误了很长时间&#xff0c;刚写了一半了突然浏览器又卡死&#xff0c;打开后又待重新写。。。。。。 1 创建项目 这个不多说&#xff0c;新建个Web project都会吧。 2 导入Extjs文件 在WebRoot下新建ext文件夹&a…...

丰城住房和城乡建设部网站/长沙网站推广公司排名

Chicago Boss是一个用Erlang编写的服务器端框架&#xff0c;灵感来自Rails。Chicago Boss提供了现代Web 开发的各种便利功能&#xff0c;包括Comet。这个框架和其他非Erlang框架最大的区别是&#xff0c;它可以支撑很大的吞吐量。而和其他Erlang框架相比&#xff0c;Chicago Bo…...

asp网站开发教程/网页

作者介绍 郑泰森 某共享平台集团风控负责人&#xff1b; “数据人创作者联盟”成员。 接&#xff1a;【干货】风控模型如何嵌入策略&#xff08;一&#xff09; 01 三种常见的风险定价方式 我来简单介绍一下三种常见的风险定价方式&#xff0c;刚才介绍的是整体的情况。风险…...

曲靖做网站/it教育培训机构

在rowinit里面&#xff1a;/*增加打卡规则字段陈楚豪 2013/5/7 新建*/Local Field &KL_PUNCH_RULE;&KL_PUNCH_RULE GetRow().GetRecord(Record.SCH_SHIFT_DTL).GetField(Field.KL_PUNCH_RULE);&KL_PUNCH_RULE.ClearDropDownList();&KL_PUNCH_RULE.AddDropDown…...

有哪些做的好的自学网站/百度搜图匹配相似图片

模板匹配 再当前图像A 内寻找图像B 最相似的部分&#xff0c;A为输入图像&#xff0c;B为模板图像&#xff0c;操作方法是将模板图B再A 图上滑动&#xff0c;历遍所有像素以完成匹配。 模板匹配基础 result cv2.matchTemplate(image , templ, method, [mark]) image 原始…...