回流重绘零负担，网页加载快如闪电

  

 🎬 江城开朗的豌豆：个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

 📝 个人网站 :《 江城开朗的豌豆🫛 》 

⛺️ 生活的理想，就是为了理想的生活 !

在这里插入图片描述

目录

 ⭐  专栏简介

 📘  文章引言

一、回流与重绘是什么

二、如何触发

回流触发时机

重绘触发时机

浏览器优化机制

三、如何减少

⭐  写在最后

 ⭐  专栏简介

        欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者，我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新，为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念，并提供实际案例和练习，让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具，我们都将为你提供丰富的内容和实用技巧，帮助你更好地理解并运用前端开发中的各种技术。

        同时，我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进，前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术，使你能够站在前沿，与时俱进。通过掌握最新的前端技术，你将能够在竞争激烈的Web开发领域中有更大的竞争力。

 📘  文章引言

一、回流与重绘是什么

在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：

  • 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置

  • 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

具体的浏览器解析渲染机制如下所示： 

  • 解析HTML，生成DOM树，解析CSS，生成CSSOM树

  • 将DOM树和CSSOM树结合，生成渲染树(Render Tree)

  • Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）

  • Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

  • Display:将像素发送给GPU，展示在页面上

在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变

当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来

当我们对 DOM 的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了回流

二、如何触发

要想减少回流和重绘的次数，首先要了解回流和重绘是如何触发的

回流触发时机

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流，如下面情况：

  • 添加或删除可见的DOM元素
  • 元素的位置发生变化
  • 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
  • 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
  • 页面一开始渲染的时候（这避免不了）
  • 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

还有一些容易被忽略的操作：获取一些特定属性的值

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流

除此还包括getComputedStyle 方法，原理是一样的

重绘触发时机

触发回流一定会触发重绘

可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）

除此之外还有一些其他引起重绘行为：

  • 颜色的修改

  • 文本方向的修改

  • 阴影的修改

浏览器优化机制

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列

当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的offsetTop等方法都会返回最新的数据

因此浏览器不得不清空队列，触发回流重绘来返回正确的值

三、如何减少

我们了解了如何触发回流和重绘的场景，下面给出避免回流的经验：

  • 如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
  • 避免设置多项内联样式
  • 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值(如前文示例所提)
  • 避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算
  • 对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
  • 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
  • 避免使用 CSS 的 JavaScript 表达式

在使用 JavaScript 动态插入多个节点时, 可以使用DocumentFragment. 创建后一次插入. 就能避免多次的渲染性能

但有时候，我们会无可避免地进行回流或者重绘，我们可以更好使用它们

例如，多次修改一个把元素布局的时候，我们很可能会如下操作

const el = document.getElementById('el')
for(let i=0;i<10;i++) {el.style.top  = el.offsetTop  + 10 + "px";el.style.left = el.offsetLeft + 10 + "px";
}

每次循环都需要获取多次offset属性，比较糟糕，可以使用变量的形式缓存起来，待计算完毕再提交给浏览器发出重计算请求

// 缓存offsetLeft与offsetTop的值
const el = document.getElementById('el') 
let offLeft = el.offsetLeft, offTop = el.offsetTop// 在JS层面进行计算
for(let i=0;i<10;i++) {offLeft += 10offTop  += 10
}// 一次性将计算结果应用到DOM上
el.style.left = offLeft + "px"
el.style.top = offTop  + "px"

我们还可避免改变样式，使用类名去合并样式

const container = document.getElementById('container')
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'

使用类名去合并样式

<style>.basic_style {width: 100px;height: 200px;border: 10px solid red;color: red;}
</style>
<script>const container = document.getElementById('container')container.classList.add('basic_style')
</script>

前者每次单独操作，都去触发一次渲染树更改（新浏览器不会），

都去触发一次渲染树更改，从而导致相应的回流与重绘过程

合并之后，等于我们将所有的更改一次性发出

我们还可以通过通过设置元素属性display: none，将其从页面上去掉，然后再进行后续操作，这些后续操作也不会触发回流与重绘，这个过程称为离线操作

const container = document.getElementById('container')
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'

离线操作后

let container = document.getElementById('container')
container.style.display = 'none'
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'
...（省略了许多类似的后续操作）
container.style.display = 'block'

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！

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

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

相关文章

rust 创建多线程web server

rust 创建多线程web server

创建一个 http server&#xff0c;处理 http 请求。 创建一个单线程的 web 服务 web server 中主要的两个协议是 http 和 tcp。tcp 是底层协议&#xff0c;http 是构建在 tcp 之上的。 通过std::net库创建一个 tcp 连接的监听对象&#xff0c;监听地址为127.0.0.1:8080. us…
阅读更多...
温湿度计传感器DHT11控制数码管显示verilog代码及视频

温湿度计传感器DHT11控制数码管显示verilog代码及视频

