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

大白话前端性能优化方法的分类与具体实现

news 2026/4/6 8:03:17

大白话前端性能优化方法的分类与具体实现

一、资源加载优化

1. 压缩与合并文件
  • 大白话解释：
    • 咱们的网页代码里，就像一个房间堆满了东西，有很多没用的“杂物”，比如代码里的空格、注释啥的。压缩文件就是把这些“杂物”清理掉，让文件变得更“瘦”，下载起来就快多啦。合并文件呢，就好比把好几个小包裹合成一个大包裹，这样浏览器下载的时候就不用一次又一次地去请求，节省时间。
  • 具体实现（使用 Webpack 压缩合并 JavaScript 和 CSS 文件）：
    • 首先，确保你已经安装了 Webpack 和相关的加载器、插件。
    • 安装依赖：
npm install webpack webpack-cli css - loader style - loader terser - webpack - plugin mini - css - extract - plugin --save - dev

- 创建 `webpack.config.js` 文件：

const path = require('path');
const TerserPlugin = require('terser - webpack - plugin');
const MiniCssExtractPlugin = require('mini - css - extract - plugin');module.exports = {mode: 'production',entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css - loader']}]},optimization: {minimizer: [new TerserPlugin()]},plugins: [new MiniCssExtractPlugin({filename: 'styles.css'})]
};

- 在 `package.json` 里添加脚本：

{"scripts": {"build": "webpack"}
}

- 运行 `npm run build` 就可以压缩合并代码了。
2. 图片优化
  • 大白话解释：
    • 图片就像一个个大胖子，特别占地方，下载起来可费劲了。选对图片格式，就像给胖子减肥，选个合适的方法让它变瘦。压缩图片呢，就是把胖子身上多余的“肥肉”去掉，让它更轻巧。
  • 具体实现（使用 TinyPNG 在线压缩图片）：
    • 打开 TinyPNG 官网。
    • 点击上传图片按钮，选择你要压缩的图片。
    • TinyPNG 会自动帮你压缩图片，压缩完成后下载压缩后的图片，替换原来的图片就行。
3. 按需加载
  • 大白话解释：
    • 有些东西不是一开始就需要的，就像你去超市买东西，有些东西等你要用的时候再去拿，没必要一开始就把所有东西都买回家。按需加载就是等用户需要用到某个功能或者资源的时候，再去加载它，这样能加快页面的初始加载速度。
  • 具体实现（Vue 路由懒加载）：
// 原来的路由配置
// import Home from './views/Home.vue'
// import About from './views/About.vue'// 改为懒加载
const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];

二、代码优化

1. 防抖和节流
  • 大白话解释：
    • 防抖就像坐电梯，你一直按开门按钮，电梯不会每次都开门，而是等你停了一会儿，确定你不按了，才会开门。节流呢，就像水龙头，不管你怎么拧，在一段时间内，水的流量是固定的，不会一直变大。
  • 具体实现（JavaScript 防抖和节流函数）：
// 防抖函数
function debounce(func, delay) {let timer;return function () {const context = this;const args = arguments;clearTimeout(timer);timer = setTimeout(() => {func.apply(context, args);}, delay);};
}// 节流函数
function throttle(func, limit) {let inThrottle;return function () {const context = this;const args = arguments;if (!inThrottle) {func.apply(context, args);inThrottle = true;setTimeout(() => inThrottle = false, limit);}};
}// 使用示例
const input = document.getElementById('searchInput');
const searchFunction = () => {console.log('执行搜索');
};// 防抖
input.addEventListener('input', debounce(searchFunction, 300));// 节流
window.addEventListener('scroll', throttle(() => {console.log('滚动触发');
}, 200));
2. 减少重排和重绘
  • 大白话解释：
    • 重排就像你重新布置房间里的家具，得把家具挪来挪去，很费时间。重绘就像给家具重新刷漆，也得花点时间。减少重排和重绘就是尽量少折腾房间里的家具，让页面加载和渲染更快。
  • 具体实现（批量修改样式减少重排）：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF - 8">
