浅谈JS重绘与回流
2024-08-28 21:41:35
在说浏览器渲染页面之前,我们需要先了解两个点,一个叫 浏览器解析 URL,另一个就是本章节将涉及的 重绘与回流:
- 重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新,此时由于只需要 UI 层面的重新像素绘制,因此损耗较少。
常见的重绘操作有:
- 改变元素颜色
- 改变元素背景色
- more ……
- 回流(reflow):又叫重排(layout)。当元素的尺寸、结构或者触发某些属性时,浏览器会重新渲染页面,称为回流。此时,浏览器需要重新经过计算,计算后还需要重新页面布局,因此是较重的操作。
常见的回流操作有:
- 页面初次渲染
- 浏览器窗口大小改变
- 元素尺寸/位置/内容发生改变
- 元素字体大小变化
- 添加或者删除可见的 DOM 元素
- 激活 CSS 伪类(:hover……)
- more ……
- 重点:回流必定会触发重绘,重绘不一定会触发回流。重绘的开销较小,回流的代价较高。
看到这里,小伙伴们可能有点懵逼,你刚刚还跟我讲着 防抖与节流 ,怎么一下子跳到 重绘与回流 了?
OK,卖个关子,先看下面场景:
- 界面上有个 div 框,用户可以在 input 框中输入 div 框的一些信息,例如宽、高等,输入完毕立即改变属性。但是,因为改变之后还要随时存储到数据库中,所以需要调用接口。如果不加限制……
看到这里,小伙伴们可以将一些字眼结合起来了:为什么需要 节流,因为有些事情会造成浏览器的 回流,而 回流 会使浏览器开销增大,所以我们通过 节流 来防止这种增大浏览器开销的事情。
形象地用图来说明:
这样,我们就可以形象的将 防抖与节流 与 重绘与回流 结合起来记忆起来。
那么,在工作中我们要如何避免大量使用重绘与回流呢?:
- 避免频繁操作样式,可汇总后统一一次修改
- 尽量使用 class 进行样式修改,而不是直接操作样式
- 减少 DOM 的操作,可使用字符串一次性插入
OK,至此我们就讲完两个部分了,那么问题又来了:“浏览器渲染过程中,是不是也有重绘与回流?”“从浏览器输入 URL 到渲染成功的过程中,究竟发生了什么?”
我们,继续深入探索……
.
最新文章
- ueditor的配置和使用
- 10. javacript高级程序设计-DOM
- Quartz2D学习笔记
- 开坑,Unix环境高级编程,转行之路又得缓缓了
- iOS 加入自定义字体方法
- windows进程中的内存结构(好多API,而且VC最聪明)
- Default Web Site
- Linux下搭建Oracle11g RAC(1)----IP分配与配置IP
- 剑指offer-面试题3.二维数组中的查找
- EasyUI combox实现联动
- 可以在手机上看电脑本地html步骤,我自己总结的哦!
- android onSaveInstanceState应用实例
- [C#]List的Sort()、Find()、FindAll()、Exist()的使用方法举例
- QT中设置窗口背景颜色
- 【POJ3662】Telephone Lines dij + 二分答案
- 窗体Form的FormStyle属性设置为fsStayOnTop时属性设置不起作用问题探讨。
- mysql引擎问题
- unbtu使用笔记
- ssh 设置反向代理
- hdu3457(有向图的dp问题)
热门文章
- 【THUPC 2018】赛艇
- 性能调优 -- Java编程中的性能优化
- [转]RPA Developer Advanced Certification - Exam #1 UiPath 练习
- 从0系统学Android--3.5 最常用和最难用的控件---ListView
- R-5 相关分析-卡方分析
- python的@propert装饰器
- day98_12_2 数据分析工具包。
- Elasticsearch索引按月划分以及获取所有索引数据
- 【Git教程】如何清除git仓库的所有提交记录,成为一个新的干净仓库
- MongoDB自学------(4)MongoDB主从搭建