当前位置：首页 > news >正文

2025版 JavaScript性能优化实战指南从入门到精通

news 来源：原创 2025/6/29 8:52:43

JavaScript作为现代Web应用的核心技术，其性能直接影响用户体验。本文将深入探讨JavaScript性能优化的各个方面，提供可落地的实战策略。

一、代码层面的优化

1. 减少DOM操作

DOM操作是JavaScript中最昂贵的操作之一：

// 不好的做法：频繁操作DOM
for (let i = 0; i < 100; i++) {document.getElementById('list').innerHTML += `<li>Item ${i}</li>`;
}// 优化做法：使用文档片段
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {const li = document.createElement('li');li.textContent = `Item ${i}`;fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

2. 事件委托

减少事件监听器的数量：

// 不好的做法：为每个元素添加监听器
document.querySelectorAll('button').forEach(button => {button.addEventListener('click', handleClick);
});// 优化做法：事件委托
document.getElementById('container').addEventListener('click', event => {if (event.target.tagName === 'BUTTON') {handleClick(event);}
});

3. 避免内存泄漏

// 不好的做法：可能导致内存泄漏
window.addEventListener('resize', () => {// 大量计算
});// 优化做法：适时移除事件监听
function handleResize() {// 大量计算
}window.addEventListener('resize', handleResize);// 当不再需要时
window.removeEventListener('resize', handleResize);

二、算法与数据结构优化

1. 选择合适的数据结构

// 查找操作频繁时使用Set而不是Array
const array = [1, 2, 3, 4, 5];
console.log(array.includes(3)); // O(n)const set = new Set([1, 2, 3, 4, 5]);
console.log(set.has(3)); // O(1)

2. 缓存计算结果

// 不好的做法：重复计算
function factorial(n) {if (n === 0) return 1;return n * factorial(n - 1);
}// 优化做法：记忆化
const memo = new Map();
function factorialMemo(n) {if (memo.has(n)) return memo.get(n);if (n === 0) return 1;const result = n * factorialMemo(n - 1);memo.set(n, result);return result;
}

三、异步编程优化

1. 合理使用微任务和宏任务

// 需要立即执行但不想阻塞UI使用微任务
function runMicrotask(callback) {if (typeof Promise !== 'undefined') {Promise.resolve().then(callback);} else if (typeof MutationObserver !== 'undefined') {const observer = new MutationObserver(callback);const textNode = document.createTextNode('');observer.observe(textNode, { characterData: true });textNode.data = '1';} else {setTimeout(callback, 0);}
}

2. 防抖和节流

// 防抖：连续触发只执行最后一次
function debounce(fn, delay) {let timer;return function(...args) {clearTimeout(timer);timer = setTimeout(() => fn.apply(this, args), delay);};
}// 节流：连续触发时每隔一段时间执行一次
function throttle(fn, interval) {let lastTime = 0;return function(...args) {const now = Date.now();if (now - lastTime >= interval) {fn.apply(this, args);lastTime = now;}};
}

四、网络请求优化

1. 请求合并

// 不好的做法：多个独立请求
async function fetchData() {const user = await fetch('/user');const posts = await fetch('/posts');const comments = await fetch('/comments');return { user, posts, comments };
}// 优化做法：批量请求
async function fetchBatchData() {const [user, posts, comments] = await Promise.all([fetch('/user'),fetch('/posts'),fetch('/comments')]);return { user, posts, comments };
}

2. 数据缓存

const apiCache = new Map();async function cachedFetch(url) {if (apiCache.has(url)) {return apiCache.get(url);}const response = await fetch(url);const data = await response.json();apiCache.set(url, data);return data;
}

五、渲染性能优化

1. 使用requestAnimationFrame

// 不好的做法：直接使用setTimeout做动画
function animate() {// 动画逻辑setTimeout(animate, 16);
}// 优化做法：使用requestAnimationFrame
function animate() {// 动画逻辑requestAnimationFrame(animate);
}

2. Web Workers处理密集型任务

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: largeData });
worker.onmessage = function(event) {console.log('Result:', event.data);
};// worker.js
self.onmessage = function(event) {const result = processData(event.data);self.postMessage(result);
};

