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

JavaScript性能优化实战：从8s到0.8s的极致提升

news 来源：原创 2025/8/21 19:32:14

‌摘要‌：页面卡顿、内存泄漏、CPU爆满？本文通过‌6个真实场景‌+‌可运行代码示例‌，手把手教你掌握JS性能优化核心技术！涵盖‌防抖节流、虚拟滚动、Web Workers、内存泄漏排查‌等高频痛点解决方案，最后提供Chrome性能分析工具实战指南，助你打造丝滑的Web应用！

一、性能优化核心指标（先量化再优化）

1.1 关键性能指标

  • ‌FPS‌：帧率 ≥ 60 为合格（开发者工具Performance面板）
  • ‌内存占用‌：避免持续增长（Memory面板监控）
  • ‌首次内容渲染（FCP）‌：< 1.8s 为良好
  • ‌交互响应时间‌：< 100ms

1.2 性能分析工具

// 手动计算函数执行时间
function measure(fn) {const start = performance.now();fn();const end = performance.now();console.log(`耗时：${(end - start).toFixed(2)}ms`);
}measure(() => {// 待测试代码for(let i = 0; i < 1e6; i++) Math.sqrt(i);
});

相关文章：

JavaScript性能优化实战：从8s到0.8s的极致提升

‌摘要‌：页面卡顿、内存泄漏、CPU爆满？本文通过‌6个真实场景‌+‌可运行代码示例‌，手把手教你掌握JS性能优化核心技术！涵盖‌防抖节流、虚拟滚动、Web Workers、内存泄漏排查‌等高频痛点解决方案，最后提供Chrome性能分析工具实战指南，助你打造丝滑的Web应用！ 一、性…...

编程日记 2025/8/21 19:32:14

英语学习(GitHub学到的分享)

【英语语法&#xff1a;https://github.com/hzpt-inet-club/english-note】 【离谱的英语学习指南&#xff1a;https://github.com/byoungd/English-level-up-tips/tree/master】 【很喜欢文中的一句话&#xff1a;如果我轻轻松松的学习&#xff0c;生活的幸福指数会提高很多…...

编程日记 2025/8/21 22:48:35

OTP单片机调试工具之—应广单片机ADC调试案例

上一篇文章说到了‘OTP单片机调试工具’的大概使用方法&#xff0c;现在做一个案例来说明情况。 这个案例是使用应广单片机ADC对可调电阻中间抽头电压值进行采样&#xff0c;分别用12bit和8bit进行显示&#xff0c;使用vdd做参考&#xff0c;采样数据没有进行滤波&#xff0c;通…...

编程日记 2025/8/21 22:47:05

Java基础关键_020_集合（四）

目 录 一、Set 集合 二、Map 集合 1.概览 2.说明 3.HashMap 说明 4.LinkedHashMap 说明 5.TreeMap 说明 6.Hashtable 说明 7.Properties 说明 三、Map 接口常用方法 1.put(K key, V value) 和 putAll(Map m) 2.get(Object key) 3.clear() 和 size() 4.contains…...

编程日记 2025/8/21 22:48:34

电商数据分析 电商平台销售数据分析 电商平台数据库设计 揭秘电商怎么做数据分析

《电商参谋数据分析平台方案》&#xff08;28页PPT&#xff09;是一套为电商行业量身定制的一体化解决方案&#xff0c;它通过全链路打通从数据获取到分析的全过程&#xff0c;帮助电商企业实现精细化运营和市场机会的挖掘。该方案针对电商行业在数据获取、加工整合及业务赋能方…...

编程日记 2025/8/21 22:47:54

Hugging Face的Transformers核心模块：Pipelines(参数说明，各种模型类型调用案例)

如果电脑配置不够可以参考文章《学AI-撸羊毛-免费GPU服务器-kaggle-每周30小时-可以进行数据训练&#xff0c;大模型微调》 申请免费服务器执行代码。 什么是Pipelines 将数据预处理、模型调用、结果后处理三部分组装成的流水线使我们能够直接输入文本便获得最终的答案 Pipeli…...

编程日记 2025/8/21 22:47:55

ChatGPT辅助学术写作有哪些挑战？怎么解决？

