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

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

news 2025/8/8 18:44:27

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

一、资源加载优化

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/8/7 14:34:19

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/8/7 3:58:12

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/8/8 17:05:23

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/8/8 16:47:17

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2025/8/7 4:24:45

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/7/31 1:40:46

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

编程新知 2025/7/7 16:04:22

前端高频面试题2：浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

编程新知 2025/7/16 2:01:36

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

编程新知 2025/7/5 22:22:08

写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里

写一个shell脚本&#xff0c;把局域网内&#xff0c;把能ping通的IP和不能ping通的IP分类&#xff0c;并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...

编程新知 2025/7/20 12:18:38