六、现代JavaScript特性利用

1. 使用Web Assembly处理性能瓶颈

// 加载并运行WebAssembly模块
WebAssembly.instantiateStreaming(fetch('module.wasm')).then(obj => {const result = obj.instance.exports.compute();console.log(result);});

2. 合理使用TypedArray

// 处理大量数值数据时
const buffer = new ArrayBuffer(1024 * 1024); // 1MB
const int32View = new Int32Array(buffer);for (let i = 0; i < int32View.length; i++) {int32View[i] = i;
}

七、工具与测量

1. 性能测量API

// 使用Performance API测量代码执行时间
function measure() {performance.mark('start');// 要测量的代码performance.mark('end');performance.measure('My Measurement', 'start', 'end');const measures = performance.getEntriesByName('My Measurement');console.log(measures[0].duration);performance.clearMarks();performance.clearMeasures();
}

2. Chrome DevTools使用技巧

使用Performance面板记录和分析运行时性能
使用Memory面板检测内存泄漏
使用Coverage工具查找未使用的JavaScript代码

八、框架特定优化

React优化示例

// 使用React.memo避免不必要的重新渲染
const MyComponent = React.memo(function MyComponent(props) {/* 渲染使用props */
});// 使用useCallback缓存回调函数
function Parent() {const handleClick = useCallback(() => {console.log('Clicked');}, []);return <Child onClick={handleClick} />;
}

Vue优化示例

// 使用v-once标记静态内容
<template><div v-once>{{ staticContent }}</div>
</template>// 合理使用计算属性
export default {computed: {filteredList() {return this.list.filter(item => item.active);}}
}

九、构建与打包优化

1. 代码分割

// 动态导入实现按需加载
button.addEventListener('click', async () => {const module = await import('./module.js');module.doSomething();
});

2. Tree Shaking配置

确保webpack配置支持Tree Shaking：

// webpack.config.js
module.exports = {mode: 'production',optimization: {usedExports: true,}
};

十、移动端特别优化

1. 减少主线程负载

// 将非UI更新任务放到空闲期执行
function runWhenIdle(task) {if ('requestIdleCallback' in window) {requestIdleCallback(task);} else {setTimeout(task, 0);}
}

2. 触摸事件优化

// 使用passive事件监听器改善滚动性能
document.addEventListener('touchstart', onTouchStart, { passive: true });

总结

JavaScript性能优化是一个系统工程，需要从代码编写、算法选择、网络请求、渲染流程等多个维度综合考虑。关键点包括：

减少不必要的DOM操作和重绘
合理使用缓存和记忆化技术
优化算法和数据结构选择
利用现代浏览器API和硬件加速
使用性能分析工具持续监控

记住，优化应该基于实际测量而非猜测，使用性能分析工具找出真正的瓶颈，有针对性地进行优化才能获得最佳效果。

2025版 JavaScript性能优化实战指南从入门到精通

JavaScript作为现代Web应用的核心技术，其性能直接影响用户体验。本文将深入探讨JavaScript性能优化的各个方面，提供可落地的实战策略。一、代码层面的优化 1. 减少DOM操作 DOM操作是JavaScript中最昂贵的操作之一： // 不好的做法&#x…...

编程日记 2025/6/29 8:52:43

RAGFlow知识检索原理解析：混合检索架构与工程实践

一、核心架构设计 RAGFlow构建了四阶段处理流水线，其检索系统采用双路召回+重排序的混合架构： S c o r e f i n a l = α ⋅ B M...

编程日记 2025/6/29 8:27:39

148. Sort List 题目描述代码： /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNod…...

编程日记 2025/6/27 22:48:31

C#学习11——集合

一、集合是一组对象的容器，提供了高效的存储、检索和操作数据的方式。 C# 集合分为泛型集合（推荐使用）和非泛型集合，主要位于System.Collections和System.Collections.Generic命名空间中。二、集合有哪些？ 1&…...