宝子们毕业之前需要完成的学术论文往往是学生时代最后一项挑战。无论宝子们对此过程多么熟悉&#xff0c;每次着手写新论文时&#xff0c;似乎都需重新规划、从头开始。 值得庆幸的是&#xff0c;借助ChatGPT、DeepSeek这些工具能够为论文旅程提供有力支持。ChatGPT作为备受推崇…...

编程日记 2025/8/21 22:48:35

【MySQL是怎么运行的】二、索引

引擎层有支持索引&#xff0c;如InnoDB和MyISAM&#xff0c;区别就是InnoDB支持事务、外键和行锁 索引物理结构 页&#xff1a;一页16KB&#xff0c;一页包含了多行记录 行&#xff1a;包含元数据和真实数据 元数据&#xff1a; record_type&#xff08;记录的类型&#xff…...

编程日记 2025/8/21 22:46:27

MySQL中有哪些索引

1&#xff0c;B-Tree索引&#xff1a;常见的索引类型 2&#xff0c;哈希索引&#xff1a;基于哈希表实现&#xff0c;只支持等值查询 &#xff0c;只有Memory存储引擎和NDB Cluster存储引擎显示支持哈希索引 3&#xff0c;全文索引&#xff1a;可在字符列上创建&#xff08;T…...

编程日记 2025/8/21 11:47:44

Node.js中HTTPS模块应用详解

1. HTTPS 模块的概念 HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff09;是 HTTP 的安全版本&#xff0c;通过 SSL/TLS 协议对数据进行加密&#xff0c;确保数据在传输过程中不被窃取或篡改。在 Node.js 中&#xff0c;https 模块提供了创建 HTTPS 服务器和客户…...

编程日记 2025/8/21 22:49:30

facebook游戏投广：提高广告关键数据的方法

在当今竞争激烈的数字营销领域&#xff0c;游戏广告的投放效果直接关系到游戏公司的市场表现和盈利能力。然而&#xff0c;许多游戏公司在广告投放上面临着诸多挑战&#xff0c;如高昂的成本、低效的转化率以及难以追踪的效果。那么&#xff0c;如何才能通过数据分析真正提升游…...

编程日记 2025/8/21 22:47:55

每天五分钟深度学习框架PyTorch:ResNet算法模型完成CAFIR十分类

本文重点 ResNet模型已经搭建完成了&#xff0c;本文我们使用ResNet来跑一下CAFIR10的数据集&#xff0c;看一下分类效果如何&#xff1f; 代码 本文总结 在之前的课程中我们对残差块以及ResNet模型进行了详细的介绍&#xff0c;并且我们对模型训练这些基础的数据集进行了详…...

编程日记 2025/8/21 22:47:06

Python中很常用的100个函数整理

Python 内置函数提供了强大的工具&#xff0c;涵盖数据处理、数学运算、迭代控制、类型转换等。本文总结了 100 个常用内置函数&#xff0c;并配备示例代码&#xff0c;提高编程效率。 1. abs() 取绝对值 print(abs(-10)) # 10 2. all() 判断所有元素是否为真 print(all([…...

编程日记 2025/8/21 22:47:54

nginx与openSSL版本不兼容问题

本人先前使用的nginx-version为1.18.0&#xff0c;openSSL-version为3.0.2&#xff1b; 在源码的安装configure过程中&#xff0c;出现以下报错 error: ‘ENGINE_free’ is deprecated: Since OpenSSL 3.0 [-Werrordeprecated-declarations]734 | ENGINE_free(en…...

编程日记 2025/8/21 22:48:33

【RabbitMQ】事务

事务的简单配置及使用 配置事务管理器声明队列生产者代码测试 RabbitMQ是基于AMQP协议实现的&#xff0c;该协议实现了事务机制&#xff0c;因此RabbitMQ也支持事务机制. SpringAMQP也提供了对事务相关的操作.RabbitMQ事务允许开发者确保消息的发送和接收是原子性的&#xff0c…...

编程日记 2025/8/21 22:47:53

【C#学习笔记03】进制转换与反码、补码、原码

