JavaScript性能优化实战（10）：前端框架性能优化深度解析
引言
React、Vue、Angular等框架虽然提供了强大的抽象和开发效率，但不恰当的使用方式会导致严重的性能问题，针对这些问题，本文将深入探讨前端框架性能优化的核心技术和最佳实践。
React性能优化核心技术
React通过虚拟DOM和高效的渲染机制提供了出色的性能，但当应用规模增长时，性能问题依然会显现。React性能优化的核心是减少不必要的渲染和计算。
1. 组件重渲染优化：memo、PureComponent与shouldComponentUpdate
React组件在以下情况下会重新渲染：
- 组件自身状态(state)变化
- 父组件重新渲染导致子组件的props变化
- 上下文(Context)变化
使用React.memo可以避免函数组件在props未变化时的重新渲染：
// 未优化的组件 - 每次父组件渲染都会重新渲染
function ExpensiveComponent({ data }) {console.log('ExpensiveComponent render');// 复杂的渲染逻辑return (<div>{data.map(item => (<div key={item.id} className="item">{item.name} - {item.value}</div>))}</div>);
}// 使用memo优化 - 只在props变化时才重新渲染
const MemoizedExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {console.log('MemoizedExpensiveComponent render');// 复杂的渲染逻辑return (<div>{data.map(item => (<div key={item.id} className="item">{item.name} - {item.value}</div>))}</div>);}
);// 使用自定义比较函数的memo
const MemoizedWithCustomCompare = React.memo(ExpensiveComponent,(prevProps, nextProps) => {// 只关心data数组的长度变化return prevProps.data.length === nextProps.data.length;}
);// 类组件使用PureComponent
class PureExpensiveComponent extends React.PureComponent {render() {console.log('PureExpensiveComponent render');// 相同的渲染逻辑return (<div>{this.props.data.map(item => (<div key={item.id} className="item">{item.name} - {item.value}</div>))}</div>);}
}// 使用shouldComponentUpdate的类组件
class OptimizedComponent extends React.Component {shouldComponentUpdate(nextProps) {// 自定义深度比较逻辑return JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data);}render() {console.log('OptimizedComponent render');return (<div>{this.props.data.map(item => (<div key={item.id} className="item">{item.name} - {item.value}</div>))}</div>);}
}
性能对比：
| 组件类型 | 父组件渲染次数 | 组件实际渲染次数 | 性能提升 |
|---|---|---|---|
| 普通函数组件 | 100 | 100 | 基准线 |
| React.memo包装 | 100 | 5 | 95% |
| 自定义比较memo | 100 | 3 | 97% |
| PureComponent | 100 | 5 | 95% |
| shouldComponentUpdate | 100 | 4 | 96% |
2. useMemo与useCallback钩子
在函数组件中，每次渲染都会重新创建内部的函数和计算值。useMemo和useCallback钩子允许我们在依赖不变时复用先前的值，避免不必要的计算和渲染：
function SearchResults({ query, data }) {// 未优化：每次渲染都重新过滤数据// const filteredData = data.filter(item => // item.name.toLowerCase().includes(query.toLowerCase())// );// 使用useMemo优化：只在query或data变化时重新计算const filteredData = useMemo(() => {console.log('重新计算过滤结果');return data.filter(item => item.name.toLowerCase().includes(query.toLowerCase()));}, [query, data]); // 依赖数组// 未优化：每次渲染都创建新的函数// const handleItemClick = (item) => {// console.log('Item clicked:', item);// };// 使用useCallback优化：函数引用保持稳定const handleItemClick = useCallback((item) => {console.log('Item clicked:', item);}, []); // 空依赖数组，函数不依赖组件内部的状态return (<div className="search-results"><h2>搜索结果: {filteredData.length}条</h2><ul>{filteredData.map(item => (<ResultItem key={item.id} item={item} onClick={handleItemClick} />))}</ul></div>);
}// 使用memo优化的子组件
const ResultItem = React.memo(function ResultItem({ item, onClick }) {console.log('ResultItem render:', item.id);return (<li className="result-item"onClick={() => onClick(item)}>{item.name}</li>);
});
性能对比：
| 优化手段 | 大数据集(10,000项)查询耗时 | 组件重渲染次数 | 内存占用 |
|---|---|---|---|
| 未优化 | 120ms | 5,000 | 基准线 |
| 使用useMemo | 2ms (首次120ms) | 1 | -40% |
| 使用useCallback | 不适用 | 10 | -25% |
| 两者结合 | 2ms (首次120ms) | 1 | -45% |
3. 列表渲染优化
在React中渲染大型列表是常见的性能瓶颈，可以通过虚拟化和分页技术优化：
// 使用react-window实现列表虚拟化
import { FixedSizeList } from 'react-window';function VirtualizedList({ items }) {// 行渲染器const Row = ({ index, style }) => (<div style={{ ...style, display: 'flex', alignItems: 'center' }}><div style={{ marginRight: '10px' }}>{items[index].id}</div><div>{items[index].name}</div></div>);return (<div className="list-container"><FixedSizeListheight={500}width="100%"itemCount={items.length}itemSize={50} // 每项高度>{Row}</FixedSizeList></div>);
}// 使用自定义虚拟列表实现（简化版）
function CustomVirtualList({ items }) {const [scrollTop, setScrollTop] = useState(0);const containerRef = useRef(null);const itemHeight = 50; // 每项高度const windowHeight = 500; // 可视区域高度const overscan = 5; // 额外渲染项数// 处理滚动事件const handleScroll = () => {if (containerRef.current) {setScrollTop(containerRef.current.scrollTop);}};// 计算可见区域const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);const endIndex = Math.min(items.length - 1,Math.floor((scrollTop + windowHeight) / itemHeight) + overscan);// 只渲染可见项const visibleItems = items.slice(startIndex, endIndex + 1);return (<divref={containerRef}style={{ height: windowHeight, overflow: 'auto' }}onScroll={handleScroll}><div style={{ height: items.length * itemHeight }}>{visibleItems.map(item => (<divkey={item.id}style={{position: 'absolute',top: item.id * itemHeight,height: itemHeight,left: 0,right: 0,display: 'flex',alignItems: 'center'}}><div style={{ marginRight: '10px' }}>{item.id}</div><div>{item.name}</div></div>))}</div></div>);
}
性能对比：
| 列表实现 | 渲染10,000项列表时间 | 内存占用 | 滚动帧率 |
|---|---|---|---|
| 标准React列表 | 850ms | 100% | 15 FPS |
| react-window虚拟化 | 25ms | 15% | 60 FPS |
| 自定义虚拟化 | 30ms | 18% | 58 FPS |
4. React Context优化
Context API提供了便捷的状态共享机制，但使用不当会导致大范围重渲染：
// 未优化的Context使用方式
const ThemeContext = React.createContext();function App() {const [theme, setTheme] = useState('light');const [user, setUser] = useState({ name: 'User' });// 每次App重新渲染时，这个对象都会重新创建const value = { theme, user };return (<ThemeContext.Provider value={value}><Header /><Content /><Footer /></ThemeContext.Provider>);
}// 分离Context优化
const ThemeContext = React.createContext();
const UserContext = React.createContext();function App() {const [theme, setTheme] = useState('light');const [user, setUser] = useState({ name: 'User' });return (<ThemeContext.Provider value={theme}><UserContext.Provider value={user}>相关文章：
JavaScript性能优化实战（10）：前端框架性能优化深度解析
引言 React、Vue、Angular等框架虽然提供了强大的抽象和开发效率，但不恰当的使用方式会导致严重的性能问题，针对这些问题，本文将深入探讨前端框架性能优化的核心技术和最佳实践。 React性能优化核心技术 React通过虚拟DOM和高效的渲染机制提供了出色的性能，但当应用规模…...
vue3中预览Excel文件
1.前言 有时候项目中需要预览Excel文件，特别是对于.xls格式的Excel文件许多插件都不支持，经过尝试，最终有三种方案可以实现.xlsx和.xls格式的Excel文件的预览，各有优缺点 2.luckyexcel插件 2.1说明 该插件优点在于能保留源文件…...
VsCode和AI的前端使用体验：分别使用了Copilot、通义灵码、iflyCode和Trae
1、前言 大杂烩~每次开发一行代码，各个AI争先恐后抢着提供帮助 备注：四款插件都需要先去官网注册账号，安装好之后有个账号验证。 2、插件详解 2.1、AI分析的答案 GitHub Copilot 定位：老牌 AI 代码补全工具，深度集成…...
【问题排查】easyexcel日志打印Empty row!
问题原因 日志打印I/O 操作开销（如 Log4j 的 FileAppender）会阻塞业务线程，直到日志写入完成，导致接口响应变慢 问题描述 在线上环境，客户反馈导入一个不到1MB的excel文件，耗时将近5分钟。 问题排…...
若依框架SpringBoot从Mysql替换集成人大金仓（KingBase）数据库
一、安装人大金仓数据库 1、下载 前往人大金仓数据库下载自己想要的版本（建议下载Mysql兼容版）人大金仓官网，点击服务与支持，点击安装包下载 点击软件版本，选择数据库 选择合适的版本，点击下载࿰…...
Graph Representation Learning【图最短路径优化/Node2vec/Deepwalk】
文章目录 Q1：网络性质：1.数据读取与邻接表构建：2.基本特征和连通性： 算法思路：1. 广度优先搜索（BFS）标记前驱:2. 回溯生成所有最短路径: 实验结果：复杂度分析： Q2&#x…...
ZYNQ Overlay硬件库使用指南：用Python玩转FPGA加速
在传统的FPGA开发中，硬件设计需要掌握Verilog/VHDL等硬件描述语言，这对软件开发者而言门槛较高。Xilinx的PYNQ框架通过Overlay硬件库彻底改变了这一现状——开发者只需调用Python API即可控制FPGA的硬件模块，实现硬件加速与灵活配置。本文将深入探讨ZYNQ Overlay的核心概念、…...
Git基础使用方法与命令总结
Git 是一个分布式版本控制系统，用于跟踪代码或文件的修改历史。以下是 Git 的基础使用方法和常用命令，适合快速上手： 1. 安装与配置 安装 Git 下载地址：https://git-scm.com/downloads（支持 Windows/macOS/Linux&…...
rust语言，与c,go语言一样也是编译成二进制文件吗？
是的，Rust 和 C、Go 一样，默认情况下会将代码编译成二进制可执行文件（如 ELF、PE、Mach-O 等格式），但它们的编译过程和运行时特性有所不同： 1. Rust（类似 C，直接编译为机器码&#x…...
从银行排队到零钱支付：用“钱包经济学”重构Java缓存认知
"当你的系统还在频繁访问数据库银行时，聪明的开发者早已学会用钱包零钱策略实现毫秒级响应——本文将用理财思维拆解缓存设计精髓，教你如何让代码学会小额快付的架构艺术。" 【缓存】作为程序员必须理解的概念之一，让我们用 「钱…...
Json rpc 2.0比起传统Json在通信中的优势
JSON-RPC 2.0 相较于直接使用传统 JSON 进行通信，在协议规范性、开发效率、通信性能等方面具有显著优势。以下是核心差异点及技术价值分析： 一、结构化通信协议，降低开发成本 传统 JSON 通信需要开发者自定义数据结构和处理逻辑，…...
无缝部署您的应用程序：将 Jenkins Pipelines 与 ArgoCD 集成
在 DevOps 领域，自动化是主要目标之一。这包括自动化软件部署方式。与其依赖某人在部署软件的机器上进行 rsync/FTP/编写软件，不如使用 CI/CD 的概念。 CI，即持续集成，是通过代码提交创建工件的步骤。这可以是 Docker 镜像&#…...
 2-5-1 GB/T 25070—2019 附录B (资料性附录)第三级系统安全保护环境设计示例)
网络安全-等级保护(等保) 2-5-1 GB/T 25070—2019 附录B (资料性附录)第三级系统安全保护环境设计示例
################################################################################ 文档标记说明： 淡蓝色：时间顺序标记。 橙色：为网络安全标准要点。 引用斜体：为非本文件内容，个人注解说明。 加粗标记：…...
精准掌控张力动态，重构卷对卷工艺设计
一、MapleSim Web Handling Library仿真和虚拟调试解决方案 在柔性材料加工领域，卷对卷（Roll-to-Roll）工艺的效率与质量直接决定了产品竞争力。如何在高动态生产场景中实现张力稳定、减少断裂风险、优化加工速度，是行业长期面临的…...
怎么使用python进行PostgreSQL 数据库连接？
使用Python连接PostgreSQL数据库 在Python中连接PostgreSQL数据库，最常用的库是psycopg2。以下是详细的使用指南： 安装psycopg2 首先需要安装psycopg2库： pip install psycopg2 # 或者使用二进制版本（安装更快） pi…...
SQL Server权限设置的几种方法
SQL Server 的权限设置是数据库安全管理的核心，正确配置权限可以有效防止数据泄露、误操作和恶意篡改。下面详细介绍 SQL Server 权限设置的方法，涵盖从登录名创建到用户授权的完整流程。 一、权限设置的基本概念 SQL Server 的权限体系主要包括以下几…...
Neo4j（一） - Neo4j安装教程（Windows）
文章目录 前言一、JDK与Neo4j版本对应关系二、JDK11安装及配置1. JDK11下载2. 解压3. 配置环境变量3.1 打开系统属性设置3.2 新建系统环境变量3.3 编辑 PATH 环境变量3.4 验证环境变量是否配置成功 三、Neo4j安装（Windows）1. 下载并解压Neo4j安装包1.1 下…...
idea启用lombok
有lombok的项目在用idea打开的时候会提示启用lombok，但是。。。不小心就落下了...
uniapp婚纱预约小程序
uniapp婚纱预约小程序，这套设计bug很多，是一个半成品，一个客户让我修改，很多问题，页面显示不了，评论不能用，注册不能用，缺少表，最后稍微改一下，但是也有小问题…...
基于OpenCV的SIFT特征匹配指纹识别
文章目录 引言一、概述二、关键代码解析1. SIFT特征提取与匹配2. 指纹身份识别3. 姓名映射 三、使用示例四、技术分析五、完整代码六、总结 引言 指纹识别是生物特征识别技术中最常用的方法之一。本文将介绍如何使用Python和OpenCV实现一个简单的指纹识别系统，该系…...
Vue3 加快页面加载速度 使用CDN外部库的加载 提升页面打开速度 服务器分发
介绍 CDN（内容分发网络）通过全球分布的边缘节点，让用户从最近的服务器获取资源，减少网络延迟，显著提升JS、CSS等静态文件的加载速度。公共库（如Vue、React、Axios）托管在CDN上，减少…...
C++23：ranges::iota、ranges::shift_left和ranges::shift_right详解
文章目录 引言ranges::iota定义与功能使用场景代码示例 ranges::shift_left定义与功能使用场景代码示例 ranges::shift_right定义与功能使用场景代码示例 总结 引言 C23作为C编程语言的一个重要版本，为开发者带来了许多新的特性和改进。其中，ranges::io…...
Spring 框架中适配器模式的五大典型应用场景
Spring 框架中适配器模式的应用场景 在 Spring 框架中，适配器模式（Adapter Pattern）被广泛应用于将不同组件的接口转化为统一接口，从而实现组件间的无缝协作。以下是几个典型的应用场景： 1. HandlerAdapter - MVC 请…...
【Unity】 HTFramework框架（六十五）ScrollList滚动数据列表
更新日期：2025年5月16日。 Github 仓库：https://github.com/SaiTingHu/HTFramework Gitee 仓库：https://gitee.com/SaiTingHu/HTFramework 索引 一、ScrollList滚动数据列表二、使用ScrollList1.快捷创建ScrollList2.ScrollList的属性3.自定义…...
Android SwitchButton 使用详解：一个实际项目的完美实践
Android SwitchButton 使用详解：一个实际项目的完美实践 引言 在最近开发的 Android 项目中，我遇到了一个需要自定义样式开关控件的需求。经过多方比较，最终选择了功能强大且高度可定制的 SwitchButton 控件。本文将基于实际项目中的使用案…...
【C++ 基础数论】质数判断
质数判断 质数：对于所有大于 1 的自然数而言，如果该数除 1 和自身以外没有其它因数 / 约数，则该数被称为为质数，质数也叫素数。 如何判定一个数是否为质数呢？ 一个简单的方法是 试除法 ： 对于一个数 n&…...
)
【数据结构】手撕AVL树(万字详解)
目录 AVL树的概念为啥要有AVL树？概念 AVL树节点的定义AVL树的插入AVL树的旋转左单旋右单旋左右双旋右左双旋 AVL树的查找AVL树的验证end AVL树的概念 为啥要有AVL树？ 在上一章节的二叉搜索树中，我们在插入节点的操作中。有可能一直往一边插…...
Chrome代理IP配置教程常见方式附问题解答
在网络隐私保护和跨境业务场景中，为浏览器配置代理IP已成为刚需。无论是访问地域限制内容、保障数据安全，还是管理多账号业务，掌握Chrome代理配置技巧都至关重要。本文详解三种主流代理设置方式，助你快速实现精准流量管控。 方式一…...
SpringBoot + Shiro + JWT 实现认证与授权完整方案实现
SpringBoot Shiro JWT 实现认证与授权完整方案 下面博主将详细介绍如何使用 SpringBoot 整合 Shiro 和 JWT 实现安全的认证授权系统，包含核心代码实现和最佳实践。 一、技术栈组成 技术组件- 作用版本要求SpringBoot基础框架2.7.xApache Shiro认证和授权核心1.…...
深入解析VPN技术原理：安全网络的护航者
在当今信息化迅速发展的时代，虚拟私人网络（VPN）技术成为了我们在互联网时代保护隐私和数据安全的重要工具。VPN通过为用户与网络之间建立一条加密的安全通道，确保了通讯的私密性与完整性。本文将深入解析VPN的技术原理、工作机制以…...
OceanBase 的系统变量、配置项和用户变量有何差异
在继续阅读本文之前，大家不妨先思考一下，数据库中“系统变量”、“用户变量”以及“配置项”这三者之间有何不同。如果感到有些模糊，那么本文将是您理清这些概念的好帮手。 很多用户在使用OceanBase数据库中的“配置项”和“系统变量”&#…...
ReinboT：通过强化学习增强机器人视觉-语言操控能力
25年5月来自浙大和西湖大学的论文“ReinboT: Amplifying Robot Visual-Language Manipulation with Reinforcement Learning”。 视觉-语言-动作 (VLA) 模型通过模仿学习在一般机器人决策任务中展现出巨大潜力。然而，训练数据的质量参差不齐通常会限制这些模型的性…...
MySQL联表查询：多表关联与嵌套查询指南
引言 各位数据库爱好者们好！今天我们要挑战MySQL查询技能的高阶关卡——复杂查询 🚀。在真实业务场景中，数据往往分散在多个表中，就像拼图的各个碎片，只有掌握了多表查询的"拼图技巧"，才能将它们…...
)
QBasic 一款古老的编程语言在现代学习中的价值(附程序)
QBasic（Quick Beginner’s All-purpose Symbolic Instruction Code）是微软公司于 1991 年推出的一款简单易学的编程语言，作为BASIC语言的变种，它曾广泛应用于教育领域和初学者编程入门。尽管在当今Python、Java等现代编程语言主导…...
基于Backtrader库的均线策略实现与回测
本文将通过Python语言和强大的Backtrader库，详细介绍如何实现一个基于均线的简单交易策略，并进行历史数据的回测。将一步步构建这个策略，从数据获取、策略定义到回测结果分析，帮助你深入理解并掌握这一过程。 一、环境配置与库安装 1.1 安装必要的Python库 确保你已经安…...
Elasticsearch 分词与字段类型（keyword vs. text）面试题
Elasticsearch 分词与字段类型（keyword vs. text）面试题 🔍 目录 基础概念底层存储查询影响多字段聚合与排序分词器实战排查总结基础概念 💡 问题1：Elasticsearch 中的 keyword 和 text 类型有什么区别？ 👉 查看参考答案 对比项keywordtext分词（Analysis）❌ 不进…...
Java 后端给前端传Long值，精度丢失的问题与解决
为什么后端 Long 类型 ID 要转为 String？ 在前后端分离的开发中，Java 后端通常使用 Long 类型作为主键 ID（如雪花算法生成的 ID）。但如果直接将 Long 返回给前端，可能会导致前端精度丢失的问题，特别是在 J…...
【C++】 —— 笔试刷题day_29
一、排序子序列 题目解析 一个数组的连续子序列，如果这个子序列是非递增或者非递减的；这个连续的子序列就是排序子序列。 现在给定一个数组，然后然我们判断这个子序列可以划分成多少个排序子序列。 例如：1 2 3 2 2 1 可以划分成 …...
高光谱遥感图像处理之数据分类的fcm算法
基于模糊C均值聚类（FCM）的高光谱遥感图像分类MATLAB实现示例 %% FCM高光谱图像分类示例 clc; clear; close all;%% 数据加载与预处理 % 加载示例数据（此处使用公开数据集Indian Pines的简化版） load(indian_pines.mat); % 包含变…...
衡量 5G 和未来网络的安全性
大家读完觉得有帮助记得关注和点赞！！！ 抽象 在当今日益互联和快节奏的数字生态系统中，移动网络（如 5G）和未来几代（如 6G）发挥着关键作用，必须被视为关键基础设施。确保其…...
【Vite】前端开发服务器的配置
定义一些开发服务器的行为和代理规则 服务器的基本配置 server: {host: true, // 监听所有网络地址port: 8081, // 使用8081端口open: true, // 启动时自动打开浏览器cors: true // 启用CORS跨域支持 } 代理配置 proxy: {/api: {target: https://…...
文章记单词 | 第85篇（六级）
一，单词释义 verb /vɜːrb/- n. 动词wave /weɪv/- v. 挥手；波动；挥舞 /n. 波浪；波；挥手add /d/- v. 增加；添加；补充说liberal /ˈlɪbərəl/- adj. 自由的；开明的；慷…...
通过实例讲解螺旋模型
目录 一、螺旋模型的核心概念 二、螺旋模型在电子商城系统开发中的应用示例 第 1 次螺旋：项目启动与风险初探...
（面试）Android各版本新特性
Android 6.0 (Marshmallow, API 23) 运行时权限管理：用户可在应用运行时动态授予或拒绝权限，取代安装时统一授权4。Doze模式与应用待机：优化后台耗电，延长设备续航5。指纹识别支持：原生API支持指纹身份验证。 Android…...
如何有效的开展接口自动化测试？
🍅 点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快 一、简介 接口自动化测试是指使用自动化测试工具和脚本对软件系统中的接口进行测试的过程。其目的是在软件开发过程中，通过对接口的自动化测试来提高测…...
当 PyIceberg 和 DuckDB 遇见 AWS S3 Tables：打造 Serverless 数据湖“开源梦幻组合”
引言 在一些大数据分析场景比如电商大数据营销中，我们需要快速分析存储海量用户行为数据（如浏览、加购、下单），以进行用户行为分析，优化营销策略。传统方法依赖 Spark/Presto 集群或 Redshift 查询 S3 上的 Parquet/O…...
泰迪杯特等奖案例深度解析：基于MSER-CNN的商品图片字符检测与识别系统设计
（第四届泰迪杯数据挖掘挑战赛特等奖案例全流程拆解） 一、案例背景与核心挑战 1.1 行业痛点与场景需求 在电商平台中，商品图片常包含促销文字（如“3折起”“限时秒杀”），但部分商家采用隐蔽文字误导消费者（如“起”字极小或位于边角）。传统人工审核效率低（日均处理量…...
开发工具指南
后端运维场用工具 工具文档简介1panel安装指南运维管理面板网盘功能介绍网盘jenkins可以通过1panel 进行安装jpom辅助安装文档后端项目发布工具...
将 Element UI 表格元素导出为 Excel 文件(处理了多级表头和固定列导出的问题）
import { saveAs } from file-saver import XLSX from xlsx /*** 将 Element UI 表格元素导出为 Excel 文件* param {HTMLElement} el - 要导出的 Element UI 表格的 DOM 元素* param {string} filename - 导出的 Excel 文件的文件名（不包含扩展名）*/ ex…...
)
图像对比度调整(局域拉普拉斯滤波)
一、背景介绍 之前刷对比度相关调整算法，找到效果不错，使用局域拉普拉斯做图像对比度调整，尝试复现和整理了下相关代码。 二、实现流程 1、基本原理 对输入图像进行高斯金字塔拆分，对每层的每个像素都针对性处理，生产…...