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

前端性能优化

news 来源：原创 2025/8/2 21:08:36

前端性能优化是提升用户体验的重要环节，优化的目标是减少页面加载时间、提高交互响应速度、降低资源消耗。以下从 加载性能优化、渲染性能优化 和 交互性能优化 三个维度详细说明：

一、加载性能优化

目标是减少页面首次加载时间，提升页面的加载速度。

1. 资源优化

压缩文件：
- 使用工具（如 Webpack、Rollup）对 JavaScript、CSS 进行压缩。
- 使用 image compression 工具（如 TinyPNG）优化图片资源。
- 使用 Gzip 或 Brotli 压缩服务器响应内容。
代码分割：
- 使用动态加载和按需加载，减少首次加载的 JavaScript 文件大小：
```
import('module').then(module => module.default());
```
移除未使用的代码（Tree Shaking）：
- 确保代码没有无用的 import，通过工具自动清理未使用代码。

2. 减少 HTTP 请求数

合并文件： 合并 CSS 和 JavaScript 文件。
使用图片精灵（Sprites）： 将多个小图片合并成一张，减少 HTTP 请求。
使用字体图标： 替代小型图标图片，减少图片请求。

3. 优化图片加载

懒加载： 图片仅在进入视口时加载：
```
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" />
```
或使用 IntersectionObserver 优化懒加载。
使用现代图片格式：
- 使用 WebP 格式替代传统格式（JPEG/PNG）。
- 利用 <picture> 标签提供多种格式：
```
<picture><source srcset="image.webp" type="image/webp"><img src="image.jpg" alt="example">
</picture>
```

4. 使用 CDN

CDN 加速：
- 使用 CDN 提供的公共资源库（如 jQuery、Font Awesome）。
- 将静态资源部署到 CDN 节点，缩短传输路径。

5. 缓存策略

设置 HTTP 缓存：
- 使用强缓存（Cache-Control）和协商缓存（ETag）。
Service Worker：
- 使用 Service Worker 实现更高级的离线缓存。
```
navigator.serviceWorker.register('/sw.js');
```

6. DNS 预解析

通过 dns-prefetch 提前解析域名，减少 DNS 解析时间：

<link rel="dns-prefetch" href="//example.com">

二、渲染性能优化

目标是减少浏览器的渲染时间，提高页面的绘制效率。

1. 减少重排与重绘

避免频繁操作 DOM：
- 使用 DocumentFragment 或虚拟 DOM 批量更新。
减少 CSS 的复杂性：
- 避免使用 CSS 表达式（如 calc()）。
- 避免使用性能较差的选择器（如后代选择器 div span）。
避免 layout thrashing（布局抖动）：
- 在获取 DOM 元素的 offsetHeight 等布局属性后，避免立即修改它们的样式。

2. 启用 GPU 加速

硬件加速：
- 对动画使用 CSS 属性（如 transform 和 opacity），避免修改 top、left。
```
.box {transform: translate3d(0, 0, 0);
}
```

3. 优化动画和过渡

CSS 动画优于 JavaScript 动画：
- 使用 requestAnimationFrame 优化动画帧率。
降低动画复杂度：
- 减少需要重新布局的动画效果。

4. 减少第三方脚本的影响

延迟加载或异步加载第三方脚本：
```
<script src="script.js" async></script>
```
使用 iframe 隔离第三方内容。

三、交互性能优化

目标是提升用户在页面上的操作响应速度和流畅度。

1. 减少主线程阻塞

避免长任务：
- 使用 Web Workers 将复杂计算从主线程移出。
```
const worker = new Worker('worker.js');
worker.postMessage(data);
```
使用性能工具：
- 使用 Chrome DevTools 分析长时间任务，优化其执行效率。

2. 懒加载非关键资源

对非关键资源（如图片、视频等）延迟加载。
对非首屏的 JavaScript 代码延迟加载：
```
<script src="script.js" defer></script>
```

3. 预加载与预渲染

预加载资源：

<link rel="preload" href="style.css" as="style">

预渲染页面：

<link rel="prerender" href="next-page.html">

4. 减少输入延迟

防抖与节流：

