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

前端性能优化方案

news 来源：原创 2025/6/29 23:09:45

一、HTML优化策略

1、减少DOM层级

<!-- 避免 --><div><div><div><p>内容</p></div></div></div><!-- 推荐 --><div class="content">内容</div>

原因：嵌套过深会增加渲染树的构建时间

2、异步加载非关键资源

<!-- defer/async 区别 --><script defer src="non-critical.js"></script>  <!-- DOM解析后执行 --><script async src="analytics.js"></script>    <!-- 下载完立即执行 -->

3、预加载关键资源

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="next-page.html">  <!-- 空闲时预加载 -->

二、CSS优化策略

1、关键 CSS 内联，避免阻塞渲染

<!-- 将非关键CSS移到body底部 -->
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

2、减少页面重绘和回流

回流（reflow）：是指由于DOM结构或样式发生改变，浏览器需要重新计算元素的几何属性，然后重新布局页面的过程

重绘（repaint）：是指当元素样式发生改变，但不影响布局时，浏览器只需要重新绘制受影响的部分，而不需要重新计算布局

尽量减少深度嵌套或复杂选择器的使用，以提高 CSS 渲染效率
避免频繁的DOM操作‌：频繁修改DOM会导致重排和重绘，尽量批量处理DOM修改，或者使用DocumentFragment来构建DOM树后再添加到页面
合理使用GPU加速：使用CSS3的硬件加速功能，可以将需要进行动画或变换的元素提升到一个独立的渲染层，从而避免浏览器进行重新布局（Reflow）和绘制（Repaint）‌。可以触发 GPU 硬件加速的 CSS 属性包括 transform、filter、will-change 和 position:fixed

3、图像压缩、格式选择和精灵图

WebP 格式替代 JPEG/PNG（兼容性需考虑）：相比于PNG和JPEG的优点主要包括更小的文件大小、更高的压缩效率和更好的图像质量保持。
TinyPNG压缩图片
精灵图：将许多小图像合并成一个大图像。这样，在加载页面时，只需要获取一个图像来显示多个页面元素

4、图片懒加载

仅在图像进入浏览器视口时加载图像

将 img 的src属性设置成一张默认图片，在图片加载出来之前显示默认图片。

用data-自定义属性名 (data-src) 接收图片的真实路径，待图片滚动到可视区域的时候开始加载图片，待图片加载出来之后替换掉之前的默认图片

三、Javascript优化策略

1、防抖与节流

防抖，就是指触发事件后，在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。防抖确保函数在一段时间内只执行一次，且是在最后一次触发事件后执行。

节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流确保函数按照固定的时间间隔执行。

2、虚拟列表优化长列表

3、Web Worker处理密集型任务

浏览器提供的 JavaScript 多线程解决方案，它允许在主线程之外运行脚本，避免阻塞 UI 渲染

四、webpack优化策略

减少打包体积（减小最终资源大小）

优化点	做法
✅ Tree Shaking	删除未使用代码（使用 ES6 `import/export` 模块规范）
✅ 压缩 JS	使用 `TerserPlugin` 进行代码压缩（默认内置于 mode=production）
✅ 压缩 CSS	使用 `css-minimizer-webpack-plugin`
✅ 压缩图片	使用 `image-webpack-loader` 或在打包前压缩
✅ 忽略 Moment.js 的多语言	`new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ })`
✅ 使用 CDNs	将大库（如 React、Vue）用 CDN 引入，设置为 externals
✅ 使用按需加载库	例如 `lodash-es` + `babel-plugin-lodash`

五、CDN优化策略

CDN 优化（内容分发网络）是部署在全球各地的缓存服务器集群，将静态资源（图片、JS、CSS 等）缓存到离用户更近的服务器，提升加载速度，减少延迟。

CDN 优化策略