</head><body><div id="myDiv">这是一个 div</div><script>const div = document.getElementById('myDiv');// 先获取样式对象const style = div.style;// 批量修改样式style.width = '200px';style.height = '200px';style.backgroundColor = 'red';</script>
</body></html>

三、缓存优化

1. 浏览器缓存
  • 大白话解释：
    • 浏览器缓存就像你的小仓库，把一些常用的东西放进去。下次要用的时候，直接从仓库里拿，不用再去外面买，这样就节省时间啦。
  • 具体实现（设置 HTTP 缓存头）：
    • 如果你使用 Node.js 和 Express 框架，可以这样设置：
const express = require('express');
const app = express();app.get('/static/js/main.js', (req, res) => {res.set('Cache - Control', 'public, max - age=3600');res.sendFile(__dirname + '/public/js/main.js');
});const port = 3000;
app.listen(port, () => {console.log(`Server running on port ${port}`);
});
2. CDN 缓存
  • 大白话解释：
    • CDN 就像在全国各地都有小仓库，你要的东西离你近的仓库就有，不用从很远的大仓库运过来，速度就快了。
  • 具体实现（使用阿里云 CDN）：
    • 登录阿里云 CDN 控制台。
    • 添加域名，配置源站信息（就是你原来存放资源的服务器地址）。
    • 把网页里的资源链接替换成 CDN 分配的链接，比如把 <script src="http://your - server.com/js/main.js"></script> 换成 <script src="http://your - cdn - domain.com/js/main.js"></script>。

四、服务器优化

1. 选择合适的服务器
  • 大白话解释：
    • 服务器就像你的厨师，好的厨师做菜又快又好吃。选性能好、稳定的服务器，网页响应速度就快，用户体验就好。
  • 具体实现：
    • 如果你是个人小网站，可以选择阿里云轻量应用服务器，配置简单，价格实惠。如果是大型网站，就选择性能更高的云服务器 ECS，根据网站的访问量和需求选择合适的配置。
2. 优化服务器配置
  • 大白话解释：
    • 服务器配置就像厨师的厨房工具，工具好用，做菜效率就高。优化服务器配置能让服务器处理请求更快，就像给厨师换上更锋利的刀和更顺手的锅。
  • 具体实现（Nginx 调整并发连接数）：
    • 打开 Nginx 配置文件（一般在 /etc/nginx/nginx.conf）。
    • 找到 worker_connections 配置项，把它的值调大，比如：
worker_processes  1;events {worker_connections  1024; // 可根据服务器性能调整
}
  • 保存配置文件，重启 Nginx 服务：
sudo systemctl restart nginx

相关文章：

大白话前端性能优化方法的分类与具体实现

大白话前端性能优化方法的分类与具体实现 一、资源加载优化 1. 压缩与合并文件 大白话解释&#xff1a; 咱们的网页代码里&#xff0c;就像一个房间堆满了东西&#xff0c;有很多没用的“杂物”&#xff0c;比如代码里的空格、注释啥的。压缩文件就是把这些“杂物”清理掉&a…...

编程日记 2025/3/2 15:24:54

Rabbit MQ 高频面试题【刷题系列】

文章目录 一、公司生产环境用的什么消息中间件&#xff1f;二、Kafka、ActiveMQ、RabbitMQ、RocketMQ有什么优缺点&#xff1f;三、解耦、异步、削峰是什么&#xff1f;四、消息队列有什么缺点&#xff1f;五、RabbitMQ一般用在什么场景&#xff1f;六、简单说RabbitMQ有哪些角…...

编程日记 2025/3/2 15:19:49

ES6 特性全面解析与应用实践

1、let let 关键字用来声明变量&#xff0c;使用let 声明的变量有几个特点&#xff1a; 1) 不允许重复声明 2) 块儿级作用域 3) 不存在变量提升 4) 不影响作用域链 5) 暂时性死区 6&#xff09;不与顶级对象挂钩 在代码块内&#xff0c;使用let命令声明变量之前&#x…...

编程日记 2025/3/2 15:16:45

有关数据库表的冗余字段

有关数据库表的冗余字段 之前看一个开发人员的技术研讨视频&#xff0c;提到了一个数据库表设计中的表拆分字段冗余问题&#xff0c;就是一张表做纵向分表&#xff0c;拆分为a和b以做冷热数据分离存储&#xff0c;但是会有一种情况就是相同的字段值在a&#xff0c;b表中重复出现…...