对频繁触发的事件（如滚动、输入）使用防抖或节流技术：

function throttle(func, delay) {let lastTime = 0;return function (...args) {const now = Date.now();if (now - lastTime >= delay) {lastTime = now;func.apply(this, args);}};
}

5. 优化页面骨架

页面骨架屏（Skeleton Screen）：
- 在内容加载前显示页面骨架，提升用户感知体验。
```
<div class="skeleton"></div>
```

四、性能监控与工具

1. 性能监控工具

Lighthouse（页面性能分析工具）。
Chrome DevTools（性能标签页分析关键帧）。
WebPageTest（全面检测页面加载性能）。
Performance API（记录页面性能数据）。
```
console.log(performance.now());
```

2. 性能指标

核心 Web Vitals：
- LCP（最大内容渲染时间）：首屏加载大内容所需时间。
- FID（首次输入延迟）：用户首次操作的响应时间。
- CLS（累计布局偏移）：页面布局稳定性。

总结

前端性能优化是一个系统化的过程，从加载、渲染到交互都需要综合考虑。通过合理使用缓存、优化资源加载、减少渲染阻塞和监控性能，可以显著提高页面的速度和用户体验。

前端性能优化

前端性能优化是提升用户体验的重要环节，优化的目标是减少页面加载时间、提高交互响应速度、降低资源消耗。以下从加载性能优化、渲染性能优化和交互性能优化三个维度详细说明： 一、加载性能优化目标是减少页面首次加载时间，提升页面的加…...

编程日记 2025/8/2 21:08:36

深度学习中的正则化技术

在深度学习中，正则化是一种防止模型过拟合的重要手段。过拟合是指模型在训练数据上表现良好，但在未见数据上表现不佳的现象。正则化通过引入额外的约束或信息来限制模型的复杂性，从而提高模型的泛化能力。本文将介绍几种常见的正则化技术&…...

编程日记 2025/7/28 16:37:06

工商银行湖仓智一体创新应用实践

数智技术已经成为企业数字化转型的核心动力国家《“十四五”数字经济发展规划》指出数字经济是未来的主要经济形态，数据因其倍增效应和乘数效应，可以带来全要素效率的提升，已经成为数字经济的核心要素资源，是企业数字化转型的新要素、新动能。为了高质量推进企业数字化转…...

编程日记 2025/7/31 15:23:07

测试实项中的偶必现难测bug之模糊匹配逻辑

问题：现在有一个场景，如果只是通过功能测试会比较难测，例如刚开始我们做会员的时候，只有白银会员，在用户分群的场景下，需要用条件逻辑匹配，当时开发用了like的匹配方式没有问题。1年后加了白银试用会员，导致在统计会员分群的时候明明条件选的是白银会员，但是统计的数…...

编程日记 2025/7/28 19:41:55

金融科技白皮书：2022-2023年度回顾与前瞻

在金融科技领域，2022至2023年见证了一系列创新技术的应用和发展。本白皮书将回顾过去一年的主要成就，并展望未来一年的发展趋势。 2022年亮点回顾 **低代码平台：**低代码平台通过高度抽象化和自动化的可视化过程，简化了应用程序开…...

编程日记 2025/7/27 17:38:05

40分钟学 Go 语言高并发：sync包详解（下）

sync包详解（下） 学习目标知识点掌握程度应用场景WaitGroup使用熟练使用和理解原理并发任务的同步等待Once实现原理理解底层实现和使用场景单例模式、一次性初始化Pool性能优化掌握对象池的使用和调优高并发下的内存优化Cond应用场景了解条件变量的使用…...

编程日记 2025/7/28 1:21:31

android 使用MediaPlayer实现音乐播放--权限请求

在Android应用中，获取本地音乐文件的权限是实现音乐扫描功能的关键步骤之一。随着Android版本的不断更新，从Android 6.0（API级别23）开始，应用需要动态请求权限，而到了android 13以上需要的权限又做了进一步…...

编程日记 2025/7/30 22:19:41

空间计算、物理计算、实时仿真与创造拥有「自主行为」的小狗 | 播客《编码人声》

