【面试】什么是回流和重绘
面试被问到什么是回流和重绘,毫无印象,下来以后查了一下,原来是浏览器渲染机制的概念。
回流:元素的大小或几何图形变动,浏览器需要重新计算、布局和绘制整个页面或其中一部分。
重绘:元素的样式变动但不影响布局,浏览器只需重新绘制该元素。
回流(reflow):当DOM的结构发生改变或者某个元素的样式发生变化时,浏览器需要重新计算并重新布局(layout)页面中的元素,这个过程就称为回流。回流会导致浏览器重新计算元素的位置和大小,然后重新绘制到屏幕上,是一种相对耗费资源的操作。
重绘(repaint):当页面元素的样式(如颜色、背景等)发生变,但并不影响其布局时,浏览器只需要重新绘制(repaint)这些元素,而无需重新计算元素的布局,这个过程称为重绘。重绘的性能开销较小,因只是简单地更新元素的样式。
详见:https://cloud.tencent.com/developer/article/2363028?from_scene=register
看到优化浏览器渲染性能的几个措施时,感觉原理算是明白一些,但不知道怎么实现,所以问了一下deepseek,以下是它的回答:
好的,我将逐行解释这些优化浏览器渲染性能的策略及其原理:
-
使用CSS动画代替JavaScript动画
- 原理:CSS动画通过
transform
和opacity
属性触发GPU加速,直接在合成阶段处理(不触发主线程的布局和绘制);而JavaScript动画可能频繁操作DOM样式,导致回流(重新计算布局)和重绘(重新绘制像素)。 - 示例:用
transform: translateX(100px)
代替修改left
属性,用opacity: 0.5
代替修改background-color
。
- 原理:CSS动画通过
-
批量修改样式
- 原理:每次样式修改都可能触发一次渲染流程(回流→重绘→合成)。通过合并修改(如切换CSS类名),可将多次触发合并为单次。
- 实现:
element.classList.add('active-class')
一次性应用多个样式,而非多次调用element.style.width
/element.style.height
。
-
使用文档碎片(Document Fragment)
- 原理:DOM操作是"即时生效"的,频繁插入节点会多次触发回流。文档碎片作为离线DOM容器,允许在内存中完成批量操作后一次性插入。
- 实现:
const fragment = document.createDocumentFragment(); for (let i = 0; i < 100; i++) {const div = document.createElement('div');fragment.appendChild(div); } document.body.appendChild(fragment); // 仅触发一次回流
-
避免强制同步布局(布局抖动)
- 原理:读取布局属性(如
offsetWidth
)会强制浏览器立即计算最新布局(同步布局)。若在修改样式后立即读取布局属性,会导致多次无意义的布局计算。 - 反例:
for (let i = 0; i < elements.length; i++) {elements[i].style.width = newWidth + 'px';console.log(elements[i].offsetWidth); // 触发同步布局 }
- 优化:先读取后写入,缓存布局值:
const widths = elements.map(el => el.offsetWidth); // 批量读取 elements.forEach((el, i) => { el.style.width = widths[i] + 10 + 'px' }); // 批量写入
- 原理:读取布局属性(如
-
优先使用transform和position属性
- 原理:
transform
和opacity
仅触发合成阶段(跳过布局和绘制),而top/left/width/height
会触发完整渲染流水线。position: absolute/fixed
使元素脱离文档流,其变化不会影响其他元素的布局。
- 原理:
-
避免频繁改变窗口大小
- 原理:窗口大小变化会触发全局回流(整个页面重新布局)。可通过防抖(debounce)技术优化:
window.addEventListener('resize', debounce(() => { /* 操作 */ }, 200));
- 原理:窗口大小变化会触发全局回流(整个页面重新布局)。可通过防抖(debounce)技术优化:
-
节流与防抖技术
- 防抖(Debounce):事件停止后执行(如停止缩放窗口300ms后回调)
- 节流(Throttle):按固定频率执行(如每100ms处理一次滚动事件)
- 适用场景:
scroll
/resize
/mousemove
等高频事件。
-
translateZ触发GPU加速
- 原理:
transform: translateZ(0)
会创建独立的复合图层(Composite Layer),交由GPU处理动画,避免主线程负担。但需注意:- 图层过多可能导致内存问题
- 过度使用可能引发字体渲染异常
- 替代方案:
will-change: transform
属性可提前通知浏览器优化。
- 原理:
总结:这些策略通过减少渲染流水线的触发次数(尤其是耗时的回流阶段)、利用GPU加速、优化DOM操作模式来提升性能。核心是理解浏览器渲染机制(解析→布局→绘制→合成),并针对各阶段特性进行优化。
相关文章:
【面试】什么是回流和重绘
面试被问到什么是回流和重绘,毫无印象,下来以后查了一下,原来是浏览器渲染机制的概念。 回流:元素的大小或几何图形变动,浏览器需要重新计算、布局和绘制整个页面或其中一部分。 重绘:元素的样式变动但不影…...
HAL TIM PWM产生 蓝桥杯
目录 0.原理 0.1 CNT和CCR关系 0.2 PWM模式1模式2 1. cubemx配置 需求(将PA1输出1Khz的 50%占空比的方波) 1.0 PWM的频率计算: 2.代码 0.原理 0.1 CNT和CCR关系 CNT计数器和CCR比较器进行比较,如果是向上计数,CNT逐渐增加,CCR是虚线位置,也是用户自定义的…...
Elasticsearch 系列专题 - 第五篇:集群与性能优化
随着数据量和访问量的增长,单节点 Elasticsearch 已无法满足需求。本篇将介绍集群架构、性能优化方法以及常见故障排查,帮助你应对生产环境中的挑战。 1. 集群架构 1.1 节点角色(Master、Data、Ingest 等) Elasticsearch 集群由多个节点组成,每个节点可扮演不同角色: M…...
GPT:Transformer的专精产品
目录 1. 前言 2. GPT与Transformer的对比 2.1 Transformer架构 2.2 GPT架构 2.3 主要区别 3. GPT模型架构详解与代码实例 3.1 嵌入层 3.2 多头注意力机制 3.3 完整的GPT模型 4. 总结 1. 前言 GPT(Generative Pre-trained Transformer)是一种…...
算法——分治
学习目标: 掌握算法入门知识 学习内容: 分治的定义例题详细步骤讲解(查找最大和次大元素) 1. 分治的定义 对于一个大规模的问题,将其分解为k个规模较小的子问题,这些子问题互相独立且与原问题形式相同&a…...
论坛系统(测试报告)
文章目录 一、项目介绍二、设计测试用例三、自动化测试用例的部分展示用户名或密码错误登录成功编辑自己的帖子成功修改个人信息成功回复帖子信息成功 四、性能测试总结 一、项目介绍 本平台是用Java开发,基于SpringBoot、SpringMVC、MyBatis框架搭建的小型论坛系统…...
UE5 添加随机弹道
我们一直都是直接拿玩家摄像头的正前方当作子弹发射方向,这样弹道将是固定的直线 现在我们需要添加一些随机的偏移,注意这不是让枪口上跳的后坐力,只是弹道的偏移 需要注意的是,这里的弧长并不真正的圆的弧长,因为显然…...
#苍穹外卖#(个人使用)
目录 Day-01 1 首先导入项目 2 创建Git仓库并建立连接 3 数据库部分 4 编译启动测试 5 前后端联调 6 完善登录功能 7 接口文档 Day-02 mapper持久层service业务层controller控制层 1 新增员工 编辑 2 员工分页查询 编辑 3 启用禁用员工账号 4 编辑员工信息…...
ArcToolbox应用基础
1.启动ArcToolbox -在ArcGIS其他模块中单击ArcToolbox按钮来启动。 在ArcToolbox环境下可以看到(图-2.44),ArcToolbox由多个工具箱构成,能够完成不同类型的任务。每个工具箱中包含着不同级别的工具集,工具集又包括若干工具。 2.激活扩展工具 …...
北京大学DeepSeek内部研讨系列:AI在新媒体运营中的应用与挑战|122页PPT下载方法
随着人工智能(AI)技术的飞速发展,AI在新媒体运营中的应用越来越广泛。北京大学AI肖睿团队最近举办了一场关于DeepSeek在新媒体运营中的应用与挑战的内部研讨会,为新媒体从业者提供了宝贵的见解和策略。 如果感兴趣的话࿰…...
git日志规范
1. 代码提交规范 <header> <type>(<modules>): <subject> <BLANK LINE> <body> Description: Root Cause: Solution: <BLANK LINE> <footer> Product: Project: Build: Dependency: Change-Id: 2. 代码提交规范详解 2.1 …...
uniapp实现H5页面麦克风权限获取与录音功能
1.权限配置 在uni-app开发H5页面时,需要在manifest.json文件中添加录音权限的配置。具体如下: {"h5": {"permissions": {"scope.record": {"desc": "请授权使用录音功能"}}} }这段配置代码是用于向…...
2025.4.10总结
今日记录:今天提了两个问题单,最近要关注一下产出了,上半年的考核如今还剩两个月了,然后发现一同入职的同事,有的人进步得很快,得向优秀得同事看齐了,不然几年过去,别人连升好几年&a…...
web前端 html常用标签
head内常用标签 基本标签(非meta标签): <!--title: 定义网页标题--> <title>Title</title><!--style: 定义内部样式表. 内部用来书写css代码--> <style>h1 {color: greenyellow;} </style><!--script: 内部用来…...
【Hadoop入门】Hadoop生态之Sqoop简介
1 什么是Sqoop? 在企业的数据架构中,关系型数据库与Hadoop生态系统之间的数据流动是常见且关键的需求。Apache Sqoop(SQL-to-Hadoop)正是为解决这一问题而生的高效工具,它专门用于在结构化数据存储(如RDBMS…...
小程序中实现音频播放(原生 + uniapp)
原生: miniprogram/components/mp-audio/index.wxml <view class"imt-audio"><view class"top"><view class"audio-control-wrapper"><image src"{{poster}}" mode"aspectFill" class"…...
SpringBoot接口覆盖上一次调用的实现方案
调用springboot接口时,如何实现覆盖上一次调用 Spring Boot 接口覆盖上一次调用的实现方案 以下是多种实现覆盖上一次接口调用的方案,适用于不同场景。 方案一:同步锁控制(单机环境) 适用场景:单实例…...
小白电路设计-设计7-固定式倍压器直流稳压电源电路设计
介绍 作为电子信息工程的我,电路学习是一定要学习的,可惜目前作为EMC测试工程师,无法兼顾太多,索性不如直接将所学的知识进行运用,并且也可以作为契机,进行我本人的个人提升。祝大家与我一起进行提升。1.本…...
Vue报错...properly without JavaScript enabled. Please enable it to continue
问题: Vue报错Were sorry but apptest1 doesnt work properly without JavaScript enabled. Please enable it to continue 解决: 修改 vue.config.js module.exports {publicPath: ./, // 使用相对路径devServer: {headers: {Access-Control-Allow…...
MySQL的半同步模式
MySQL的主从架构采用的是异步模式 master更新完成后直接发送二进制日志到slave,但是slaves是否真正保存了数据master端不会检测,master端直接保存二进制日志到磁盘,当master端到slave端的网络出现问题时或者master端直接挂掉,二进…...
Redis安装(Windows环境)
文章目录 Resid简介:下载Redis启动Redis服务设置Windows服务常用的Redis服务命令 Resid简介: Redis 是一个开源的使用 ANSI C 语言编写、遵守 BSD 协议、支持网络、可基于内存、分布式、可选持久性的键值对(Key-Value)存储数据库,并提供多种语言的 API。 Redis通常…...
CExercise_09_2动态拼接字符串_1字符串拼接
题目: 标准库函数strcat会将一个字符串追加到另一个字符串的末尾。 现在我们编写一个函数把两个字符串拼接起来,返回拼接的结果,但要求不改变其中任何一个字符串。其函数声明如下: char* my_strcat(const char* prefix, const cha…...
【保姆级图解】插入排序 算法详解:直接插入排序、希尔排序
总体引入 在计算机科学的算法领域中,排序是一项基础且重要的操作。它旨在将一组无序的数据元素重新排列为有序序列,以满足特定的顺序要求,如升序或降序。常见的排序算法可分为不同类别,像插入排序,包含直接插入排序和…...
Python爬虫第10节-lxml解析库用 XPath 解析网页
目录 引言 一、XPath简介 二、XPath常用规则 三、实例讲解 四、节点的选取 4.1 所有节点的选取 4.2 子节点的选取 4.3 父节点选取 五、属性匹配获取及文本获取 5.1 属性匹配 5.2 文本获取 5.3 属性获取 5.4 属性多值匹配 5.5 多属性匹配 六、按序选择 七、节点…...
Prometheus有哪几种服务发现?
Prometheus 支持多种服务发现 (Service Discovery) 机制,用于自动发现需要监控的目标。这些服务发现机制主要分为以下几类: 1. 静态配置 (Static Configuration) Static Configuration: 手动定义静态目标列表。适用于小规模的、固定的目标环境…...
突破焊丝虚影干扰,端子焊点缺陷检测如何实现自动化?
端子焊点作为 3C 产品中连接电路的关键环节,其质量优劣对产品性能有着决定性影响。然而,传统人工检测端子焊点不仅效率低下,难以满足大规模生产需求,而且误判率高,无法精准把控产品质量,成为企业提质增效智…...
2025.04.10-拼多多春招笔试第二题
📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 02. 糖果店的优惠兑换计划 问题描述 K小姐开了一家糖果店,推出了一种特殊的兑换活动。商店有 n n n<...
linux系统下如何提交git和调试
我们默认的ubuntu20.04镜像是没有Git提交的工具,我们需要配置安装包。 安装和更新git的命令 sudo apt update //用于更新软件包索引sudo apt install git //用于安装git版本控制工具 git --version //检查git版本,确认是否安装成功 随便进入linux系统下的一…...
40页的IPD流程指标字典【全文精读】
该文档聚焦 IPD 流程指标,为企业在产品研发管理领域提供全面量化评估标准,主要适用于企业中与产品研发、管理、财务及市场相关的各类人员。 财务类指标:涵盖市场份额、新产品销售比重等,用于评估产品市场竞争力、投资效率…...
如何在Cherry Studio中配置MCP工具服务?国内MCP服务有哪些?
在当今数字化时代,AI助手已成为提升工作效率和创造力的重要工具。Cherry Studio作为一个全能的AI客户端,支持多平台(包括Windows、macOS和Linux),并提供了丰富的功能,如大模型对话、AI绘图和AI翻译等。为了…...
动态词槽管理系统深度设计
动态词槽管理系统深度设计 基于Dual-Encoder的实时增量式语义槽管理方案 一、Dual-Encoder架构优化 1.1 架构创新设计 增强型双塔模型结构: #mermaid-svg-DRhtmuANYnJBJzpu {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill…...
网络安全中信息收集需要收集哪些信息了?汇总
目录 1. 域名信息 2. IP地址与网络信息 3. 备案与注册信息 4. Web应用与中间件信息 5. 操作系统与服务器信息 6. 敏感文件与配置文件 7. 社交工程信息 8. 证书与加密信息 9. API与接口信息 10. 外部威胁情报 11. 历史数据与缓存 常用工具与技术: 在网络…...
代码模板-线段树(区间修改,区间查询和和最值)
题目链接:1270. 数列区间最大值 - AcWing题库 代码: // #pragma GCC optimize(1) // #pragma GCC optimize(2) // #pragma GCC optimize(3,"Ofast","inline")#include<bits/stdc.h> using namespace std; typedef long long…...
LLM介绍
一、核心概念与能力边界 LLM(Large Language Model:大语言模型)是基于海量文本训练的深度学习模型,其核心能力源于Transformer架构与自监督学习机制。关键特征包括: 参数规模:千亿级参数(如GP…...
[数据结构]排序
目录 1、排序的概念 2、常见排序算法 3、直接插入排序 4、希尔排序 5、直接选择排序 6、堆排序 7、冒泡排序 1、排序的概念 排序:所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作 …...
Next.js + Droplet:高并发视频内容平台部署与优化扩展实战
在构建在线服务时,无论你是开发者还是企业技术负责人,扩展性和稳定性始终是绕不开的核心挑战。尤其在涉及高并发访问、大量数据传输和持续内容分发的场景中,系统架构的设计直接决定了用户体验与业务成效。 本文将以视频点播(Video…...
django寻味美食分享与交流网站-计算机毕业设计源码74984
摘 要 美食分享与交流网站是当前社交网络领域的一个热门话题。本研究旨在探讨用户在美食分享网站上的行为和互动模式,以及他们分享和获取美食信息的动机和方式。通过对美食分享网站上用户发文内容和互动数据的分析,揭示了用户在美食分享中的需求和行为规…...
把读写函数里的printf 打印到文件里
使用 fprintf 函数 将输出目标从标准输出(stdout)更改为一个文件指针 1、首先,在头文件或全局变量中定义一个 FILE 类型的指针,用于指向输出文件。 2、在程序启动时,打开文件并将文件指针赋值给上面定义的全局指针。…...
在idea中看spring源码
一、搭建环境 1.1 下载源码到本地 在github中找到spring-framework项目,或者这个地址(https://github.com/spring-projects/spring-framework) 然后把项目下载到本地目录,如图 1.2 然后用idea打开这个项目 1.3 然后等构建&…...
用最简单的方式讲述离散傅里叶级数(DFS)以及离散傅立叶变换(DFT)
文章目录 前言 一、傅里叶变换的多种形式 二、浅谈离散傅里叶级数(DFS) 三、浅谈离散傅里叶变换(DFT) 总结 前言 本文对四种不同的傅里叶变换做了总结与梳理,并针对其中存在联系的形式做了推导。接着又讲述了离散傅里叶…...
python基础语法14-多线程与多进程
Python 多线程与多进程详解 在 Python 中,多线程和多进程是常用的并发编程技术,它们可以帮助程序在处理大量任务时提高效率。Python 提供了多个模块来支持多线程和多进程的开发,包括 threading、multiprocessing 和 asyncio。本文将详细介绍…...
深入解析策略模式在C#中的应用与实现
策略模式(Strategy Pattern)是一种行为型设计模式,它通过将一系列算法封装成不同的策略类,使得算法的选择和使用可以在运行时动态改变,且算法的变化对使用者透明。这种模式可以显著减少程序中的条件判断(如…...
ios按键精灵脚本开发游戏辅助工具的代码逻辑
iOS 按键精灵使用 MQ 语言开发游戏脚本,其代码逻辑围绕游戏内的各种操作展开。我将从常见的游戏操作,如点击、移动等方面, 点击操作逻辑 在游戏中,点击操作是最基础的交互方式之一。比如要实现点击游戏界面上某个固定位置的 “…...
Pycharm(十三)容器类型的公共运算符和公共方法
一、容器类型的公共运算符 这些运算符是可以作用到 容器类型 中的。 常见的如下: :拼接,适用于字符串、列表、元组; *:复制,适用于字符串、列表、元组; in:是否包含,适用于字符串、列表、元…...
Backtrader从0到1——第一个回测策略
Backtrader从0到1——第一个回测策略 0. 前言1. lines && index2. 生成大脑3. 设置起始资金和佣金4. 添加数据(重点)5. 第一个策略——双均线5.1 策略类5.2 策略参数5.3 添加指标5.4 买卖与订单order5.5 完整策略代码 0. 前言 本人翻阅了大量资料…...
GPT - 因果掩码(Causal Mask)
本节代码定义了一个函数 causal_mask,用于生成因果掩码(Causal Mask)。因果掩码通常用于自注意力机制中,以确保模型在解码时只能看到当前及之前的位置,而不能看到未来的信息。这种掩码在自然语言处理任务(如…...
lombok的坑
我使用lombok的Data注解带来的坑。 代码如下: 公共类: package com.tyler.oshi.common;import lombok.Data; import lombok.NoArgsConstructor;/*** author: TylerZhong* description:*/Data NoArgsConstructor public class R {private int code;priv…...
基于Python的网络爬虫技术研究
基于Python的网络爬虫技术研究 以下从多个方面为你介绍基于 Python 的网络爬虫技术: 概述 网络爬虫是一种自动获取网页内容的程序,在 Python 中可以借助诸多强大的库和工具实现。网络爬虫能应用于数据采集、搜索引擎、舆情监测等众多领域。 核心库 …...
微信小程序跳6
//金额格式化 rmoney: function(money) { return parseFloat(money).toFixed(2).toString().split().reverse().join().replace(/(\d{3})/g, $1,) .replace( /\,$/, ).split().reverse().join(); }, daysUntil: function(milliseconds) { const endDate new Date(milliseconds…...
项目1笔记
Data Data 是一个常用的 Lombok 注解,主要用于 Java 类中,可以自动生成以下内容: Getter(所有字段) Setter(所有非 final 字段) toString() 方法 equals() 和 hashCode() 方法 无参构造函…...