性能优化---回流与重绘

news/2024/9/24 11:24:14/

1、什么是回流(重排)和重绘

        回流就是当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时,浏览器会重新渲染部分或者全部文档的过程。

        重绘就是当页面中某些元素的样式发生变化,但是不会影响其在文档流中的位置时,浏览器就会对元素进行重新绘制的过程。

        当触发回流时,一定会触发重绘,但是重绘不一定会引发回流。

2、什么时候回发生回流        

  • 页面的首次渲染
  • 浏览器的窗口大小发生变化
  • 元素的内容发生变化
  • 元素的尺寸或者位置发生变化
  • 元素的字体大小发生变化
  • 激活CSS伪类
  • 查询某些属性或者调用某些方法
  • 添加或者删除可见的DOM元素

3、什么时候回发生重绘

  • color、background 相关属性:background-color、background-image 等
  • outline 相关属性:outline-color、outline-width 、text-decoration
  • border-radius、visibility、box-shadow

4、回流的范围 

        在触发回流(重排)的时候,由于浏览器渲染页面是基于流式布局的,所以当触发回流时,会导致周围的DOM元素重新排列,它的影响范围有两种:

  • 全局范围:从根节点开始,对整个渲染树进行重新布局
  • 局部范围:对渲染树的某部分或者一个渲染对象进行重新布局

 5、减少回流和重绘的方法

  • 操作DOM时,尽量在低层级的DOM节点进行操作
  • 不要使用table布局, 一个小的改动可能会使整个table进行重新布局
  • 使用CSS的表达式
  • 不要频繁操作元素的样式,对于静态页面,可以修改类名,而不是样式。
  • 使用absolute或者fixed,使元素脱离文档流,这样他们发生变化就不会影响其他元素
  • 避免频繁操作DOM,可以创建一个文档片段documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中
  • 将元素先设置display: none,操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
  • 将DOM的多个读操作(或者写操作)放在一起,而不是读写操作穿插着写。

6、什么是渲染队列

        浏览器会将所有的回流、重绘的操作放在一个队列中,当队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。 

7、什么是documentFragment

        DocumentFragment,文档片段接口,一个没有父对象的最小文档对象。它被作为一个轻量版的 Document使用,就像标准的document一样,存储由节点(nodes)组成的文档结构。与document相比,最大的区别是DocumentFragment不是真实 DOM 树的一部分,它的变化不会触发 DOM 树的重新渲染,且不会导致性能等问题。

        当我们把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。在频繁的DOM操作时,我们就可以将DOM元素插入DocumentFragment,之后一次性的将所有的子孙节点插入文档中。和直接操作DOM相比,将DocumentFragment 节点插入DOM树时,不会触发页面的重绘,这样就大大提高了页面的性能。 

8、如何优化动画

        一般情况下,动画需要频繁的操作DOM,就就会导致页面的性能问题,我们可以将动画的position属性设置为absolute或者fixed,将动画脱离文档流,这样他的回流就影响不到页面了。 


http://www.ppmy.cn/news/1432507.html

相关文章

Oracle之RMAN连接数据库及备份与恢复(一)

一、rman的相关概念和配置参数 rman几个重要的概念 1、备份集 备份集是一个逻辑数据集合,有一个或者多个rman的备份片组成。 备份片:是rman格式的操作系统文件,包含了数据文件、控制文件和归档日志、 备份集是rman的默认的备份文件,是备份片的集合。一般一个通…

Modality-Aware Contrastive Instance Learning with Self-Distillation ... 论文阅读

Modality-Aware Contrastive Instance Learning with Self-Distillation for Weakly-Supervised Audio-Visual Violence Detection 论文阅读 ABSTRACT1 INTRODUCTION2 RELATEDWORKS2.1 Weakly-Supervised Violence Detection2.2 Contrastive Learning2.3 Cross-Modality Knowle…

JS -正则表达式

正则表达式 关于正则表达式,其实我写过几篇了,但是真正的正则表达式其实主要用于定义一些字符串的规则,计算机根据给出的正则表达式,来检查一个字符串是否符合规则。 我们来看一下,在JS中如何创建正则表达式对象。 语…

cesium primitive 移动 缩放 旋转 矩阵

旋转参考:cesium 指定点旋转rectangle Primitive方式 矩阵篇-CSDN博客 平移参考:cesium 调整3dtiles的位置 世界坐标下 相对坐标下 平移矩阵-CSDN博客 一、primitive方式添加polygon let polygonInstance new Cesium.GeometryInstance({geometry: Ce…

Leetcode算法训练日记 | day30

专题九 贪心算法 一、重新安排行程 1.题目 Leetcode:第 332 题 给你一份航线列表 tickets ,其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票都属于一个从 JFK(肯尼迪国际机场…

sklearn【AUC-ROC】原理,以及绘制ROC曲线!

一、AUC-ROC 介绍 在分类任务中,特别是当数据集中的类别分布不平衡时,评估模型的性能变得尤为重要。AUC-ROC(Area Under the Receiver Operating Characteristic Curve,受试者工作特征曲线下的面积)是一种有效的评估指…

Selenium(二):WebDriver核心方法和属性

一、WebDriver核心属性 1.river.name 浏览器名称 2.driver.current_url 获取当前URL 3.driver.title 获得当前页面标题 4.driver.page_source 获得当前页面源码 5.driver.current_window_handle 获得当前窗口句柄 6.driver.window_handles 获得当前所有窗口句柄 二、Web…

前后端开发的非对称机密,Token加密加盐设置

在前后端开发中使用非对称加密技术和Token加密是一种提高数据传输和存储安全性的有效方法。这种方法不仅可以保护数据免受未授权访问,还可以确保数据在传输过程中的完整性和机密性。以下是一个关于如何在前后端系统中实现非对称加密和加盐Token的详细方案&#xff1…