「编码人声」是由「RTE开发者社区」策划的一档播客节目，关注行业发展变革、开发者职涯发展、技术突破以及创业创新，由开发者来分享开发者眼中的工作与生活。虚拟世界与现实世界的界限逐渐模糊，已然成为不争的事实。但究竟哪些曾经的幻想已然…...

编程日记 2025/8/2 13:21:51

Day24 回溯算法part03

93.复原IP地址本期本来是很有难度的，不过大家做完分割回文串之后，本题就容易很多了题目链接/文章讲解：代码随想录视频讲解：回溯算法如何分割字符串并判断是合法IP？| LeetCode：93.复原IP地址_哔哩哔哩_bilibili class Solution {private List<String> resul…...

编程日记 2025/7/31 10:35:55

PyTorch：如何使用TensorBoard优化和监控深度学习模型

如何使用TensorBoard优化和监控深度学习模型为了提供一个更加详细和完整的指南关于如何使用 TensorBoard 进行深度学习模型的监控与优化，我们将从TensorBoard的基础知识开始，一步步探讨如何设置和利用其各项功能。 1. TensorBoard简介与基本架构 Ten…...

编程日记 2025/8/2 13:37:16

FastAPI重载不生效？解决PyCharm中Uvicorn无法重载/重载缓慢的终极方法！

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 重载缓慢 📒📝 问题概述🚨 相关原因📝 解决方案一📝 解决方案二📝 解决方案三📝 解决方案四⚓️ 相关链接 ⚓️📖 介绍 📖 在使用FastAPI开发时，reload=True 本应让你在修改代码后自动重启服务，提升开发效率…...

编程日记 2025/8/2 0:44:16

利用 GitHub 和 Hexo 搭建个人博客【保姆教程】

利用 GitHub 和 Hexo 搭建个人博客利用 GitHub 和 Hexo 搭建个人博客一、前言二、准备工作（一）安装 Node.js 和 Git（二）注册 GitHub 账号三、安装 Hexo（一）创建博客目录（二）安装 H…...

编程日记 2025/8/2 20:59:45

【无标题】

通过shell脚本分析部署nginx网络服务 1.接收用户部署的服务名称 2.判断服务是否安装已安装；自定义网站配置路径为/www；并创建共享目录和网页文件；重启服务没有安装；安装对应的软件包 3.测试判断服务是否成功运行&a…...

编程日记 2025/8/2 3:38:04

金融数据中心容灾“大咖说” | 美创科技赋能“灾备一体化”建设

中国人民银行发布的《金融数据中心容灾建设指引》（JR/T 0264—2024）已于2024年7月29日正式实施。这一金融行业标准对金融数据中心容灾建设中的“组织保障、需求分析、体系规划、建设要求、运维管理”进行了规范和指导。面对不断增加的各类网络、业务、应…...

编程日记 2025/7/31 23:54:59

数据集-目标检测系列- 荷花莲花检测数据集 lotus＞＞ DataBall

数据集-目标检测系列- 荷花莲花检测数据集 lotus>> DataBall DataBall 助力快速掌握数据集的信息和使用方式，会员享有百种数据集，持续增加中。贵在坚持！ 数据样例项目地址： * 相关项目 1）数据集可视化项…...

编程日记 2025/8/2 1:02:45

【SQL Server】华中农业大学空间数据库实验报告实验六视图

1.实验目的通过课堂理论学习与实验课的实际操作，充分理解视图的相关概念，作用，以及特点，视图中定义的是对一个或多个基本表的查询语句，其本身并不保存数据，所有的数据都存储在数据库的表中，因…...

编程日记 2025/7/31 2:02:13

jetson orin系列开发版安装cuda的gpu版本的opencv

opencv安装包下载地址： https://github.com/opencv/opencv/扩展库下载地址： https://github.com/opencv/opencv_contrib1. 删除jetpack包中的opencv版本原先的opencv库安装在目录/usr/lib/aarch64-linux-gnu/下（一般其他的第三方库也都安…...

编程日记 2025/8/2 16:08:40

android 使用SQLiteOpenHelper 如何优化数据库的性能

一、数据库设计优化 (Schema Design): 这是性能优化的基础。一个精心设计的数据库结构可以显著提高查询速度和减少存储空间。范式化 (Normalization): 遵循数据库范式，特别是第一范式、第二范式和第三范式，可以消除数据冗余。冗余数据不仅浪费存储空间…...

编程日记 2025/7/29 20:21:46

海盗王集成网关和商城服务端功能golang版

之前用golang把海盗王的商城服务端和网关服务端都重写了一次。后来在同时开启网关和商城服务时，发现窗口数量有点多，有时要找到商城窗口比较麻烦。既然2个都是用golang govcl写的，是不是可以集成到一起，方便使用呢？…...

编程日记 2025/7/31 8:06:55

『大模型笔记』IBM技术团队：AI智能体与AI助手功能对比！

『大模型笔记』IBM技术团队：AI智能体与AI助手功能对比！文章目录一. 『大模型笔记』IBM技术团队：AI智能体与AI助手功能对比！AI 助手与 AI 智能体的角色类比AI 助手的特点与性能优化AI 智能体的自主性AI 助手与智能体的用例比较AI 技术的局限性与改进AI 未来发展趋势与协同…...

编程日记 2025/7/31 4:22:16

LeetCode 每日一题 2024/11/18-2024/11/24

记录了初步解题思路以及本地实现代码；并不一定为最优也希望大家能一起探讨一起进步目录 11/18 661. 图片平滑器11/19 3243. 新增道路查询后的最短距离 I11/20 3244. 新增道路查询后的最短距离 II11/21 3248. 矩阵中的蛇11/22 3233. 统计不是特殊数字的数字数量1…...

编程日记 2025/8/1 7:49:14

n、nvm、nrm、pnpm、yarn各种指令大全

n mac的版本管理工具（可能与nvm冲突） 安装 # 使用 npm / yarn npm i -g n yarn global add n # 使用 brew brew install n环境变量 export PATH"/usr/local/n/versions/node:$PATH"命令详解版本查看 # 查看 n 版本 n --version/-V # 查…...

编程日记 2025/8/2 0:31:05

详细描述一下Elasticsearch索引文档的过程？

大家好，我是锋哥。今天分享关于【详细描述一下Elasticsearch索引文档的过程？】面试题。希望对大家有帮助； 详细描述一下Elasticsearch索引文档的过程？ Elasticsearch的索引文档过程是其核心功能之一，涉及将数据存储到…...

编程日记 2025/8/2 16:47:13

【shell编程】shell基础之for与while循环

shell基础（五） 声明：该笔记为up主泷羽的课程笔记，本节链接指路。警告：本教程仅作学习用途，若有用于非法行为的，概不负责。 for循环 for循环用于遍历一系列的值，通常为一个列表或…...

编程日记 2025/7/30 1:03:00

C++多线程编程入门教程（优质版）

一、引言在当今的软件开发领域中，多线程编程的重要性日益凸显。它已然成为充分挖掘现代多核处理器性能、提升程序效率与响应速度的关键技术。C 作为一门强大的编程语言，其丰富的多线程编程工具和技术为开发者提供了广阔的施展空间。本文将引领读者踏入 …...

编程日记 2025/7/31 1:44:45

Spring监听的使用、原理、源码分析

一、原理分析 Spring监听的核心原理就是观察者模式。本文将对应观察者模式分析Spring监听的使用和原理。文章较长，跳转记得使用文章右边的目录。 1.1，观察者模式的组成 1，Subject：目标，即被观察者维护了观察者列表&am…...

编程日记 2025/8/1 17:58:22

CSS布局学习2

flex布局中span会改变行为在使用 Flex 布局时，盒子中的子元素（如 span）会自动成为 Flex 项目，并参与 Flex 布局的计算。具体原因如下： Flex 容器：当一个元素设置为 display: flex; 时，它会变…...

编程日记 2025/7/29 0:49:33

Oracle - 多区间按权重取值逻辑，分时区-多层级-取配置方案（三）

本篇紧跟第一篇， 和第二篇无关 Oracle - 多区间按权重取值逻辑 ，分时区-多层级-取配置方案 Oracle - 多区间按权重取值逻辑 ，分时区-多层级-取配置方案(二) 先说需求： 某业务配置表，按配置的时间区间及组织层级取方…...

编程日记 2025/7/15 11:12:29

Spring Cloud Netflix 系列：Eureka 经典实战案例和底层原理解析

文章目录前言Eureka 简介架构设计工作流程项目 demo 构建Eureka Server 的搭建Eureka Client 的配置补充说明运行效果深入使用Eureka 注册中心添加认证搭建 Eureka 集群实现高可用双节点集群搭建运行效果补充说明为什么要配置不同host 原理解析服务注册、心跳续期详细流程…...

编程日记 2025/8/1 9:27:36

ElasticSearch学习篇17_《检索技术核心20讲》最邻近检索-局部敏感哈希、乘积量化PQ思路

目录场景在搜索引擎和推荐引擎中，对相似文章去重是一个非常重要的环节，另外是拍照识花、摇一摇搜歌等场景都可以使用它快速检索。基于敏感性哈希的检索更擅长处理字面上的相似而不是语义上的相似。向量空间模型ANN检索加速思路局部敏感哈希编码随…...

编程日记 2025/7/31 1:33:37

2024亚太杯国际赛C题参考文章50页+完整解题思路+数据处理+最终结果

中国宠物食品行业的发展趋势与汇率情景分析：基于多模型的量化预测与决策分析一、摘要本文针对宠物产业及相关产业的发展分析问题，采用多种数学建模方法和数据分析技术，构建了一系列预测和评估模型。从宠物数量预测、全球市场分析、产业 …...

编程日记 2025/7/29 18:15:15

渗透测试笔记——shodan（4）

声明： 学习视频来自B站up主【泷羽sec】有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&am…...

编程日记 2025/7/31 4:20:35

一次封装，解放双手：Requests如何实现0入侵请求与响应的智能加解密

引言之前写了 Requests 自动重试的文章，突然想到，之前还用到过 Requests 自动加解密请求的逻辑，分享一下。之前在做逆向的时候，发现一般医院的小程序请求会这么玩，请求数据可能加密也可能不加密，但是返回…...

编程日记 2025/7/29 20:34:42

c++中操作数据库的常用函数

在C中操作数据库，尤其是MySQL数据库，主要通过MySQL提供的C API或MySQL Connector/C库来实现。这些库提供了一系列的函数，使得开发者能够在C应用程序中执行数据库的连接、查询、更新、删除等操作。以下是C中操作MySQL数据库的一些常用函数&…...

编程日记 2025/8/2 6:37:10

CoAP 协议介绍：特性、应用与优劣势

CoAP 协议简介 CoAP 协议（Constrained Application Protocol）是一种专门为受限设备设计的互联网应用协议。它旨在让小型、低功耗的设备能够接入物联网（IoT）。该协议允许这些设备以最小的资源与更广泛的互联网进行通信。 CoAP 协…...

编程日记 2025/7/27 22:03:29

leetcode hot100【LeetCode 53.最大子数组和】java实现

LeetCode 53.最大子数组和题目描述给定一个整数数组 nums，找到一个具有最大和的连续子数组（至少一个元素），返回其最大和。子数组是数组中的一个连续部分。示例 1: 输入: nums [-2,1,-3,4,-1,2,1,-5,4] 输出: 6 解释: 连续…...

编程日记 2025/7/30 6:55:07

MAC C语言 Helloword

在 macOS 系统上编写并运行一个简单的 “Hello, World!” 程序，你可以使用多种编程语言。下面我将以 C 语言为例，展示如何在 macOS 上编写、编译和运行这个经典的 “Hello, World!” 程序。步骤 1: 安装 Xcode Command Line Tools macOS 系统上通常没…...

编程日记 2025/7/26 21:56:51

【过程控制系统】第6章串级控制系统

目录 6. l 串级控制系统的概念 6.1.2 串级控制系统的组成 6.l.3 串级控制系统的工作过程 6.2 串级控制系统的分析 6.2.1 增强系统的抗干扰能力 6.2.2 改善对象的动态特性 6.2.3 对负荷变化有一定的自适应能力 6.3 串级控制系统的设计 6.3.1 副回路的选择 2.串级系…...

编程日记 2025/7/29 19:17:12

springboot：责任链模式实现多级校验

责任链模式是将链中的每一个节点看作是一个对象，每个节点处理的请求不同，且内部自动维护一个下一节点对象。当一个请求从链式的首段发出时，会沿着链的路径依此传递给每一个节点对象，直至有对象处理这个请求为止。属于行为型模式…...

编程日记 2025/7/28 1:18:20

如何构建高效的接口自动化测试框架？

🍅 点击文末小卡片 ，免费获取软件测试全套资料，资料在手，涨薪更快在选择接口测试自动化框架时，需要根据团队的技术栈和项目需求来综合考虑。对于测试团队来说，使用Python相关的测试框架更为便捷。无论选…...

编程日记 2025/8/2 13:13:35

spring-logback引用外部文件

背景在spring微服务开发和云部署中，都涉及到日志的收集，很多时候为例方便管理和开发，很多公司都会开发一些基础配置代码。其中日志就是很重要的部分， 为了方便部署、收集、查看，所以日志文件需要存储在同一个…...

编程日记 2025/7/30 1:14:02

【MyBatisPlus·最新教程】包含多个改造案例，常用注解、条件构造器、代码生成、静态工具、类型处理器、分页插件、自动填充字段

文章目录一、MyBatis-Plus简介二、快速入门1、环境准备2、将mybatis项目改造成mybatis-plus项目（1）引入MybatisPlus依赖，代替MyBatis依赖（2）配置Mapper包扫描路径（3）定义Mapper接口并继承BaseM…...

编程日记 2025/7/30 23:31:32

go项目中比较好的实践方案

工作两年来，我并未遇到太大的挑战，也没有特别值得夸耀的项目。尽管如此，在日常的杂项工作中，我积累了不少心得，许多实践方法也在思考中逐渐得到优化。因此，我在这里记录下这些心得。转发与封装这个需求…...

编程日记 2025/7/29 8:56:33

Windows之使用putty软件以ssh的方式连接Linux中文显示乱码

项目场景： 运行环境：Windows10 使用软件：putty 操作说明：以ssh的方式连接Linux 中文显示乱码问题描述 Windows之使用putty软件以ssh的方式连接Linux中文显示乱码原因分析： linux 机器的系统语言字符集与putty软件…...

编程日记 2025/7/28 0:27:26

springboot整合hive pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.…...

编程日记 2025/7/30 22:48:00

vxe-form table 修改表单数据校验的主题样式

在使用 vxe-form 表单校验时，数据校验可以支持2种主题样式官网：https://vxeui.com 普通样式通过设置 valid-config.theme‘normal’ 设置为普通样式高亮样式通过设置 valid-config.theme‘beautify’ 设置为高亮样式 <template><div&…...

编程日记 2025/7/30 20:36:58

【UE5】使用基元数据对材质传参，从而避免新建材质实例

在项目中，经常会遇到这样的需求：多个模型（例如 100 个）使用相同的材质，但每个模型需要不同的参数设置，比如不同的颜色或随机种子等。在这种情况下，创建 100 个实例材质不是最佳选择。正确的做…...

编程日记 2025/7/29 14:39:38

一个计算频率的模块

先上代码 module _sync_reg #(parameter INIT 0,parameter ASYNC_RESET 0 ) (input clk,input rst,input in,output out );(* ASYNC_REG "TRUE" *) reg sync1; (* ASYNC_REG "TRUE" *) reg sync2;assign out sync2;generate if (ASYNC_RE…...

编程日记 2025/8/2 2:40:38

在SpringBoot项目中集成MongoDB

文章目录 1. 准备工作2. 在SpringBoot项目中集成MongoDB2.1 引入依赖2.2 编写配置文件2.3 实体类 3. 测试4. 文档操作4.1 插入操作4.1.1 单次插入4.1.2 批量插入 4.2 查询操作4.2.1 根据id查询4.2.2 根据特定条件查询4.2.3 正则查询4.2.4 查询所有文档4.2.5 排序后返回 4.3 删除…...

编程日记 2025/7/29 20:35:12