编程日记 2025/6/29 7:47:02

paddlehub搭建ocr服务

搭建环境： Ubuntu20.041080Ti显卡由于GPU硬件比较老，是Pascal架构，只能支持到paddle2.4.2版本，更高版本无法支持；同时，因为paddle老版本的依赖发生了变化，有些地方存在冲突，花费了…...

编程日记 2025/6/29 7:55:47

CSS3过渡

一、什么是CSS3过渡 CSS3 过渡（transitions）是一种效果，它允许你平滑地改变CSS属性的值，从一个状态过渡到另一个状态。是一种动画转换的过程，如渐现、渐弱、动画快慢等。过渡效果可以在用户与页面进行交互时触发&#…...

编程日记 2025/6/29 7:59:41

比斯特自动化|移动电源全自动点焊机：高效点焊助力移动电源制造

在移动电源市场蓬勃发展的当下，电池组合的点焊工艺要求愈发严格。移动电源全自动点焊机应运而生，成为提升生产效率与产品质量的关键设备。工作原理与结构组成移动电源全自动点焊机通过瞬间放电产生高温，使电池极耳与镍带等材料在极短时间…...

编程日记 2025/6/29 8:15:55

游戏引擎学习第305天:在平台层中使用内存 Arena 的方法与思路

回顾前一天内容，并为今天的开发工作设定方向我们正在直播制作完整游戏，当前正在实现一个精灵图（sprite graph）的排序系统。排序的代码已经写完，过程并不复杂，虽然还没做太多优化，但总体思路比…...

编程日记 2025/6/29 8:32:32

[Java][Leetcode middle] 6. Z 字形变换

法一，自己想的使用一个复合结构的 List<ArrayList<String>> 来存储每一行的字母，最后按序输出。使用flag来判断到底放到哪一行上去。flag按照：0–1–2–1–0–1–2这样变化，实现躺着的Z字形。 public String conve…...

编程日记 2025/6/29 8:15:54

零基础设计模式——第二部分：创建型模式 - 原型模式

第二部分：创建型模式 - 5. 原型模式 (Prototype Pattern) 我们已经探讨了单例、工厂方法、抽象工厂和生成器模式。现在，我们来看创建型模式的最后一个主要成员——原型模式。这种模式关注的是通过复制现有对象来创建新对象，而不是通过传统的…...

编程日记 2025/6/29 7:42:15

完整改进RIME算法，基于修正多项式微分学习算子Rime-ice增长优化器，完整MATLAB代码获取

1 简介为了有效地利用雾状冰生长的物理现象，最近开发了一种优化算法——雾状优化算法（RIME）。它模拟硬雾状和软雾状过程，构建硬雾状穿刺和软雾状搜索机制。在本研究中，引入了一种增强版本，称为修改的RIME…...

编程日记 2025/6/27 22:48:30

【1——Android端添加隐私协议(unity)1/3】

前言：这篇仅对于unity 发布Android端上架国内应用商店添加隐私协议，隐私协议是很重要的东西，没有这个东西，是不上了应用商店的。对于仅仅添加隐私协议，我知道有三种方式,第一种和第二种基本一样 1.直接在unity里面新…...

编程日记 2025/6/29 7:49:57

笔记本6GB本地可跑的图生视频项目（FramePack）

文章目录 （一）简介（二）本地执行（2.1）下载（2.2）更新（2.3）运行（2.4）生成 （三）注意（3.1）效…...

编程日记 2025/6/29 7:52:52

Android View的事件分发机制

ViewGroup的事件分发逻辑从Activity传递给Window，再传递给ViewGroup，ViewGroup的dispatchTouchEvent()会被调用，如果onInterceptTouchEvent()返回true 转交自身onTouchEvent()处理,如果返回false继续向子View传递,子View的dispatchTouchEve…...

编程日记 2025/6/29 7:38:23