1. 进制转换 计算机中的数据通常以二进制形式存储&#xff0c;但在编程和调试过程中&#xff0c;我们经常需要与十进制、八进制和十六进制打交道。因此&#xff0c;掌握进制转换是C语言学习中的重要一环。 1.1 进制的基本概念 二进制&#xff08;Binary&#xff09;&#xff…...

编程日记 2025/8/21 22:48:34

线性搜索算法

何时使用线性搜索算法&#xff1f; 当处理一个小数据集时。当搜索存储在连续内存中的数据集时。 线性搜索算法在什么情况下优于其他搜索算法&#xff1f; 当列表或数组未排序时&#xff0c;或者当输入的大小相对较小时&#xff0c;首选线性搜索算法。它易于实现&#xff0c;并…...

编程日记 2025/8/18 1:45:16

基于深度文档理解的开源 RAG 引擎RAGFlow的介绍和安装

目录 前言1. RAGFlow 简介1.1 什么是 RAGFlow&#xff1f;1.2 RAGFlow 的核心特点 2. RAGFlow 的安装与配置2.1 硬件与软件要求2.2 下载 RAGFlow 源码2.3 源码编译 Docker 镜像2.4 设置完整版&#xff08;包含 embedding 模型&#xff09;2.5 运行 RAGFlow 3. RAGFlow 的应用场…...

编程日记 2025/8/21 8:32:27

蓝桥杯—走迷宫(BFS算法)

题目描述 给定一个NM 的网格迷宫 G。G 的每个格子要么是道路&#xff0c;要么是障碍物&#xff08;道路用 11表示&#xff0c;障碍物用 0 表示&#xff09;。 已知迷宫的入口位置为 (x1​,y1​)&#xff0c;出口位置为 (x2​,y2​)。问从入口走到出口&#xff0c;最少要走多少…...

编程日记 2025/8/16 9:55:22

基于云函数的自习室预约微信小程序+LW示例参考

全阶段全种类学习资源&#xff0c;内涵少儿、小学、初中、高中、大学、专升本、考研、四六级、建造师、法考、网赚技巧、毕业设计等&#xff0c;持续更新~ 文章目录 [TOC](文章目录) 1.项目介绍2.项目部署3.项目部分截图4.获取方式 1.项目介绍 技术栈工具&#xff1a;云数据库…...

编程日记 2025/8/16 1:30:48

Flutter 学习之旅 之 flutter 不使用插件，实现简单带加载动画的 LoadingToast 功能

Flutter 学习之旅 之 flutter 不使用插件&#xff0c;实现简单带加载动画的 LoadingToast 功能 目录 Flutter 学习之旅 之 flutter 不使用插件&#xff0c;实现简单带加载动画的 LoadingToast 功能 一、简单介绍 二、LoadingToast 三、简单案例实现 四、关键代码 一、简单…...

编程日记 2025/8/20 14:44:29

GStreamer —— 2.17、Windows下Qt加载GStreamer库后运行 - “播放教程 5：色彩平衡“（附：完整源码）

运行效果 介绍 亮度、对比度、色相和饱和度是常见的视频调整&#xff0c; 在 GStreamer 中统称为 Color Balance 设置。 本教程展示了&#xff1a; • 如何找出可用的色彩平衡通道 • 如何更改它们 允许访问颜色平衡设置。如果 元素支持这个接口&#xff0c;只需将其转发给应用…...

编程日记 2025/8/21 12:21:40

在wsl2中安装ubuntu

Linux 是操作系统内核&#xff0c;Ubuntu 是基于Linux的发行版。 虚拟机 是运行操作系统的虚拟环境&#xff0c;可以在物理机上运行多个操作系统&#xff0c;包括Linux和Ubuntu。 1&#xff1a;启用 WSL 功能 以管理员身份打开 PowerShell。(winR&#xff0c;输入powershell&…...

编程日记 2025/8/19 5:40:15

SPFA算法——负权图且没有负环

SPFA算法其实是对Bellman-ford算法的优化&#xff0c;Bellman-ford算法更新最短路是采用的是遍历每一条边&#xff0c;找到最短的边进行更新d[v]min(d[v],d[u]w(u,v))&#xff0c;由 d[v]min(d[v],d[u]w(u,v))可知只有当 d[ u ]变小时才有可能更新&#xff0c;所以用一个队列存…...