编程日记 2025/3/2 15:10:37

知识图谱补全KGC

目录 基础知识知识图谱补全概念性能指标 一、翻译模型的知识图谱补全1.TransE2.TransH3.RotatE 二、张量分解的知识补全1.RESCAL2.ComplEx 三、神经网络的知识图谱补全1.卷积神经网络CNN&#xff08;一般用于二维图像处理&#xff09;ConvE 2.循环神经网络RNN3.图神经网络GNN1&…...

编程日记 2025/3/2 15:09:34

独立开发者的内容营销教程

内容营销对于独立开发者来说&#xff0c;是一种低成本、高效的方式来推广产品、建立品牌影响力和吸引潜在用户。通过分享有价值、相关性强的内容&#xff0c;您可以吸引用户的注意力&#xff0c;增强用户黏性&#xff0c;并最终将他们转化为忠实用户或客户。以下是详细的独立开…...

编程日记 2025/3/2 15:08:32

Mysql——约束与多表查询

一、约束 1.1定义 约束是对表中的数据进行限制的一套规则&#xff0c;用于防止用户向数据库中输入无效数据。它可以保证表中的数据满足特定业务规则和逻辑&#xff0c;从而维护数据的准确性和可靠性。 1.2作用 数据完整性 &#xff1a;约束可以确保数据在插入、更新或删除时符…...

编程日记 2025/3/2 15:05:28

DockerでOracle Database 23ai FreeをセットアップしMAX_STRING_SIZEを拡張する手順

DockerでOracle Database 23c FreeをセットアップしMAX_STRING_SIZEを拡張する手順 はじめに環境準備ディレクトリ作成Dockerコンテナ起動 データベース設定変更コンテナ内でSQL*Plus起動PDB操作と文字列サイズ拡張設定検証 管理者ユーザー作成注意事項まとめ はじめに Oracle…...

编程日记 2025/3/2 15:04:27

Unity 运用正则表达式保留字符串中的中文英文字母和数字

正则表达 正则表达式 – 语法 | 菜鸟教程 Regex 类 (System.Text.RegularExpressions) | Microsoft Learn 保留字符串中的中英数 中英数的正则表达。 patten "[\u4e00-\u9fa5A-Za-z0-9]"; 使用Regex 类匹配正则并保留。 matches Regex.Matches(str, patten)…...

编程日记 2025/3/2 15:03:26

vue el-table-column 单元表格的 省略号 实现

要对 el-table-column 的某一列中的每个单元格值进行处理&#xff0c;使其在文本内容超出指定宽度时显示省略号&#xff08;…&#xff09;&#xff0c;可以通过以下方法实现&#xff1a; 使用 scoped slots&#xff1a;利用 Element UI 提供的 scoped slots 自定义单元格内容…...

编程日记 2025/3/2 15:02:24

企业微信里可以使用的企业内刊制作工具，FLBOOK

如何让员工及时了解公司动态、行业资讯、学习专业知识&#xff0c;并有效沉淀企业文化&#xff1f;一份高质量的企业内刊是不可或缺的。现在让我来教你该怎么制作企业内刊吧 1.登录与上传 访问FLBOOK官网&#xff0c;注册账号后上传排版好的文档 2.选择模板 FLBOOK提供了丰富的…...

编程日记 2025/3/2 15:00:22

【数据挖掘】Pandas

Pandas 是 Python 进行 数据挖掘 和 数据分析 的核心库之一&#xff0c;提供了强大的 数据清洗、预处理、转换、分析 和 可视化 功能。它通常与 NumPy、Matplotlib、Seaborn、Scikit-Learn 等库结合使用&#xff0c;帮助构建高效的数据挖掘流程。 &#x1f4cc; 1. 读取数据 P…...

编程日记 2025/3/2 14:59:20

explore与explode词源故事

英语单词explore来自古法语&#xff0c;源自拉丁语&#xff0c;由前缀ex-&#xff08;出来&#xff09;加词根plor-&#xff08;叫喊&#xff09;以及末尾的小尾巴-e组成&#xff0c;字面意思就是“喊出来&#xff0c;通过叫喊声赶出来”。它为什么能表示“探索”呢&#xff1f…...

