JavaScript性能优化
JavaScript性能优化指南
一:性能分析与指标确立
-
使用性能分析工具
• 使用Lighthouse、Chrome DevTools的Performance面板和WebPageTest进行基准测试,识别加载时间、脚本执行时长等瓶颈。
• 关注核心Web指标:LCP(最大内容绘制)、FID(首次输入延迟)、CLS(累积布局偏移)。 -
设定量化目标
• 定义性能黄金三角:脚本执行时间<200ms、内存占用<50MB、FPS≥60。
• 示例代码:通过console.time
标记关键代码段耗时。
二:减少主线程负担
-
异步加载与执行
• 非关键脚本使用async
或defer
属性,避免阻塞渲染。
• 示例:<script src="analytics.js" async></script>
。 -
任务分片与调度
• 使用requestIdleCallback
处理低优先级任务,或通过setTimeout
拆分长任务。
• Web Workers处理密集型计算(如图像处理、大数据解析):// main.js const worker = new Worker('data-processor.js'); worker.postMessage(largeData);
三:DOM操作优化
-
批量更新与离线操作
• 使用DocumentFragment
合并多次DOM插入,减少重排/重绘。
• 示例:避免在循环中直接操作DOM,改为先构建片段再一次性插入。 -
虚拟DOM与框架优化
• 采用React、SolidJS等框架,利用虚拟DOM减少实际DOM操作。
• 使用React.memo
或Vue的v-once
避免不必要的组件渲染。
四:内存管理与泄漏预防
-
避免常见内存泄漏
• 及时清除定时器、事件监听器和闭包中的无用引用:// 错误示例:未清除的定时器 setInterval(() => {...}, 1000); // 正确做法:用变量保存并清除 const timer = setInterval(...); clearInterval(timer);
• 使用
WeakMap
替代Map
缓存对象,避免阻止垃圾回收。 -
内存监控工具
• 通过Chrome DevTools的Memory面板分析堆快照,定位泄漏源。
五:代码执行效率优化
-
算法与数据结构优化
• 优先使用Map/Set
替代对象/数组,提升查找效率。
• 示例:用ArrayBuffer
处理二进制数据,减少内存占用。 -
JIT编译器友好代码
• 保持函数参数类型稳定,避免V8引擎的“去优化”现象。
• 示例:避免在函数内动态修改对象属性类型。 -
WebAssembly集成
• 将计算密集型任务(如物理引擎、加密)编译为WebAssembly模块:fetch('module.wasm').then(response => WebAssembly.instantiate(response) ).then(({ exports }) => {exports.heavyTask(); });
六:资源加载与传输优化
-
代码分割与懒加载
• 使用动态import()
按需加载模块:const LazyComponent = React.lazy(() => import('./HeavyComponent'));
• 配置Webpack/Rollup的代码分割策略,分离第三方库。
-
HTTP/3与CDN加速
• 利用HTTP/3的多路传输特性,并行加载小文件。
• 静态资源托管至CDN,减少延迟。
七:缓存策略优化
-
Service Worker离线缓存
• 缓存关键资源,实现离线可用性:// sw.js self.addEventListener('install', (event) => {event.waitUntil(caches.open('v1').then(...)); });
-
HTTP缓存头配置
• 设置Cache-Control: max-age=31536000
对静态资源长期缓存。
八:持续监控与迭代
- 性能预算与自动化测试
• 集成Lighthouse CI,在构建流程中阻断性能退化的代码。
• 设置预算:如总JS大小<500KB、CLS<0.1。
相关文章:
JavaScript性能优化
JavaScript性能优化指南 一:性能分析与指标确立 使用性能分析工具 • 使用Lighthouse、Chrome DevTools的Performance面板和WebPageTest进行基准测试,识别加载时间、脚本执行时长等瓶颈。 • 关注核心Web指标:LCP(最大内容绘制&a…...
《React 属性与状态江湖:从验证到表单受控的实战探险》
属性初识 属性能解决两个大问题:通信和复用 props.js: import React, { Component } from react import Navbar from ./Navbarexport default class App extends Component {state {a:100}render() {return (<div><div><h2>首页</h2>&l…...
Android Retrofit 框架注解定义与解析模块深度剖析(一)
一、引言 在现代 Android 和 Java 开发中,网络请求是不可或缺的一部分。Retrofit 作为 Square 公司开源的一款强大的类型安全的 HTTP 客户端,凭借其简洁易用的 API 和高效的性能,在开发者社区中广受欢迎。Retrofit 的核心特性之一便是通过注…...
嵌入式学习L6网络编程D3TCP
TCP编程 写代码 第一步socket 绑定 先填充 点分十进制转换成32位整数 client 然后就连接成功了就可以读写数据了 client #include "net.h"int main (void) {int fd -1;struct sockaddr_in sin;/* 1. 创建socket fd */if ((fd socket (AF_INET, SOCK_S…...
【玩转23种Java设计模式】结构型模式篇:享元模式
软件设计模式(Design pattern),又称设计模式,是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。 汇总目录链接&…...
超分之DeSRA
Desra: detect and delete the artifacts of gan-based real-world super-resolution models.DeSRA:检测并消除基于GAN的真实世界超分辨率模型中的伪影Xie L, Wang X, Chen X, et al.arXiv preprint arXiv:2307.02457, 2023. 摘要 背景: GAN-SR模型虽然…...
产城融合典范:树莓科技如何助力宜宾数字经济腾飞
宜宾在推动数字经济发展的征程中,树莓科技扮演着至关重要的角色,堪称产城融合的典范。 树莓科技入驻宜宾后,积极与当地政府合作,以产业发展带动城市建设,以城市功能完善促进产业升级。在产业布局上,树莓科…...
Java数据结构第二十二期:Map与Set的高效应用之道(一)
专栏:Java数据结构秘籍 个人主页:手握风云 目录 一、Map和Set 1.1. 概念 二、搜索树 2.1. 概念 2.2. 查找操作 2.2. 插入操作 2.3. 删除操作 2.4. 性能分析 三、搜索 3.1. 概念及场景 3.2. 模型 四、Map 4.1. Map的说明 3.2. Map的使用 五…...
焊接安全的新纪元:智能监管系统的力量
在现代制造业中,焊接作为一项关键工艺,其安全性直接关系到生产质量和人员安全。为了应对这一挑战,一款创新的焊接联网智能化监管系统应运而生,为焊接行业带来了新的安全保障。 智能监管,安全升级 这款系统通过“一机…...
OpenGL中绘制图形元素的实现(使用visual studio(C++)绘制一个矩形)
目标:使用OpenGL提供的函数绘制矩形、线段、三角形等基本图形元素 所需效果 实验步骤 1、配置OpenGL(详情参见OpenGL的配置) 2、头文件引入 #include <gl/glut.h> 3、编写方法体 1>矩形实现 //绘制矩形 void DisplayRectangl…...
政安晨【零基础玩转各类开源AI项目】Wan 2.1 本地部署,基于ComfyUI运行,最强文生视频 图生视频,一键生成高质量影片
政安晨的个人主页:政安晨 欢迎 👍点赞✍评论⭐收藏 希望政安晨的博客能够对您有所裨益,如有不足之处,欢迎在评论区提出指正! 目录 下载项目 创建虚拟环境 安装项目依赖 尝试运行 依次下载模型 完成 我们今天要使…...
DeepLabv3+改进8:在主干网络中添加SIM注意力机制|助力涨点
🔥【DeepLabv3+改进专栏!探索语义分割新高度】 🌟 你是否在为图像分割的精度与效率发愁? 📢 本专栏重磅推出: ✅ 独家改进策略:融合注意力机制、轻量化设计与多尺度优化 ✅ 即插即用模块:ASPP+升级、解码器 PS:订阅专栏提供完整代码 论文简介 在本文中,我们提出了…...
卷积神经网络(笔记01)
视觉处理三大任务:分类、目标检测、图像分割 CNN网络主要有三部分构成:卷积层(Convolutional Layer)、池化层(Pooling Layer)和激活函数 一、解释卷积层中的偏置项是什么,并讨论在神经网络中引…...
从自己电脑的浏览器访问阿里云主机中运行的LLaMA-Factory webui
阿里云主机上LLaMA-Factory的webui在0.0.0.0:7860侦听,无法直接打开,需要通过代理的方法访问。 在LLaMA-Factory目录下创建一个脚本文件run.sh,并加上执行权限,内容如下: #!/bin/shexport GRADIO_SERVER_PORT7860 ex…...
大数据面试之路 (一) 数据倾斜
记录大数据面试历程 数据倾斜 大数据岗位 ,数据倾斜面试必问的一个问题。 一、数据倾斜的表现与原因 表现 某个或某几个Task执行时间过长,其他Task快速完成。 Spark/MapReduce作业卡在某个阶段(如reduce阶段),日志显…...
文件上传漏洞 upload-labs靶场
(这个没删就是还没做完 ; ω ; ) 目录 Pass-01 前端绕过 关卡分析 绕过:Burpsuite抓包修改或页面禁用js Pass-02 服务器端检测–IMME类型 关卡分析 Content-type 绕过:抓包修改文件的content-type Pass-03 黑名单绕过 关…...
「 DelegateUI 」Ant-d 风格的 Qt Qml UI 套件
写在前面:关于为什么要写一套新的UI框架 一方面,Qt Qml 生态中缺乏一套既遵循现代设计规范(自带的功能少且丑,懂得都懂),又能深度整合 Qt 生态的开源组件库。 另一方面,Qt Qml 中也有一些其他方案,例如 FluentUI Qml…...
数字人分身开发指南:从概念到实战
一、什么是数字人分身? 想象一下,在电脑或手机屏幕里,一个能跟你聊天、回答问题,甚至还能做表情的虚拟角色。这就是数字人分身,它用上了人工智能技术,让机器也能像人一样交流。无论是在线客服、网络主播还…...
Java小白-管理项目工具Maven(2)初识Maven
一、Maven安装 ①安装jdk1.8或以上版本 ②下载Maven(此为3.6.0):地址:Download Apache Maven – Maven 下载地址:Index of /dist/maven/maven-3/3.6.0/binaries ③安装Maven到无中文路径即可 bin:含…...
【附JS、Python、C++题解】Leetcode 面试150题(8)
一、题目 11. 盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。你不能倾斜…...
什么是向量数据库向量搜索?
向量数据库 专为高效存储与检索高维向量设计,支持语义搜索、推荐系统等AI场景,如文本/图像嵌入的相似性匹配。 ChromaDB 轻量级开源向量数据库,优势在于易用性(快速部署、简洁API)和小规模场景(本地开发、…...
【WRF-Urban】使用 LCZ 替换 WRF 运行中的 LUCC 数据
使用 LCZ 替换 WRF 运行中的 LUCC 数据 WRF-UCM中的城市类型LCZ的背景介绍完整步骤总结1. 获取 LCZ 数据2. 获取 WRF 运行所需的 LUCC 数据3. 使用 w2w 替换 WRF 的 LUCC 数据4. 运行 WRF 预处理(WPS & REAL)5. 运行 WRF 并优化城市参数化Q1:使用 LCZ 替换 WRF 运行中的…...
centos 7 安装apache服务
四步骤 解包 使用tar -zxvf 对.tar.gz 进行解压 使用tar -jxvf 对.tar.bz2 进行解压 rpm命令使用集合 rpm -qa 查询系统已安装的软件包 rpm -ql查看指定软件包存放的位置 rpm -qi查看指定软件包的属性 rpm -qf查看指定文件或目录是由哪个软件包所安装的 rpm -qpi查看指…...
2025各省市建筑产业和工程建设计划安排
1. 前言 十四届全国人大三次会议3月5日上午9时在人民大会堂开幕,国务院总理李强作政府工作报告。 《2025年政府工作报告》(以下简称 “报告”)作为统筹国家经济、战略布局与社会发展的蓝图,与建筑业息息相关,为今后的…...
广告营销,会被AI重构吗?
DeepSeek设计,即梦AI绘图,剪映成片。 DeepSeek的热度还在高开疯走。 用户对于各个场景下DS应用的探索也还在持续,各种DS的模式被挖掘出来,超级个体们开始给手下的大模型团队进行分工,实践出各种场景下最佳的排列组合方…...
01 音视频知识学习(视频)
图像基础概念 ◼像素:像素是一个图片的基本单位,pix是英语单词picture的简写,加上英 语单词“元素element”,就得到了“pixel”,简称px,所以“像素”有“图像元素” 之意。 ◼ 分辨率:是指图像…...
深入探究 Ryu REST API
Ryu 4.34 REST API 详细接口说明与示例 Ryu 4.34 的 REST API 提供了对 SDN 网络的核心管理功能,涵盖交换机、流表、端口、拓扑和 QoS 等操作。以下是详细的接口分类、功能说明及 Python 示例代码。 1. 交换机管理 1.1 获取所有交换机 DPID 端点: GET /stats/swi…...
不同AI生成的PHP版雪花算法
OpenAI <?php /*** Snowflake 雪花算法生成器* 生成的 64 位 ID 结构:* 1 位 保留位(始终为0,防止负数)* 41 位 时间戳(毫秒级,当前时间减去自定义纪元)* 5 位 数据中心ID* 5 …...
texstudio: 编辑器显示行号+给PDF增加行号
texstudio在编辑器部分增加行号: texstudio默认在编辑器部分不显示行号,如下图: 要实现以下的在编辑部分增加行号: 执行如下操作: 选项-->设置TexStudio-->编辑器-->显示行号-->所有行号选择好后&…...
强化学习基础-马尔可夫决策过程与贝尔曼方程
马尔可夫决策过程 在老虎机问题中,无论智能代理采取什么行动,之后要解决的问题都是一样的。也就是寻找最好的老虎机。但现实生活中的问题是不同的。例如,在围棋游戏中,智能代理落子后,棋盘上的棋子排列会发生变化&…...
爬虫的精准识别:基于 User-Agent 的正则实现
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编…...
Scala的初步使用
目录 1. Scala简介2. Scala编写的Hello World2.1 pom.xml中依赖和插件的配置2.2 安装Scala2.12.172.3 安装code-server插件2.4 helloworld.scala2.5 helloworld2.scala2.6 java调用scala object 3. Scala调用Java3.1 例子13.2 例子2 参考 1. Scala简介 Scala是一门多范式的编程…...
【Json RPC框架】框架介绍与环境搭建(Ubuntu 22.04)
🎁个人主页:我们的五年 🔍系列专栏:Json RPC框架 🌷追光的人,终会万丈光芒 🎉欢迎大家点赞👍评论📝收藏⭐文章 JSon RPC框架系列文章Json RPC框架_我们的五年的博…...
python读取word文档 | AI应用开发
python读取word文档 | AI应用开发 RAG中python读取word文档 RAG系统中构建知识库流程中重要的一个步骤是读取外挂的知识文档,为word是其中比较常见的文件。 另一个值得注意的是,RAG在读取文档后需要对文档进行分割,而良好的分割需要有一定结…...
20、组件懒加载
组件懒加载,也被称为异步组件加载,是一种在 Vue 项目中提升性能的重要技术手段。下面从概念、实现原理、使用场景、实现方式几个方面详细介绍: 概念 在传统的 Vue 项目里,当应用启动时,所有的组件代码都会被一次性加…...
打造智能钉钉机器人:借助智谱GLM-4-Flash实现高效智能回复(文末附源码)
文章目录 前言一、准备工作(一)钉钉机器人(二)智谱 GLM-4-Flash(三)内网穿透工具 cpolar(四)需要准备的工具和环境 二、钉钉机器人的创建与配置步骤1:创建钉钉机器人步骤…...
【故障处理系列--docker卷的挂载】
一位伙伴需求是把容器的目录映射到宿主机且容器目录的内容不被宿主机的空白目录覆盖。我的第一反应是-v 卷的映射,参数是对的,但是用法是错的 1、容器卷的挂载方式 容器把目录映射到宿主机创建volume卷,然后把容器的目录和volume卷绑定 区别…...
兴达易控modbusTCP转profinet接防撞雷达测试
modbusTCP转profinet接防撞雷达测试 随着工业自动化程度的不断提高,现场设备之间的通信需求日益增长。ModbusTCP作为一种广泛应用的工业通信协议,因其简单、可靠的特点,被广泛应用于各种自动化设备中。而Profinet作为工业以太网的一种&#…...
Acknowledgment.nack方法重试消费kafka消息异常
文章目录 问题示例异常 原因nack方法Acknowledgment接口实现类:ConsumerAcknowledgment实现类:ConsumerBatchAcknowledgment 解决方案1 批量消费指定index示例 2 单条消费示例 问题 使用BatchAcknowledgingMessageListener 批量消费Kafka消息࿰…...
通过动态获取后端数据判断输入的值打小
eval() 函数在 JavaScript 中是一个非常强大的函数 【1】计算简单公式 很多时候如果需要动态的提供计算的公式,需要写一大段的公式计算逻辑去兼容,可能耗费大量的开发成本。为了快速了解 eval 的用法,直接 ① 打开浏览器;② F1…...
乐维网管平台核心功能解析(一)——告警关联知识
在数字化转型浪潮中,企业IT系统规模呈指数级增长,传统的"人工经验"运维模式已难以应对海量告警处理需求。某银行数据中心曾统计,其日均告警量突破10万条,关键故障的平均定位时间长达3.5小时,直接导致年损失超…...
数据结构_单链表
今天我们要开启链表的学习 🖋️🖋️🖋️ 学了顺序表我们可以知道: 🎈链表其实就是争对顺序表的缺点来设计的,补足的就是顺序表的缺点 🎈链表在物理上是上一个节点存放的下一个节点的地址 链表 …...
b站视频下载工具软件怎么下载
自行配置FFMPEG环境 请优先选择批量下载,会自处理视频和音频文件。 如果要下载更高质量请登陆。 没有配置FFMPEG下载后会有报错提示,视频音频文件无法合并生成mp4文件 更新批量下载标题,只取视频原标题,B站反爬机制登陆后下载多了…...
如何实现pinia的持久化存储
在 Vue 3 项目中使用 Pinia 进行状态管理时,若要实现持久化存储,可借助 pinia-plugin-persistedstate 插件,该插件能让 Pinia 存储的状态在页面刷新或关闭后依然保留。下面为你详细介绍实现步骤: 1. 安装插件 首先,在…...
webpack介绍
entry与output 入口是 Webpack 开始构建依赖图的起点,Webpack 会从入口文件开始,递归地分析项目的依赖图。输出指定 Webpack 打包后的文件存放位置和文件名。 const path require("path");module.exports {entry: "./src/index.js&qu…...
使用Mermaid语法绘制的C语言程序从Linux移植到Windows的流程图
以下是使用Mermaid语法绘制的C语言程序从Linux移植到Windows的流程图: graph TDA[开始移植] --> B[代码兼容性检查]B --> C[检查系统调用差异\nfork/exec -> CreateProcess]B --> D[检查文件路径格式\n/ vs \\]B --> E[检查依赖库兼容性\nPOSIX vs …...
蓝桥杯嵌入式组第七届省赛题目解析+STM32G431RBT6实现源码
文章目录 1.题目解析1.1 分而治之,藕断丝连1.2 模块化思维导图1.3 模块解析1.3.1 KEY模块1.3.2 ADC模块1.3.3 IIC模块1.3.4 UART模块1.3.5 LCD模块1.3.6 LED模块1.3.7 TIM模块 2.源码3.第七届题目 前言:STM32G431RBT6实现嵌入式组第七届题目解析源码&…...
【spring bean的生命周期】
以下是使用 Mermaid 绘制的 Spring Bean 生命周期流程图: 流程说明 实例化:Spring 容器创建 Bean 的实例。属性赋值:Spring 为 Bean 的属性注入值(依赖注入)。BeanPostProcessor.postProcessBeforeInitialization&…...
数据类设计_图片类设计之3_半规则图类设计(前端架构基础)
前言 学的东西多了,要想办法用出来.C和C是偏向底层的语言,直接与数据打交道.尝试做一些和数据方面相关的内容 引入 接续上一篇讨论半规则图类型的设计 半规则图的定义 什么是半规则图?笔者看见了一些似乎规则又不是太规则的图形,例如带圆角的矩阵,在页面上找一个圆角框 为了…...
【leetcode hot 100 138】随机链表的复制
解决一:回溯 哈希表 本题要求我们对一个特殊的链表进行深拷贝。如果是普通链表,我们可以直接按照遍历的顺序创建链表节点。而本题中因为随机指针的存在,当我们拷贝节点时,「当前节点的随机指针指向的节点」可能还没创建…...