前端 性能优化 方法的分类与具体实现大白话解释 ： 咱们的网页代码里，就像一个房间堆满了东西，有很多没用的“杂物”，比如代码里的空格、注释啥的。压缩文件就是把这些“杂物”清理掉，让文件变得更“瘦”，下载起来就快多啦。合并文件呢，就好比把好几个小包裹合成一个大包裹，这样浏览器下载的时候就不用一次又一次地去请求，节省时间。 具体实现（使用 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` 就可以压缩合并代码了。
大白话解释 ： 图片就像一个个大胖子，特别占地方，下载起来可费劲了。选对图片格式，就像给胖子减肥，选个合适的方法让它变瘦。压缩图片呢，就是把胖子身上多余的“肥肉”去掉，让它更轻巧。 具体实现（使用 TinyPNG 在线压缩图片） ： 打开 TinyPNG 官网。 点击上传图片按钮，选择你要压缩的图片。 TinyPNG 会自动帮你压缩图片，压缩完成后下载压缩后的图片，替换原来的图片就行。 大白话解释 ： 有些东西不是一开始就需要的，就像你去超市买东西，有些东西等你要用的时候再去拿，没必要一开始就把所有东西都买回家。按需加载就是等用户需要用到某个功能或者资源的时候，再去加载它，这样能加快页面的初始加载速度。 具体实现（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}
] ;
大白话解释 ： 防抖就像坐电梯，你一直按开门按钮，电梯不会每次都开门，而是等你停了一会儿，确定你不按了，才会开门。节流呢，就像水龙头，不管你怎么拧，在一段时间内，水的流量是固定的，不会一直变大。 具体实现（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 ) ) ;
大白话解释 ： 重排就像你重新布置房间里的家具，得把家具挪来挪去，很费时间。重绘就像给家具重新刷漆，也得花点时间。减少重排和重绘就是尽量少折腾房间里的家具，让页面加载和渲染更快。 具体实现（批量修改样式减少重排） ：<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF - 8" > </ head> < body> < divid = " myDiv" > </ div> < script> const div = document. getElementById ( 'myDiv' ) ; const style = div. style; style. width = '200px' ; style. height = '200px' ; style. backgroundColor = 'red' ; </ script> </ body> </ html> 大白话解释 ： 浏览器缓存就像你的小仓库，把一些常用的东西放进去。下次要用的时候，直接从仓库里拿，不用再去外面买，这样就节省时间啦。 具体实现（设置 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} ` ) ;
} ) ;
大白话解释 ： 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>。 大白话解释 ： 服务器就像你的厨师，好的厨师做菜又快又好吃。选性能好、稳定的服务器，网页响应速度就快，用户体验就好。 具体实现 ： 如果你是个人小网站，可以选择阿里云轻量应用服务器，配置简单，价格实惠。如果是大型网站，就选择性能更高的云服务器 ECS，根据网站的访问量和需求选择合适的配置。 大白话解释 ： 服务器配置就像厨师的厨房工具，工具好用，做菜效率就高。优化服务器配置能让服务器处理请求更快，就像给厨师换上更锋利的刀和更顺手的锅。 具体实现（Nginx 调整并发连接数） ： 打开 Nginx 配置文件（一般在 /etc/nginx/nginx.conf）。 找到 worker_connections 配置项，把它的值调大，比如： worker_processes 1;events {worker_connections 1024; // 可根据服务器性能调整
}
sudo systemctl restart nginx