编程日记 2025/8/21 20:31:53

5G基本概念

作者：私语茶馆 1. 5G应用场景概述 1.1.5G应用场景 ITU域2015年定义了三大应用场景：eMBB（增强型移动宽带）、uRLLC（低时延高可靠通信）、mMTC（海量物联网通信）； emBB：Enhanced Mobile Broadband ，移动互联网应用，是4G MBB（移动宽带）的升级，主要侧重于网络速率、带…...

编程日记 2025/8/21 2:53:12

conda 安装软件报错 Found conflicts! Looking for incompatible packages.

问题描述&#xff1a; 利用 conda 安装某包 conda install -c "nvidia/label/cuda-11.8.0" cuda-nvcc时发现报错&#xff1a; Collecting package metadata (current_repodata.json): done Solving environment: failed with initial frozen solve. Retrying with…...

编程日记 2025/8/16 10:00:05

PySide(PyQT)，QGraphicsItem的pos()和scenePos()区别

在QGraphicsItem中&#xff0c;pos()和scenePos()是两个重要的方法&#xff0c;用于描述图形项的位置&#xff0c;但它们的含义和用途有所不同。理解它们的区别对于正确操作和管理QGraphicsItem的位置至关重要。 1. pos()方法 • 定义&#xff1a;pos()返回的是QGraphicsItem在…...

编程日记 2025/8/21 15:17:48

【每日八股】计算机网络篇（四）：HTTP

目录 HTTP 与 HTTPS 的区别&#xff1f;HTTPS 加密与认证的过程&#xff1f;ClientHelloServerHello客户端回应服务端回应 HTTPS 一定安全可靠吗&#xff1f;HTTPS 状态码的含义&#xff1f;HTTP 缓存有哪些实现方式&#xff1f;HTTP 1.0、HTTP 1.1、HTTP 2.0 和 HTTP 3.0 的区…...

编程日记 2025/8/16 10:01:36

基于python下载ERA5小时尺度和月尺度的数据

前言&#xff1a;由于ERA5网站的更新&#xff0c;原始的代码都无法使用&#xff0c;这里将会提供下载小时尺度和月尺度的代码。 一、前期的工作 需要重新在ERA5网站上注册新的账号&#xff08;ERA5网站&#xff09;。然后在User guide里&#xff0c;选择API&#xff0c;将代码…...

编程日记 2025/8/20 4:42:53

【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现软件开机自启

文章目录 前言 一、准备工作1.1 环境搭建1.2 创建 Tauri 项目1.3 添加依赖 二、实现开机自启的基本原理2.1 开机自启的基本概念2.2 Tauri 应用的生命周期 三、Windows 平台实现3.1 Windows 注册表机制3.2 实现步骤3.3 注意事项 四、Linux 平台实现4.1 Linux systemd 服务4.2 实…...

编程日记 2025/8/20 5:23:51

C++20 模块：告别头文件，迎接现代化的模块系统

文章目录 引言一、C20模块简介1.1 传统头文件的局限性1.2 模块的出现 二、模块的基本概念2.1 模块声明2.2 模块接口单元2.3 模块实现单元 三、模块的优势3.1 编译时间大幅减少3.2 更好的依赖管理3.3 命名空间隔离 四、如何使用C20模块4.1 编译器支持4.2 示例项目4.3 编译和运行…...

编程日记 2025/8/16 11:21:15

【技海登峰】Kafka漫谈系列（五）Java客户端之生产者Producer核心组件与实现原理剖析

【技海登峰】Kafka漫谈系列（五）Java客户端之生产者Producer核心组件与实现原理剖析 向Kafka Broker服务节点中发送主题消息数据的应用程序被称为生产者，生产者与消费者均属于Kafka客户端，几乎所有主流语言都支持调用客户端API。官方提供了基于Java实现的kafka-clients，用于…...

编程日记 2025/8/21 16:15:13

java-单列模式-final-枚举

