repaint和reflow(高效的操作DOM)

2024-04-25 00:18
文章标签 高效 操作 dom repaint reflow

本文主要是介绍repaint和reflow(高效的操作DOM),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Email:longsu2010 at yeah dot net

我现在的工作对页面的性能要求很高,这一年多以来对这方面有了更深刻的认识,早就想写一些关于这些内容的文章,今天抽时间先写repaint和reflow。

使用js操作DOM时repaint和reflow是经常发生的,如果处理不好这就是页面性能的瓶颈,表现出来现象可能是用户操作响应不及时,浏览器进程cpu特别高。

什么是repaint?

repiant或者redraw遍历所有的节点检测各节点的可见性、颜色、轮廓等可见的样式属性,然后根据检测的结果更新页面的相应部分。

什么是reflow?

reflow指的是计算页面布局。某个节点reflow时会重新计算节点的尺寸和位置,而且还有可能触发其子节点、祖先节点和页面上的其他节点reflow。在这之后再触发一次repaint。reflow对性能的影响非常大,但是很不幸,reflow很容易被触发。

下面的操作会触发reflow:

1、插入、删除或者更新页面(文档树)中的节点。

2、修改页面的内容,例如在input标签中输入内容。

3、移动节点。

4、页面中的动画效果。

5、获取节点的尺寸,例如获取节点的offsetHeight,或者使用getComputedStyle函数获取节点尺寸。

6、改变节点样式。

7、改变节点的className属性。

8、增加或者删除样式表文件。

9、window的resize。

10、滚动滚动条,即scroll。

看看这个列表就知道触发reflow是多么的容易了,好消息是现代的浏览器(比如chrome)已经考虑尽量把reflow降低了,比如在一批layout之后触发一次reflow和repaint而不是每次都触发,再比如当节点设置了display为none时不触发reflow,再比如当在及其短的时间里向文档树中追加节点时根据时间点和节点数目来优化reflow。当然如上说的这些远古时代的IE系列不行。

除了浏览器自身的的改进外,如下是我们在工作中需要注意的(在工作中我都有使用,效果非常好,可以说立竿见影):

1、避免多次设置行内样式,避免分别单独设置样式。比如node.style.height = ''; node.style.width = '';这都会多次触发reflow(现代浏览器好一些,远古浏览器不行)。

2、使用className,并且在尽可能内层的节点上做修改。className可以满足多个样式一次修改,只进行一次reflow。

3、当要批量操作某一个DOM树时可以先将其在文档树中移除,待操作完成后在添加到文档树中,这样可避免多次reflow。

4、避免频繁的获取节点尺寸,可以使用标量缓存节点尺寸,这也是以空间换时间的思想。

5、当某一区域需要频繁的dom操作时可以将其外部包裹一个fixed或者absolute布局。

6、避免使用table布局,table布局会触发更多的reflow。


以上是我实际工作中遇到问题解决问题的收获,欢迎大家补充,不当之处欢迎指正。







这篇关于repaint和reflow(高效的操作DOM)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/933238

相关文章

C# WinForms存储过程操作数据库的实例讲解

《C#WinForms存储过程操作数据库的实例讲解》:本文主要介绍C#WinForms存储过程操作数据库的实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、存储过程基础二、C# 调用流程1. 数据库连接配置2. 执行存储过程(增删改)3. 查询数据三、事务处

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

SpringBoot使用OkHttp完成高效网络请求详解

《SpringBoot使用OkHttp完成高效网络请求详解》OkHttp是一个高效的HTTP客户端,支持同步和异步请求,且具备自动处理cookie、缓存和连接池等高级功能,下面我们来看看SpringB... 目录一、OkHttp 简介二、在 Spring Boot 中集成 OkHttp三、封装 OkHttp

Python使用DrissionPage中ChromiumPage进行自动化网页操作

《Python使用DrissionPage中ChromiumPage进行自动化网页操作》DrissionPage作为一款轻量级且功能强大的浏览器自动化库,为开发者提供了丰富的功能支持,本文将使用Dri... 目录前言一、ChromiumPage基础操作1.初始化Drission 和 ChromiumPage

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

Redis中管道操作pipeline的实现

《Redis中管道操作pipeline的实现》RedisPipeline是一种优化客户端与服务器通信的技术,通过批量发送和接收命令减少网络往返次数,提高命令执行效率,本文就来介绍一下Redis中管道操... 目录什么是pipeline场景一:我要向Redis新增大批量的数据分批处理事务( MULTI/EXE

使用Python高效获取网络数据的操作指南

《使用Python高效获取网络数据的操作指南》网络爬虫是一种自动化程序,用于访问和提取网站上的数据,Python是进行网络爬虫开发的理想语言,拥有丰富的库和工具,使得编写和维护爬虫变得简单高效,本文将... 目录网络爬虫的基本概念常用库介绍安装库Requests和BeautifulSoup爬虫开发发送请求解

Oracle存储过程里操作BLOB的字节数据的办法

《Oracle存储过程里操作BLOB的字节数据的办法》该篇文章介绍了如何在Oracle存储过程中操作BLOB的字节数据,作者研究了如何获取BLOB的字节长度、如何使用DBMS_LOB包进行BLOB操作... 目录一、缘由二、办法2.1 基本操作2.2 DBMS_LOB包2.3 字节级操作与RAW数据类型2.

JDK多版本共存并自由切换的操作指南(本文为JDK8和JDK17)

《JDK多版本共存并自由切换的操作指南(本文为JDK8和JDK17)》本文介绍了如何在Windows系统上配置多版本JDK(以JDK8和JDK17为例),并通过图文结合的方式给大家讲解了详细步骤,具有... 目录第一步 下载安装JDK第二步 配置环境变量第三步 切换JDK版本并验证可能遇到的问题前提:公司常