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

相关文章

Python ZIP文件操作技巧详解

《PythonZIP文件操作技巧详解》在数据处理和系统开发中,ZIP文件操作是开发者必须掌握的核心技能,Python标准库提供的zipfile模块以简洁的API和跨平台特性,成为处理ZIP文件的首选... 目录一、ZIP文件操作基础三板斧1.1 创建压缩包1.2 解压操作1.3 文件遍历与信息获取二、进阶技

Java中字符串转时间与时间转字符串的操作详解

《Java中字符串转时间与时间转字符串的操作详解》Java的java.time包提供了强大的日期和时间处理功能,通过DateTimeFormatter可以轻松地在日期时间对象和字符串之间进行转换,下面... 目录一、字符串转时间(一)使用预定义格式(二)自定义格式二、时间转字符串(一)使用预定义格式(二)自

MySQL重复数据处理的七种高效方法

《MySQL重复数据处理的七种高效方法》你是不是也曾遇到过这样的烦恼:明明系统测试时一切正常,上线后却频频出现重复数据,大批量导数据时,总有那么几条不听话的记录导致整个事务莫名回滚,今天,我就跟大家分... 目录1. 重复数据插入问题分析1.1 问题本质1.2 常见场景图2. 基础解决方案:使用异常捕获3.

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Python 中的 with open文件操作的最佳实践

《Python中的withopen文件操作的最佳实践》在Python中,withopen()提供了一个简洁而安全的方式来处理文件操作,它不仅能确保文件在操作完成后自动关闭,还能处理文件操作中的异... 目录什么是 with open()?为什么使用 with open()?使用 with open() 进行

Linux ls命令操作详解

《Linuxls命令操作详解》通过ls命令,我们可以查看指定目录下的文件和子目录,并结合不同的选项获取详细的文件信息,如权限、大小、修改时间等,:本文主要介绍Linuxls命令详解,需要的朋友可... 目录1. 命令简介2. 命令的基本语法和用法2.1 语法格式2.2 使用示例2.2.1 列出当前目录下的文

如何高效移除C++关联容器中的元素

《如何高效移除C++关联容器中的元素》关联容器和顺序容器有着很大不同,关联容器中的元素是按照关键字来保存和访问的,而顺序容器中的元素是按它们在容器中的位置来顺序保存和访问的,本文介绍了如何高效移除C+... 目录一、简介二、移除给定位置的元素三、移除与特定键值等价的元素四、移除满足特android定条件的元

基于Python实现高效PPT转图片工具

《基于Python实现高效PPT转图片工具》在日常工作中,PPT是我们常用的演示工具,但有时候我们需要将PPT的内容提取为图片格式以便于展示或保存,所以本文将用Python实现PPT转PNG工具,希望... 目录1. 概述2. 功能使用2.1 安装依赖2.2 使用步骤2.3 代码实现2.4 GUI界面3.效

Java图片压缩三种高效压缩方案详细解析

《Java图片压缩三种高效压缩方案详细解析》图片压缩通常涉及减少图片的尺寸缩放、调整图片的质量(针对JPEG、PNG等)、使用特定的算法来减少图片的数据量等,:本文主要介绍Java图片压缩三种高效... 目录一、基于OpenCV的智能尺寸压缩技术亮点:适用场景:二、JPEG质量参数压缩关键技术:压缩效果对比

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面