内存存储区域 引用变量和普通变量引用变量放在栈中&#xff0c;基本数据类型的内容是在堆内存中。 对象放在堆内存中&#xff0c;其引用变量放在栈中&#xff0c;指向堆内存存放对象的地址。 静态变量放在静态区中&#xff0c;静态变量在程序的执行始中中分配一次&#xff0c;…...

编程日记 2025/8/20 15:56:11

deepseek 3FS编译

3FS在ubuntu22.04下的编译&#xff08;记录下编译过程&#xff0c;方便后续使用&#xff09; 环境信息 OS ubuntu 22.04内核版本 6.8.0-52-genericlibfuse 3.16.1rust 1.75.0FoundationDB 7.1.66meson 1.0.0ninja 1.10.1 libfuse编译 以下建议均在root下执行 pip3 install…...

编程日记 2025/8/21 21:29:07

LabVIEW非线性拟合实现正弦波参数提取

LabVIEW的Nonlinear Curve Fit.vi基于Levenberg-Marquardt算法&#xff0c;能够实现非线性最小二乘拟合&#xff0c;包括正弦波三参数&#xff08;幅值、频率、相位&#xff09;的精确求解。该工具适用于非均匀采样、低信噪比信号等复杂场景&#xff0c;但需注意初始参数设置与…...

编程日记 2025/8/16 13:08:03

CAMEL 学习笔记一

课程讲义 https://github.com/camel-ai/owl CAMEL (Communicative Agents for “Mind” Exploration of Large Language Models)是一个开源的多智能体框架&#xff0c;专注于构建基于大语言模型的智能体交互系统。该框架通过角色扮演和结构化对话机制&#xff0c;实现智能体之…...

编程日记 2025/8/21 12:44:26

java每日精进 3.11 【多租户】

1.多租户概念 1. 多租户是什么&#xff1f; 多租户&#xff0c;简单来说是指一个业务系统&#xff0c;可以为多个组织服务&#xff0c;并且组织之间的数据是隔离的。 例如说&#xff0c;在服务上部署了一个MyTanant系统&#xff0c;可以支持多个不同的公司使用。这里的一个公…...

编程日记 2025/8/21 13:52:20

2.2 企业级ESLint/Prettier规则定制

文章目录 1. 为什么需要企业级代码规范2. 工具选型对比3. 完整配置流程3.1 项目初始化3.2 ESLint深度配置3.3 Prettier精细配置3.4 解决规则冲突4. 高级定制方案4.1 自定义ESLint规则4.2 扩展Prettier插件5. 团队协作策略5.1 配置共享方案5.2 版本控制策略6. CI/CD集成7. 常见问…...

编程日记 2025/8/16 10:00:13

Ubuntu 源码安装 Qt5

1.开发背景 Ubuntu 下安装指定版本的 Qt&#xff0c;最新的Qt官方已经不支持 Qt5.15.2 版本以下版本&#xff0c;所以有必要用旧的源码编译 Qt 库。 2.开发需求 源码安装 Qt5.12.2 3.开发环境 开发环境&#xff1a;Ubuntu18.04 目标版本&#xff1a;Qt5.12.2 4.实现步骤 4…...

编程日记 2025/8/16 10:00:29

【Linux】权限相关知识点

思考 我们平时使用Linux创建文件或目录时的默认权限是多少&#xff1f; [rootlocalhost test]: mkdir dir [rootlocalhost test]: touch file [rootlocalhost test]: ll total 0 drwxr-xr-x 2 root root 6 Mar 8 15:23 dir #755 -rw-r--r-- 1 root root 0 Mar 8 15:23 f…...

编程日记 2025/8/19 7:26:17

SSH 安全致命漏洞：渗透路径与防御策略

作为远程管理的核心协议&#xff0c;SSH 的 22 端口在全球服务器中广泛部署&#xff0c;却也成为攻击者的首要目标。本文将以技术视角还原黑客通过 22 端口渗透的完整路径&#xff0c;并结合最新漏洞&#xff08;如 CVE-2024-6387&#xff09;提供防御建议&#xff0c;帮助企业…...

编程日记 2025/8/20 5:01:38

使用ngnix进行负载均衡部署deepseek蒸馏版