优化点	说明	配置建议
① 使用 CDN 加速静态资源	加快加载速度（图片、JS、CSS、字体等）	将资源上传到 CDN 服务商（如阿里云、腾讯云、七牛、Cloudflare）
② 设置域名分发	资源使用独立域名，防止与主站 Cookie 冲突	如静态资源用 `static.example.com`
③ DNS 预解析	提前建立连接	HTML 添加：`<link rel="dns-prefetch" href="//static.example.com">`
④ preconnect	提前建立 TCP + TLS 连接	`<link rel="preconnect" href="https://cdn.example.com">`
⑤ CDN 缓存控制	控制资源更新策略	在 CDN 控制台设置 `Cache-Control`、`Expires`

六、浏览器缓存优化策略

浏览器缓存通过存储资源副本（CSS、JS、图片等），避免重复请求服务器，提升性能。

两类缓存方式

类型	说明	特点
① 强缓存（强制使用缓存）	不发请求，直接读取缓存资源	`Cache-Control`、`Expires` 控制
② 协商缓存（可能使用缓存）	发送请求，服务端判断是否使用缓存	`ETag`、`Last-Modified` 控制

前端性能优化方案

一、HTML优化策略 1、减少DOM层级 <div><div><div><p>内容</p></div></div></div><div class"content">内容</div> 原因：嵌套过深会增加渲染…...

编程日记 2025/6/29 23:09:45

前端vscode学习

1.安装python 打开Python官网：Welcome to Python.org 一定要点PATH，要不然要自己设点击install now,就自动安装了键盘winR 输入cmd 点击确定输入python，回车显示这样就是安装成功了 2.安装vscode 2.1下载软件 2.2安装中文 2.2.1当安…...

编程日记 2025/6/29 21:59:29

python实现web请求与回复

一、作为客户端发送请求（使用requests库） import requests # 发送GET请求 response requests.get("https://api.example.com/data") print("GET响应状态码:", response.status_code) print("GET响应内容:", response.…...

编程日记 2025/6/29 15:16:43

Python实现Web请求与响应

目录一、Web 请求与响应基础 （一）Web 请求与响应的定义与组成 （二）HTTP 协议概述 （三）常见的 HTTP 状态码二、Python 的 requests 库 （一）安装 requests 库 （二…...

编程日记 2025/6/29 21:34:31

AI与.NET技术实操系列（六）：实现图像分类模型的部署与调用

引言人工智能（AI）技术的迅猛发展推动了各行各业的数字化转型。图像分类，作为计算机视觉领域的核心技术之一，能够让机器自动识别图像中的物体、场景或特征，已广泛应用于医疗诊断、安防监控、自动驾驶和电子商务等领域…...

编程日记 2025/6/29 21:20:07

PP-YOLOE-SOD学习笔记1

项目：基于PP-YOLOE-SOD的无人机航拍图像检测案例全流程实操 - 飞桨AI Studio星河社区一、安装环境先准备新环境py>3.9 1.先cd到源代码的根目录下 2.pip install -r requirements.txt 3.python setup.py install 这一步需要看自己的GPU情况，去飞浆…...

编程日记 2025/6/29 21:38:17

Axure系统原型设计列表版方案

列表页面是众多系统的核心组成部分，承担着数据呈现与基础交互的重要任务。一个优秀的列表版设计，能够极大提升用户获取信息的效率，优化操作体验。下面，我们将结合一系列精心设计的列表版方案图片，深入探讨如何打造出实…...

编程日记 2025/6/29 21:43:15

腾讯音乐二面

ReentrantLock 的源码及实现 ReentrantLock 是 Java 中的一种可重入的互斥锁。它通过 AQS（AbstractQueuedSynchronizer）框架来实现。AQS 使用一个 FIFO 队列来管理获取锁的线程。ReentrantLock 有公平锁和非公平锁两种模式。非公平锁：当线程尝…...

编程日记 2025/6/29 21:47:35

服务器操作系统调优内核参数(方便查询)