编程日记 2025/3/2 14:57:17

CAM350_安装

版本&#xff1a;V14.5 一、安装 打开.exe文件 选择不重启&#xff0c;然后再打开这个.exe 再来一次类似的操作 二、配置 复制patch文件夹中的这三个 &#xff0c;粘贴到掉安装目录中 设置ACT_INC_LICENSE_FILE用户环境变量来设置license管理 打开电脑的环境变量 破解完毕&am…...

编程日记 2025/3/2 14:56:16

51c自动驾驶~合集22

我自己的原文哦~ https://blog.51cto.com/whaosoft/11870502 #自动驾驶数据闭环最前沿论文 近几年&#xff0c;自动驾驶技术的发展日新月异。从ECCV 2020的NeRF问世再到SIGGRAPH 2023的3DGS&#xff0c;三维重建走上了快速发展的道路&#xff01;再到自动驾驶端到端技术的…...

编程日记 2025/3/2 14:48:06

games101 作业5

题目 光线追踪的核心算法: 1.光线的生成 2.光线与三角的相交 题解 1.光线的生成 如课件中的图所示&#xff1a; image plane 就是 代码中的scene的FrameBuffer。 但是&#xff0c;FrameBuffer 是窗口坐标系中&#xff0c;而光线是世界坐标系中的。所以我们需要将scene中的屏…...

编程日记 2025/3/2 14:44:00

【高并发秒杀系统设计：从Guava到Redis的6级缓存架构演进】

