2023-03-22【总结：常见性能优化（三）】对于vue项目你有哪些常见的优化的方案?—— 在基础的Web技术层面对Vue项目进行优化

三.基础Web基础优化

1.使用gzip压缩网页大小

什么是gzip?

gzip是GNUzip的缩写,用于UNIX系统文件的压缩,
在http协议上的gzip编码是一种用来改进web应用程序性能的技术
web服务器(比如阿帕奇,nginx)和客户端(即浏览器如谷歌,火狐,IE)都支持gzip
gzip的压缩效率很高,可以达到70%的压缩率

在express中开启gzip压缩

• step1:安装npm, install compression ---save
• step2:添加代码逻辑

var compression = require('compression');
var app = express();
app.use(compression())

• step3:重启服务:看看网络面板中的response.header是否开启成功

2.使用浏览器缓存来提高页面加载速度

对静态资源进行缓存可以提高页面加载速度,
根据是否需要向服务器发起请求来分类,将http缓存规则分为两大类:强制缓存和对比缓存

3.使用CDN从服务器中获取数据

浏览器从通过与服务器连接,然后下载CSS,JS和图片等文件,
由于服务器带宽有限,若超过限制可能会使网页无响应,
而CDN可以通过不同域名来加载文件,增加下载文件的并发连接数
同时,CDN具有更好的可用性,梗死的网络延迟和丢包率了

4.使用谷歌浏览器的Performance面板来查找性能瓶颈

Chrome 的 Performance 面板能录制JS的执行细节和事件,
Chrome 的 开发者工具如何分析页面性能?

• 开发者工具>Performance面板
• 点击Record录制
• 刷新页面/展开指点
• 点击Stop停止录制

5.参考博文

https://blog.csdn.net/qq_37939251/article/details/100031285