名称&#xff1a;温湿度计传感器DHT11控制数码管显示 软件&#xff1a;QuartusII 语言&#xff1a;Verilog 代码功能&#xff1a; 使用温湿度传感器DHT11采集环境的温度和湿度&#xff0c;并在数码管显示 本代码已在开发板验证 开发板资料&#xff1a; 大西瓜第一代FPGA升级…
阅读更多...
Vue--》简易资金管理系统后台项目实战（前端）

Vue--》简易资金管理系统后台项目实战（前端）

今天开始使用 vue3 + ts + node 搭建一个简易资金管理系统的前后端分离项目，因为前后端分离所以会分两个专栏分别讲解前端与后端的实现，后端项目文章讲解可参考：后端链接，我会在前后端的两类专栏的最后一篇文章中会将项目代码开源到我的github上，大家可以自行去进行下载运…
阅读更多...
Notepad++安装插件和配置快捷键

Notepad++安装插件和配置快捷键

Notepad是一款轻量级、开源的文件编辑工具&#xff0c;可以编辑、浏览文本文件、二进制文件、.cpp、.java、*.cs等文件。Notepad每隔1个月&#xff0c;就有一个新版本&#xff0c;其官网是&#xff1a; https://github.com/notepad-plus-plus/notepad-plus-plus。这里介绍其插件…
阅读更多...
系列十四、Spring如何处理线程安全问题

系列十四、Spring如何处理线程安全问题

一、线程安全问题出现的原因 Spring中出现线程安全的原因是&#xff0c;单实例bean中存在成员变量&#xff0c;并且有对这个bean进行读写的操作&#xff0c;因此出现了线程安全的问题。 二、案例代码 2.1、MySpringConfig /*** Author : 一叶浮萍归大海* Date: 2023/10/24 1…
阅读更多...
【C++】详解map和set基本接口及使用

【C++】详解map和set基本接口及使用

文章目录 一、关联式容器与键值对1.1关联式容器&#xff08;之前学的都是序列容器&#xff09;1.2键值对pairmake_pair函数&#xff08;map在插入的时候会很方便&#xff09; 1.3树形结构的关联式容器 二、set2.1set的基本介绍2.1默认构造、迭代器区间构造、拷贝构造&#xff0…
阅读更多...
Mysql数据库 4.SQL语言 DQL数据查询语言 查询

Mysql数据库 4.SQL语言 DQL数据查询语言 查询

DQL数据查询语言 从数据表中提取满足特定条件的记录 1.单表查询 2.多表查询 查询基础语法 select 关键字后指定要查询到的记录的哪些列 语法&#xff1a;select 列名&#xff08;字段名&#xff09;/某几列/全部列 from 表名 [具体条件]&#xff1b; select colnumName…
阅读更多...
Python环境下LaTeX数学公式转图像方案调研与探讨

Python环境下LaTeX数学公式转图像方案调研与探讨

目录 引言方案一&#xff1a;基于LaTeX环境方案二&#xff1a;基于KaTeX(推荐) 方案三&#xff1a;基于Matplotlib写在最后 引言 近来&#xff0c;涉及到一些公式识别的项目&#xff0c;输入是公式的图像&#xff0c;输出是LaTeX格式的数学公式字符串。 这类项目一般都采用深…
阅读更多...
如何隐藏woocommerce 后台header，woocommerce-layout__header

如何隐藏woocommerce 后台header，woocommerce-layout__header

如何隐藏woocommerce 后台header&#xff0c;woocommerce-layout__header WooCommerce |Products Store Activity| Inbox| Orders| Stock| Reviews| Notices| breadcrumbs 在 functions.php 里添加如下代码即可&#xff1a; // Disable WooCommerce Header in WordPress Admi…
阅读更多...
C++数据结构X篇_21_插入排序（稳定的排序）

C++数据结构X篇_21_插入排序（稳定的排序）

文章目录 1. 插入排序原理2. 算法图解3. 核心代码&#xff1a;4. 插入排序整体代码实现 1. 插入排序原理 插入排序是一种最简单直观的排序算法&#xff0c;它的工作原理是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相…
阅读更多...
matlab创建矩阵、理解三维矩阵

matlab创建矩阵、理解三维矩阵

1.创建矩阵 全0矩阵&#xff1a;a zeros(2,3,4) 全1矩阵&#xff1a;a ones(2,3,4) &#xff01;和python不一样的地方&#xff01;此处相当于创建了4页2行3列的矩阵&#xff0c;而在python里是2页3行4列。 对第1页的第2行第3列元素进行修改&#xff1a;
阅读更多...
【jenkins】centos7在线安装jenkins

【jenkins】centos7在线安装jenkins

一、系统要求 最低推荐配置 256MB可用内存 1GB可用磁盘空间(作为一个Docker容器运行jenkins的话推荐10GB) 软件配置 Java 8—​无论是Java运行时环境&#xff08;JRE&#xff09;还是Java开发工具包&#xff08;JDK&#xff09;都可以 二、安装jenkins 准备一台安装有ce…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023