fs.aio-max-nr1048576 #此参数限制并发未完成的异步请求数目，应该设置避免I/O子系统故障 fs.file-max1048575 #该参数决定了系统中所允许的文件句柄最大数目，文件句柄设置代表linux系统中可以打开的文件的数量 fs.inotify.max_user_watches8192000 #表…...

编程日记 2025/6/29 5:15:04

MySQL5.7导入MySQL8.0的文件不成功

文章目录问题检查原因及解决方法原因解决办法问题检查检查自己的mysql版本自己检查，搜索“0900_ai_ci”，如果能搜索到，说明这个sql文件是从8的版本导出的原因及解决方法原因 MySQL 8.0默认使用utf8mb4字符集和utf8mb4_0900_ai_ci排…...

编程日记 2025/6/29 21:13:50

vscode连接WSL卡住

原因：打开防火墙解决： 使用sudo ufw disable关闭防火墙...

编程日记 2025/6/29 21:17:05

springAI调用deepseek模型使用硅基流动api的配置信息

查看springai的官方文档，调用deepseek的格式如下： spring.ai.deepseek.api-key${your-api-key} spring.ai.deepseek.chat.options.modeldeepseek-chat spring.ai.deepseek.chat.options.temperature0.8 但是硅基流动的格式不是这样，这个伞兵…...

编程日记 2025/6/27 22:59:15

symbol【ES6】

你一闭眼世界就黑了，你不是主角是什么？ 目录什么是Symbol？‌Symbol特点‌：创建方法：注意点：不能进行运算：显示调用toString() --没有意义隐式转换boolean 如果属性名冲突了怎么办？o…...

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

如何用数据可视化提升你的决策力？

在数字化浪潮席卷全球的当下，数据已然成为企业和组织发展的核心资产。然而，单纯的数据堆积犹如未经雕琢的璞玉，难以直接为决策提供清晰有力的支持。数据可视化作为一种强大的工具，能够将海量、复杂的数据转化为直观、易懂的图形、…...

编程日记 2025/6/27 23:00:38

【C++】vector容器实现

目录一、vector的成员变量二、vector手动实现 （1）构造 （2）析构 （3）尾插 （4）扩容 （5）[ ]运算符重载 5.1 迭代器的实现： （6&…...

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

C语言求1到n的和（附带源码和解析）

在C语言中，使用 for 循环求 1 到 n 的和是一个常见的编程任务。这个任务不仅可以帮助初学者理解循环的基本概念，还能培养他们的逻辑思维能力。要计算 1 到 n 的和，我们需要创建一个循环，从 1 开始，一直累加到 n。for…...

编程日记 2025/6/27 23:07:52

springboot3+vue3融合项目实战-大事件文章管理系统-文章分类也表查询（条件分页）