使用ngnix进行负载均衡部署deepseek蒸馏版 一、安装及配置nginx1.1.安装依赖：1.2. 导入Nginx签名密钥1.3. 添加Nginx软件源1.4. 更新软件包列表并安装Nginx1.5. 启动Nginx服务1.6. 验证安装1.7.修改配置文件，将自己的内容加进去1.8、重新加载Nginx配置：二、模型启动2.1、分布…...

编程日记 2025/8/16 7:04:11

面试之《TypeScript泛型》

在 TypeScript&#xff08;TS&#xff09;里&#xff0c;泛型是一项极为重要的特性&#xff0c;它能让你编写可复用、类型安全且灵活的代码。以下从多个方面为你详细介绍 TS 中的泛型&#xff1a; 基本概念 泛型允许你创建可重用的组件&#xff0c;这些组件能够处理多种数据类…...

编程日记 2025/8/17 15:59:11

PyTorch系列教程：Tensor.view() 方法详解

这篇简明扼要的文章是关于PyTorch中的tensor.view()方法的介绍与应用&#xff0c;与reshape()方法的区别&#xff0c;同时给出示例进行详细解释。 Tensor基础 Tensor(张量)的视图是一个新的Tensor&#xff0c;它与原始Tensor共享相同的底层数据&#xff0c;但具有不同的形状或…...

编程日记 2025/8/20 11:20:39

IDEA（十一）调整新版本的工具栏显示Git操作（pull、commit、push、revert等）

目录 一、背景二、操作步骤2.1 开启新 UI 样式2.2 设置 Tool Window 工具栏 一、背景 好久没有更新 IDEA 了&#xff0c;更新之后发现 IDEA 的工具栏消失了。一番操作之后&#xff0c;终于把 IDEA 的工具栏的设置调整好了&#xff0c;在此进行记录调整步骤&#xff0c;供大家学…...

编程日记 2025/8/16 5:31:17

基于Prometheus+Grafana的Deepseek性能监控实战

文章目录 1. 为什么需要专门的大模型监控？2. 技术栈组成2.1 vLLM（推理引擎层）2.2 Prometheus（监控采集层）2.3 Grafana（数据可视化平台）3. 监控系统架构4. 实施步骤4.1 启动DeepSeek-R1模型4.2 部署 Prometheus4.2.1 拉取镜像4.2.2 编写配置文件4.2.3 启动容器4.3 部署 G…...

编程日记 2025/8/21 21:33:08

windows下docker的安装

前言 早期的docker只能在Linux下使用&#xff0c;随着技术的发展&#xff0c;目前docker在Windows下也能方便的使用了。 一、docker的下载 从docker官网下载“docker desktop” 下载这个&#xff1a; 二、Windows下docker的安装 安装完毕后&#xff0c;重启的系统进行登录&am…...

编程日记 2025/8/21 5:43:13

Nginx正向代理HTTPS配置指南（仅供参考）

要使用Nginx作为正向代理访问HTTPS网站&#xff0c;需通过CONNECT方法建立隧道。以下是操作详细步骤&#xff1a; 1. 安装Nginx及依赖模块 需要模块&#xff1a;ngx_http_proxy_connect_module&#xff08;支持CONNECT方法&#xff09;。 安装方式&#xff1a;需重新编译Nginx…...

编程日记 2025/8/17 18:15:10

01_LVGL 对象与盒子模型详解

1. LVGL 的对象 ​ 在LVGL中&#xff0c;⽤⼾界⾯的 基本组成部分 是对象&#xff08;控件&#xff09;&#xff0c;也称为 Widgets。例如&#xff0c;⼀个 按钮、标签、图像、列表、图表 或者 ⽂本区域。所有的对象都使⽤ lv_obj_t 指针作为句柄进⾏引⽤。之后可以使⽤该指针…...

编程日记 2025/8/21 5:40:10

【redis】string应用场景：共享会话和手机验证码

文章目录 共享会话实现思路 手机验证码实现思路伪代码实现生成验证码验证验证码 共享会话 实现思路 如果每个应用服务器&#xff0c;维护自己的会话数据&#xff0c;此时彼此之间胡共享&#xff0c;用户请求访问到不同的服务器上&#xff0c;就可能会出现一些不能正确处理的情…...

编程日记 2025/8/20 8:46:51