一、瞬时十万QPS场景分析 1.1 典型秒杀场景特征 public class SpikeScenario {// 特征1&#xff1a;瞬时流量突增private static final int QPS 100000; // 正常流量100倍// 特征2&#xff1a;资源竞争激烈private int stock 1000; // 100万人抢1000件商品// 特征3&#…...

编程日记 2025/3/2 14:42:59

2-程序语言基础知识

本节内容不是很多，在考试中一般是2-3分，多看教材，考试中大概都是原话 本节主要考点 1、编译程序和解释程序 2、程序语言的数据成分和控制成分（多看教材） 3、编译程序的过程（多看教材） 4、中缀、前缀与后缀表达式（增加） 教材P42-52，54-58多看一下 1、程序语言概述 机器…...

编程日记 2025/3/2 14:41:58

【AIGC系列】4：Stable Diffusion应用实践和代码分析

AIGC系列博文&#xff1a; 【AIGC系列】1&#xff1a;自编码器&#xff08;AutoEncoder, AE&#xff09; 【AIGC系列】2&#xff1a;DALLE 2模型介绍&#xff08;内含扩散模型介绍&#xff09; 【AIGC系列】3&#xff1a;Stable Diffusion模型原理介绍 【AIGC系列】4&#xff1…...

编程日记 2025/3/2 14:38:53

小米火龙CPU和其他几代温度太高的CPU是由谁代工的

小米火龙CPU”并非小米自研芯片&#xff0c;而是指搭载在小米手机上的部分高通骁龙处理器因发热问题被调侃为“火龙”。以下是几款被称为“火龙”的高通CPU及其代工情况&#xff1a; 骁龙810 骁龙810是高通历史上最著名的“火龙”之一&#xff0c;采用台积电20nm工艺代工。由于…...

编程日记 2025/3/2 14:36:49

DedeCMS文件包含漏洞深度剖析：为什么一个‘无害’的txt文件能让你getshell？

DedeCMS文件包含漏洞技术解析&#xff1a;从文本文件到系统沦陷的连锁反应 在内容管理系统&#xff08;CMS&#xff09;的安全领域&#xff0c;最危险的漏洞往往藏匿于最平凡的功能之中。DedeCMS作为国内广泛使用的开源CMS&#xff0c;其文件包含漏洞&#xff08;CVE-2023-2928…...

编程新知 2026/4/6 7:46:23

别再只会‘永不在此停止’了！实战绕过网站JS混淆与内存爆破的三种硬核方法

实战突破&#xff1a;三种硬核方法破解JS混淆与内存爆破 打开开发者工具的那一刻&#xff0c;页面突然卡死&#xff0c;控制台不断弹出debugger断点——这可能是每个爬虫工程师都经历过的噩梦。当简单的"永不在此停止"失效时&#xff0c;我们需要更高级的技术手段来应…...

编程新知 2026/4/6 7:05:55

AI模型推理服务化：基于StructBERT构建高并发微服务架构

AI模型推理服务化&#xff1a;基于StructBERT构建高并发微服务架构 最近几年&#xff0c;AI模型从实验室走向生产环境的速度越来越快。很多团队都遇到过这样的场景&#xff1a;好不容易训练出一个效果不错的模型&#xff0c;比如一个文本分类或情感分析的模型&#xff0c;但当…...

编程新知 2026/4/6 5:44:21

基于DSP28335的三电平PCS系统代码功能说明

一、系统概述 本文档所分析的代码基于TI DSP28335处理器&#xff0c;实现了三电平储能变流器&#xff08;PCS&#xff09;的完整控制逻辑。该系统支持并网/离网双模式运行&#xff0c;具备多目标控制策略&#xff08;有功、无功、谐波治理、不平衡补偿等&#xff09;、完善的故…...

编程新知 2026/4/6 5:44:21

保温vs隔热

保温vs隔热 什么是保温，什么是隔热？保的什么温，隔的什么热？ 1 保温vs隔热 保温vs隔热是门窗幕墙行业耳熟能详的两个词：比如门窗保温性能，隔热铝合金窗等等。那么什么是保温，什么是隔热呢？ GB/T 8478-2020《铝合金门窗》中给出了门窗保温性能和隔热性能的定义。 门…...

编程新知 2026/4/6 5:38:21

Youtu-VL-4B-Instruct保姆级部署教程：5分钟搞定看图说话AI，小白也能快速上手

Youtu-VL-4B-Instruct保姆级部署教程&#xff1a;5分钟搞定看图说话AI&#xff0c;小白也能快速上手 1. 为什么选择Youtu-VL-4B-Instruct&#xff1f; Youtu-VL-4B-Instruct是一个能同时理解图片和文字的AI模型&#xff0c;它基于腾讯优图实验室开发的40亿参数视觉语言模型。…...

编程新知 2026/4/6 5:22:16

C++ 智能指针的生命周期分析

C智能指针的生命周期分析 在现代C开发中&#xff0c;智能指针是管理动态内存的重要工具&#xff0c;它通过自动化的资源管理机制显著降低了内存泄漏和悬垂指针的风险。理解智能指针的生命周期对于编写高效、安全的代码至关重要。本文将深入分析智能指针的生命周期&#xff0c;…...

编程新知 2026/4/6 5:06:07

OpenClaw+千问3.5-9B资料整理术：自动归类学术PDF与笔记

OpenClaw千问3.5-9B资料整理术&#xff1a;自动归类学术PDF与笔记 1. 为什么需要自动化资料整理 作为一名长期与学术文献打交道的科研工作者&#xff0c;我电脑里的PDF文件数量已经突破四位数。每次下载新论文时&#xff0c;手动重命名文件、记录关键信息、整理到对应文件夹的…...

编程新知 2026/4/6 4:43:27

任务追踪智能体(二)

个人任务简介 负责项目核心业务功能开发&#xff0c;包括 AI 智能评分、文件预览、数据导出等关键功能。这些功能是整个项目的价值核心&#xff0c;直接面向用户使用场景&#xff0c;实现对项目申报书的自动化AI评分。将申报文件转换为前端可预览的格式&#xff0c;支持 PDF 原…...

编程新知 2026/4/6 4:10:30

3.30~4.5补题

牛客周赛Round 137 A.小苯的时钟显示牛客周赛Round 137 B.小苯的输入法牛客周赛Round 137 C.小苯的观景路线牛客周赛Round 137 D.小苯的序列涂色牛客周赛Round 137 E.小苯的凝聚区间SMU 2026 Spring 天梯赛6&#xff08;补题&#xff09;7-1 1-1 输出金字塔图案SMU 2…...

编程新知 2026/4/6 4:10:14