在pojo实体类中增加pagebean实体类 Data NoArgsConstructor AllArgsConstructor public class PageBean <T>{private Long total;//总条数private List<T> items;//当前页数据集合 }articlecontroller增加代码 GetMappingpublic Result<PageBean<Article&g…...

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

java中定时任务的实现及使用场景

在 Java 需要中，定时任务的实现方式有单线程模型的 Timer 类、线程池定时任务的 ScheduleExecutorService、spring 框架提供的注解Schedule 定时任务，第三个框架定时任务比如 XX-Job,Quartz 等。 Java 任务调度组件对比与使用指南一、核心功能对比特…...

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

使用 OpenCV 实现哈哈镜效果

在计算机视觉和图像处理领域，OpenCV 提供了非常强大的图像几何变换能力，不仅可以用于纠正图像，还能制造各种“有趣”的视觉效果。今天，我们就来实现一个经典的“哈哈镜”效果，让图像像在游乐园里一样被拉伸、压缩、扭曲…...

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

【Java高阶面经：微服务篇】9.微服务高可用全攻略：从架构设计到自动容灾

一、架构层：构建抗故障的分布式基石 1.1 多维度冗余设计 1.1.1 跨可用区部署策略 # Kubernetes跨可用区反亲和性配置 apiVersion: apps/v1 kind: Deployment metadata:name: product-service spec:replicas: 3template:spec:affinity:podAntiAffinity:requiredDuringSchedu…...

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

读一本书第一遍是快读还是细读？

在时间充足且计划对重要书籍进行多遍阅读的前提下，第一遍阅读的策略可以结合**「快读搭建框架」与「标记重点」**，为后续细读奠定基础。以下是具体建议及操作逻辑： 一、第一遍：快读为主，目标是「建立全局认知」 1. 快…...

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

COMPUTEX 2025 | 广和通5G AI MiFi解决方案助力移动宽带终端迈向AI新未来

随着5G与AI不断融合，稳定高速、智能的移动网络已成为商务、旅行、户外作业等场景的刚需。广和通5G AI MiFi方案凭借领先技术与创新设计，重新定义5G移动网络体验。广和通5G AI MiFi 方案搭载高通 4nm制程QCM4490平台，融合手机级超低功耗技术…...

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

JAVA批量发送邮件（含excel内容）

EmailSenderHtmlV1 是读取配置文件《批量发送邮件.xlsx》，配置sheet获取发件人邮箱邮箱账号口令，发送excel数据sheet获取收件人邮箱抄送人邮箱邮件标题第N行开始(N>1,N0默认表头) 第M行结束(M>1,M0默认表头) 附件文件夹…...

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

MyBatis 关联映射深度解析：_association_ 与 _collection_ 实战教程

一、核心概念与适用场景在 MyBatis 中，<association> 和 <collection> 用于处理对象间的关联关系，简化复杂查询到对象结构的映射。标签用途对应关系示例场景<association>映射单个嵌套对象（“有一个”关系）一对一、多对一员工 (Emp) 属于一个部门 (D…...

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

NSSCTF [watevrCTF 2019]Wat-sql

90.[watevrCTF 2019]Wat-sql(逻辑漏洞) [watevrCTF 2019]Wat-sql (1) 1.准备 motalymotaly-VMware-Virtual-Platform:~$ file sql sql: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), dynamically linked, interpreter /lib64/ld-linux-x86-64.so.2, for GNU/Linu…...

编程日记 2025/6/29 18:23:58

C++ 前缀和数组

一. 一维数组前缀和 1.1. 定义前缀和算法通过预处理数组，计算从起始位置到每个位置的和，生成一个新的数组（前缀和数组）。利用该数组，可以快速计算任意区间的和，快速求出数组中某一段连续区间的和。 1.2. …...

编程日记 2025/6/27 5:19:10

免费使用GPU的探索笔记

多种有免费时长的平台 https://www.cnblogs.com/java-note/p/18760386 Kaggle免费使用GPU的探索 https://www.kaggle.com/ 注册Kaggle账号访问Kaggle官网，使用邮箱注册账号。发现gpu都是灰色的返回home，右上角的头像点开验证手机号再次code-you…...

编程日记 2025/6/27 21:00:11

【css】 flex布局基本知识

Flexible Box 模型，是一种一维的布局模型。一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。轴线 flex 属性与主轴和交叉轴有关，通过flex-direction定义主轴由 flex-direction 定义，可以取 4 个值：…...

编程日记 2025/6/27 23:02:26

3D Gaussian Splatting for Real-Time Radiance Field Rendering——文章方法精解

SfM → Point-NeRF → 3D Gaussian Splatting 🟦SfM Structure-from-Motion（运动恢复结构，简称 SfM）是一种计算机视觉技术，可以： 利用多张从不同角度拍摄的图像，恢复出场景的三维结构和相机的…...

编程日记 2025/6/27 23:09:16

RestTemplate 发送的字段第二个大写字母变成小写的问题探究

在使用RestTemplate 发送http 请求的时候，发现nDecisonVar 转换成了ndecisonVar ,但是打印日志用fastjson 打印的没有问题，换成jackson 打印就有问题。因为RestTemplate 默认使用的jackson 作为json 序列化方式，导致的问题，但是为…...

编程日记 2025/6/29 9:28:48

第二次中医知识问答微调

由于昨天微调效果并不理想，因此更换数据集和参数进行重新进行了微调本次微调参数如下： llamafactory-cli train \ --stage sft \ --do_train True \ --model_name_or_path /home/qhyz/zxy/LLaMA-Factory/model \ --preprocessing_num_workers 16 \ --…...

编程日记 2025/6/29 15:33:39

Linux查 ssh端口号和服务状态

一、检查SSH服务运行状态通过进程查看命令验证服务是否启动： ps -ef | grep ssh当输出包含sshd进程时，表示SSH服务正在运行。示例输出： root 1234 1 0 10:00 ? 00:00:00 /usr/sbin/sshd二、查看服务监听端口使用网络…...

编程日记 2025/6/27 2:09:33

C++ 11（1）：

C11的发展史： C11中的{}： 看这个图片，我们的C11是所有的对象都可以使用{}来进行初始化，之前我们的int类型的数据要使用赋值符号来进行初始化，现在的话我们可以直接使用花括号来进行，并且连赋值符号都可以去…...

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

数据结构（4）线性表-链表-双链表

一、链表的分类迟来的分类，主要如果在学习单链表前去讲分类，可能就云里雾里的，所以放在讲完单链表后讲。划分链表的标准如下： 有没有头结点、指针的方向、循环与否头结点就是一个占位结点，也被叫做哨兵位&#x…...

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

Spring Framework 的 spring-core 和 Spring Security 兼容版本

Spring Framework 的 spring-core 和 Spring Security 兼容版本 Spring Framework 的 spring-core 和 Spring Security 的版本需要保持兼容性，尤其是在旧版本（如 Spring 4.x）中。以下是它们的版本对应关系： Spring 4.x (spring-c…...

编程日记 2025/6/29 2:24:48

《国家职业教育平台：点亮职业教育新灯塔》

职教新航标：平台诞生记国家职业教育智慧教育平台在科技飞速发展的今天，数字化浪潮席卷全球，深刻地改变着我们生活的方方面面，教育领域也不例外。随着信息技术的不断进步，教育数字化已成为当今世界教育发展的重要趋势…...

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

Java多线程深度解析：从核心机制到高阶实战

Java多线程深度解析：从核心机制到高阶实战摘要：本文系统解析Java多线程全体系知识，涵盖线程实现原理、并发工具实战、锁机制底层实现、线程池参数调优策略，并提供20可运行代码片段。附内存模型原理与性能优化指南。目录线程基…...

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

大量程粗糙度轮廓仪适用于哪些材质和表面？

大量程粗糙度轮廓仪是一种能够在广泛的测量范围内对工件表面进行粗糙度分析的精密仪器。它通常采用接触式或非接触式传感器，通过对工件表面的扫描，捕捉表面微观的起伏和波动，从而获取粗糙度数据。该仪器不仅能测量微小的表面细节，…...

编程日记 2025/6/27 23:32:53

NC028NQ472美光固态颗粒NQ484NQ485

深度解析：NC028NQ472、NQ484与NQ485美光固态颗粒技术架构解析：堆叠式存储与算法优化美光NC028NQ472、NQ484及NQ485系列固态颗粒均采用自研3D TLC NAND闪存技术，其核心架构通过垂直堆叠存储单元实现高密度集成。以NQ472为例，采…...

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

Cursor神一样的存在，核心能力codebase是如何工作的？

最近宣布达到 3 亿美元年度经常性收入，已经成为vibe coding标配。核心能力来自于Codebase。根据官方说法，codebase实现是依赖使用 Merkle 树来快速索引代码。但是没有竞品模仿这种方法。 Merkle是如何工作的那？ Merkle 树简单解释 Merkle …...

编程日记 2025/6/29 11:40:59

python代码绘制某只股票最近90天的K线图、均线、量能图

运行代码，要求输入股票代码和名称，其他参数可省略 import akshare as ak import matplotlib.pyplot as plt import pandas as pd import mplfinance as mpf import matplotlib.dates as mdates import numpy as np import os from datetime import date…...

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

upload-labs通关笔记-第15关文件上传之getimagesize绕过（图片马）

目录一、图片马二、文件包含三、文件包含与图片马四、图片马制作方法五、源码分析六、制作图片马 1、创建脚本并命名为test.php 2、准备制作图片马的三类图片 3、使用copy命令制作图片马七、渗透实战 1、GIF图片马渗透 （1）上传gif图…...

编程日记 2025/6/27 5:42:56

反弹shell

shell了解 shell其xxxx是交互，点鼠标敲键盘与计算机进行交互，还有常见的shell（cmd，powershell） shell反弹当远程连接shell（windows远程桌面，linux有SSH之类），从外面远…...

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

【动手学深度学习】1.3. 各种机器学习问题

目录 1.3. 各种机器学习问题1）监督学习（supervisedlearning）（1）回归（regression）（2）分类（classification）（3）标记问题&…...

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

OS进程调度

tss Q1：你是如何保证两个进程不能同时访问共享资源的？ ✅ 推荐回答： 我实现了基于结构体的互斥锁，使用 mutex_lock() 来加锁资源。如果已有任务持有锁，则当前任务会被阻塞并加入等待队列，直到被唤醒。解锁…...

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

MCP和 AI agent 有什么区别和联系

MCP 是什么？ MCP（Model Context Protocol，模型上下文协议）是一种开源通信协议，旨在为大型语言模型（LLM）与外部数据源、工具或服务之间建立标准化、安全且灵活的双向连接。它类似于“AI 的 USB-…...

编程日记 2025/6/27 23:25:16

用Recommenders，实现个性化推荐

文章目录引言一、Recommenders简介二、选择Recommenders的原因三、智能推荐系统的设计与实现四、总结引言在这个信息如洪流般涌来的时代，你是否常常在茫茫的信息海洋中迷失方向，为找不到自己心仪的内容而苦恼？今天咱们就来聊聊基于Micros…...

编程日记 2025/6/27 23:02:35

MCP-1：MCP组件与工作流程

MCP-1：MCP组件与工作流程 1.什么是MCP2.MCP架构组件2.1.MCP Hosts2.2.MCP Client2.3.MCP Server3.交互流程3.1.用户提问3.2.LLM 推理选择MCP Server（大模型规划）3.3.调用 MCP Tool3.4.返回结果3.5.数据清洗3.6.反馈信息给用户1.什么是MCP MCP（Model Context Proto…...

编程日记 2025/6/29 9:08:26

NVIDIA GPU 性能调优与诊断完全指南

本文为多 GPU 用户（如 3*RTX A4000 系统）提供一份全面的调优与诊断手册，涵盖功率限制、风扇控制、频率锁定、缓存清理、GPU 重置与性能测试工具等操作命令，适合开发者与研究人员在部署前进行系统级优化与验证。 📌 目录…...

编程日记 2025/6/29 23:01:49

从运维告警到业务决策：可观测性正在重新定义企业数据基础设施

可观测性（Observability）与传统监控（Monitoring）的核心差异，本质上是一种数据维度的主动暴露与被动采集的范式转变。传统监控就像在黑暗森林中设置有限的探照灯，运维人员必须预先假设可能的故障路径&#x…...

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

一、HTML优化策略​

1、减少DOM层级​​

​​2、异步加载非关键资源​​

​​3、预加载关键资源​​