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

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

news 2025/11/16 14:08:37

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

一、资源加载优化

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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/9/22 20:29:32

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/11/7 14:07:42

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/11/12 18:25:33

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/11/12 20:42:24

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/8/4 22:42:24

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/9/12 22:46:10

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/7/17 22:23:49

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

编程新知 2025/11/13 18:54:09

flow_controllers

关键点&#xff1a; 流控制器类型&#xff1a; 同步&#xff08;Sync&#xff09;&#xff1a;发布操作会阻塞&#xff0c;直到数据被确认发送。异步&#xff08;Async&#xff09;&#xff1a;发布操作非阻塞&#xff0c;数据发送由后台线程处理。纯同步&#xff08;PureSync…...

编程新知 2025/10/30 7:26:25