Python字符串格式化(二）： f-string的进化

文章目录一、Python 3.6：重新发明字符串格式化（2016）1. 语法糖的诞生：表达式直嵌技术2. 性能与可读性的双重提升3. 奠定现代格式化的基础架构二、Python 3.7：解锁异步编程新场景（2018）1. 异步…...

编程日记 2025/6/27 23:37:10

力扣HOT100之二叉树：124. 二叉树中的最大路径和

这道题是困难题，靠自己想还是挺难想的，还是去看的灵神的题解，感觉还是要多复习一下这道题。这道题的思路和之前做的543. 二叉树的直径很像，可以参考之前的这篇博客。这里我们还是用递归来做，定义一个lambda函数来实现递…...

编程日记 2025/6/27 22:48:38

【C++】位图+布隆过滤器

1.位图概念所谓位图，就是用每一位来存放某种状态，适用于海量数据，数据无重复的场景。通常是用来判断某个数据存不存在的或是否被标记。 1.二进制位表示 ： 位图中的每一位（bit）代表一个元素的状态。通常&…...

编程日记 2025/6/27 23:24:33

Google Agent Development Kit与MCP初试

Google Agent Development Kit与MCP初试一、背景知识二、搭建智能大脑 - Ollama服务器2.1 为什么要先搭建Ollama？2.2 搭建ollama服务器2.2.1 安装2.2.2 试着用curl命令"问"AI一个问题： 三、构建智能体工坊 - ADK环境3.1 创建容器3.2 安装核心…...

编程日记 2025/6/27 22:48:37

云原生+大数据

虚拟化： 虚拟化，是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机。在一台计算机上同时运行多个逻辑计算机，每个逻辑计算机可运行不同的操作系统，并且应用程序都可以在相互独立的空间内运行而互不影响，从而显著提…...

编程日记 2025/6/27 22:49:55

基于cornerstone3D的dicom影像浏览器第二十一章显示DICOM TAGS

系列文章目录第一章下载源码运行cornerstone3D example 第二章修改示例crosshairs的图像源第三章 vitevue3cornerstonejs项目创建第四章加载本地文件夹中的dicom文件并归档第五章 dicom文件生成png，显示检查栏，序列栏第六章 stack viewport 显…...

编程日记 2025/6/27 23:15:14

【记录】PPT｜PPT打开开发工具并支持Quicker VBA运行

文章目录打开开发者工具支持Quicker VBA运行打开开发者工具参考文章，微软文档：显示“开发工具”选项卡，以下直接复制，如侵私删。适用对象：Microsoft 365 专属 Excel Microsoft 365 专属 Outlook Microsoft 365 专属…...

编程日记 2025/6/27 22:48:41

西门子 S1500 博途软件舞台威亚 3D 控制方案

西门子 S1500 PLC 是工业自动化领域的主流控制器，适合高精度、高可靠性的舞台威亚控制。下面为你提供基于博途 (TIA Portal) 软件的 3D 控制方案设计。系统架构设计舞台威亚 3D 控制系统通常包含以下组件： 硬件层： S1500 PLC 主机伺服驱动…...

编程日记 2025/6/27 23:19:04

第三十二天打卡

import pandas as pd from sklearn.datasets import load_iris from sklearn.model_selection import train_test_split from sklearn.ensemble import RandomForestClassifier # 加载鸢尾花数据集 iris load_iris() df pd.DataFrame(iris.data, columnsiris.feature_names) …...

编程日记 2025/6/27 23:34:46

同步/异步电路；同步/异步复位

同步/异步电路；同步/异步复位在 FPGA 设计中，同步电路、异步电路、同步复位和异步复位是基础且关键的概念，它们的特性直接影响电路的可靠性、时序性能和设计复杂度。一、同步电路（Synchronous Circuit） 定义同步电…...

编程日记 2025/6/27 22:48:36

spring boot 实现resp视频推流

1、搭建resp服务（docker方式） docker pull aler9/rtsp-simple-serverdocker run -d --restartalways \--name rtsp-server \-p 8554:8554 \aler9/rtsp-simple-server2、maven依赖 <dependency><groupId>org.bytedeco</groupId><a…...

编程日记 2025/6/27 22:48:33

python、R、shell兼容1

一，兼容方式 1，shell中用R、python： （1）python3、R/r（radian）进入 （2）脚本封装：命令行或者封装到sh脚本中 python xxx.py 自定义参数 Rscript xxx.r 自…...

编程日记 2025/6/27 23:23:29

Oracle 11G RAC重启系统异常

vmware安装centos7环境部署Oracle RAC (11.2.0.4) 部署时所有资源情况都是正常的，关机重启虚拟机后集群资源状态异常，请教CSDN大佬 – 部署规划域名地址备注rac16192.168.31.16rac17192.168.31.17rac16vip192.168.31.26viprac17vip192.168.31.27vip…...

编程日记 2025/6/27 22:48:32

便捷的电脑自动关机辅助工具

软件介绍本文介绍的软件是一款电脑上实用的倒计时和关机助手。软件特性这款关机助手十分贴心，它是一款无需安装的小软件，体积仅60KB，不用担心占用电脑空间，打开即可直接使用。操作方法你只需设置好对应的关机时间&#x…...

编程日记 2025/6/27 22:48:35

巧用 FFmpeg 命令行合并多个视频为一个视频文件教程

你是否曾经遇到过需要将多个视频片段合并成一个连续视频的情况？比如，你拍摄了一段旅行的精彩瞬间，想把它们合成一部短片；或者你在制作教学视频时，希望将不同的部分整合在一起。这时候，FFmpeg 就是你的得力助…...

编程日记 2025/6/27 23:33:11

平时使用电脑,如何去维护

在这个数字化的时代，电脑已经成为我们生活和工作中不可或缺的一部分。然而，你是否知道如何正确地维护它，让它始终保持良好的运行状态呢？今天，就让我来为大家揭晓这个谜底。定期清理电脑内部和外部的灰尘是至关重要的。…...

编程日记 2025/6/27 22:48:52

（视觉）分类、检测与分割在不同网络中的设计体现

分类、检测与分割在不同网络中的设计体现概述在计算机视觉领域，不同的网络结构在功能和结构上差异显著，同时也共享一些基础设计元素。卷积神经网络是基石： 卷积层通过特定的卷积核与图像进行卷积运算提取图像中的局部特征，比…...

编程日记 2025/6/27 22:49:52

技术分享 | MySQL大事务导致数据库卡顿

本文为墨天轮数据库管理服务团队第66期技术分享，内容原创，作者为技术顾问孙文龙，如需转载请联系小墨（VX：modb666）并注明来源。一、现象业务侧反馈连接数据库异常，报错 connection is not av…...

编程日记 2025/6/27 23:14:23

C#在 .NET 9.0 中启用二进制序列化：配置、风险与替代方案

在 .NET 9.0 中启用二进制序列化：配置、风险与替代方案引言一、启用二进制序列化的步骤二、实现序列化与反序列化三、安全风险与缓解措施四、推荐替代方案五、总结引言在 .NET 生态中，二进制序列化（Binary Serialization）曾是…...

编程日记 2025/6/27 22:48:46

每日Prompt：像素风格插画

提示词像素风格插画，日式漫画脸，画面主体为一位站在路边的男孩，人物穿着黑色冲锋衣，手里拿着手机，男孩靠坐在机车旁边，脚边依偎着一只带着小摩托车头盔的小小猫，背景是雨中，身旁停…...

编程日记 2025/6/27 23:15:39

Rust 学习笔记：生命周期

Rust 学习笔记：生命周期 Rust 学习笔记：生命周期使用生命周期防止悬空引用借用检查器函数中的泛型生命周期生命周期注释语法函数签名中的生命周期注解从生命周期的角度思考结构定义中的生命周期注解省略生命周期方法定义中的生命周期注释静态生命周期泛型…...

编程日记 2025/6/27 22:48:53

科学标注法：数据治理的未来之路

在数据治理领域，科学标注法是一种系统化、标准化的数据标注方法论，其核心是通过规范化的流程、技术工具和质量控制机制，将原始数据转化为具有语义和结构特征的可用数据资源。以下从定义、技术特征、应用场景、与传统标注方法的区别以及遵循的标准框架等方面展开详细解析：一…...

编程日记 2025/6/27 22:49:04

小白刷题之如何高效计算二进制数组中最大连续 1 的个数

前言学习如何快速找出二进制数组中最长的连续 1 序列。这个问题在数据处理、网络传输和算法面试中经常出现，掌握它不仅能提升编程能力，还能加深对数组操作和循环控制的理解。 🌟 问题背景想象你是一位网络工程师，正在分析服…...

编程日记 2025/6/27 23:19:36

中科方德鸳鸯火锅平台使用教程：轻松运行Windows应用！

原文链接：中科方德鸳鸯火锅平台使用教程：轻松运行Windows应用！ Hello，大家好啊，今天给大家带来一篇中科方德鸳鸯火锅平台使用的文章，欢迎大家分享点赞，点个在看和关注吧！在信创环境…...

编程日记 2025/6/27 22:49:51

完全禁用 Actuator 功能

问题描述： springboot 关闭Actuator无效，原本设置 management:endpoints:enabled-by-default: false # 禁用所有端点屏蔽了/actuator/info和/actuator/health，但/actuator还可以访问。拉满配置如下，成功屏蔽 # application.y…...

编程日记 2025/6/27 23:27:12

Netty学习专栏（二）：Netty快速入门及重要组件详解（EventLoop、Channel、ChannelPipeline）

文章目录前言一、快速入门：5分钟搭建Echo服务器二、核心组件深度解析2.1 EventLoop：颠覆性的线程模型EventLoop 设计原理核心 API 详解代码实践：完整使用示例 2.2 Channel：统一的网络抽象层Channel 核心架构核心 API 详解代码实践…...

编程日记 2025/6/27 22:48:50

27-FreeRTOS的任务管理

一、FreeRTOS的任务概念在FreeRTOS中，任务（Task）是操作系统调度的基本单位。每个任务都是一个无限循环的函数，它执行特定的功能。任务可以被看作是一个轻量级的线程，具有自己的堆栈和优先级。下面是如何定义一个任务函…...

编程日记 2025/6/27 23:31:45

upload-labs靶场通关详解：第14关

一、分析源代码这一关的任务说明已经相当于给出了答案，就是让我们上传一个图片木马，可以理解为图片中包含了一段木马代码。 function getReailFileType($filename){$file fopen($filename, "rb");$bin fread($file, 2); //只读2字节fclose…...

编程日记 2025/6/27 23:21:01

supervisor的进程监控+prometheus+alertmanager实现告警

supervisor服务进程监控实现告警前提：部署了prometheus(配置了rules文件夹),alertmanager,webhook,python3环境 [roottest supervisor_prometheus]# pwd /opt/supervisor_prometheus [roottest supervisor_prometheus]# ls supervisor_exporter.py supervisor_int…...

编程日记 2025/6/27 22:49:30

HarmonyOS 鸿蒙应用开发基础：父组件调用子组件方法的几种实现方案对比

在ArkUI声明式UI框架中，父组件无法直接调用子组件的方法。本文介绍几种优雅的解决方案，并作出对比分析，分析其适用于不同场景和版本需求。帮助开发者在开发中合理的选择和使用。方案一：Watch装饰器（V1版本适用&#x…...

编程日记 2025/6/27 22:54:26

Enhancing Relation Extractionvia Supervised Rationale Verifcation and Feedback

Enhancing Relation Extraction via Supervised Rationale Verification and Feedback| Proceedings of the AAAI Conference on Artificial Intelligencehttps://ojs.aaai.org/index.php/AAAI/article/view/34631 1. 概述关系抽取（RE）任务旨在抽取文本中实体之间的语义关...

编程日记 2025/6/27 22:49:06