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

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

news 2025/9/26 7:33:10

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

一、资源加载优化

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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/8/5 22:19:11

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/9/25 21:39:43

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/6/15 21:47:30

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/9/26 6:27:47

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/9/24 20:08:43

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/9/24 6:15:38

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/9/22 15:01:39

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

编程新知 2025/9/22 16:24:18

Matlab实现任意伪彩色图像可视化显示

Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中&#xff0c;如何展示好看的实验结果图像非常重要&#xff01;&#xff01;&#xff01; 1、灰度原始图像 灰度图像每个像素点只有一个数值&#xff0c;代表该点的​​亮度&#xff08;或…...

编程新知 2025/9/24 3:55:00