前端性能优化

和科比合砍81分

已于 2024-02-22 09:25:09 修改

阅读量2.6k

点赞数 42

文章标签：前端性能优化

于 2024-01-14 19:32:41 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43502666/article/details/135575305

版权

本文详细探讨了前端性能优化的多个方面，包括Webpack打包技巧（如体积控制、TreeShaking、CDN使用），网络优化（减少请求次数、懒加载、缓存利用），DOM操作优化（DOM操作减少、事件委托），以及项目实践中的常见问题解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在谈性能优化前我们需要知道当前项目遇到了什么性能问题,然后研究针对当前性能问题,我们怎么去优化,优化完毕之后是否有直观的用户体验;

(1)如下面打开的network,可以直观看到每个文件加载的时长以及大小

在这里插入图片描述

(2)当刷新页面的时候,我们可以看到部分文件以及走了强制缓存(memory cache和disk cache),这也是优化策略之一:

在这里插入图片描述

Performance性能监控 Performance详解:可把performance理解为对性能评估领域的一个接口，可以通过performance拿到很多性能上的参数，通过performance去定位哪里有问题，哪里有问题改哪里。

前端性能优化可以从以下几个方面来看:

一、打包体积方面—设置到webpack的优化:—体积小可以减少网络传输时间

vite:https://www.duidaima.com/Group/Topic/Vue/12079
https://blog.youkuaiyun.com/qq_36017964/article/details/97934911

工具:vuecli中配置webpack-bundle-analyzer插件,此插件在执行打包命令成功后通过图形化界面展示各个模块的大小)

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //引入
config.plugins.push(new BundleAnalyzerPlugin());  //配置

(1)、CDN加速:通过打包后的图形化界面,我们可以看到第三方库的占用体积,使用CDN具体做法如下:

一般情况下我们将第三方的一个库和项目中的静态资源放在CDN上(如图片)

第一:在webpack设置中添加externals，忽略不需要打包的库。

在这里插入图片描述 :#### 第二:在index.html中使用cdn引入。

(2) 配置拆包:

好处1:可以提高webpack构建速率,减少打包体积

好处2:可以将第三方的chunk更好的利用缓存

在这里插入图片描述

(3) 生产环境打包去除console.log,注释,debugger

在这里插入图片描述

(4) 关闭source map：默认情况下会生成source map文件，该文件记录了编译后的代码与原始代码之间的映射关系。关闭source map可以减小打包体积。

(5)、webpack的TreeShaking,不打包未用到的文件(webpack打包构建时从入口文件开始找依赖关系,将所有应用到的文件构成一个依赖图,不打包没有依赖关系的文件)

(6) 按需加载组件：对于只有部分页面或功能才会被使用到的组件，可以使用动态导入来进行按需加载，从而减小初始化时的bundle大小

在这里插入图片描述

const MyComponent = () => import('./MyComponent.vue'); // 根据路由配置自动按需加载

(7)、图片压缩—配置image-webpack-loader插件----对于图片优化,小图可以使用base64,多个图片可以使用雪碧图(多个图标整合到一张图片中)

   (后管未配,app配了可参考)

在这里插入图片描述

(8)、Gzip压缩—vue.config.js配置(可以减少前端打包的体积)

注意:前端webpack配置Gzip压缩和服务端启用Gzip压缩是针对不同环节的压缩处理

前端webpack配置插件进行Gzip压缩是:打包构建时，对生成的静态资源文件（如JavaScript、CSS、HTML等）进行Gzip压缩，生成对应的.gz文件

服务端启用Gzip压缩:是在接收到客户端的HTTP请求后，对服务器端的资源（如HTML、CSS、JavaScript、图片等）进行压缩，然后再将压缩后的内容发送给客户端。

总体来说，前端webpack配置Gzip压缩是针对静态资源文件的压缩处理，而服务端启用Gzip压缩是针对服务器端资源的压缩处理，两者结合可以更有效地减少网络传输数据的大小，提高页面加载速度。

前端webpack配置Gzip压缩如下:

在这里插入图片描述

(9)、抽离 css 支持按需加载

在这里插入图片描述

(10)、配置prefetch 和 preload插件—如果不删除的话，则会在 index.html 里面加载无用的 js 文件,如下图:多加载了6个文件;所以删除以上两个插件可以减少不必要的网络请求,因为此两个插件会在页面空闲时间预加载

在这里插入图片描述

配置删除如下:

 //删除prefetch和preload插件,减少不必要的网络请求,因为此两个插件会在页面空闲时间预加载
    config.plugins.delete('prefetch').delete('preload');

二、从HTTP和网络层面优化—核心需要减少网络延迟,提高页面加载效率

1、减少请求次数:合并和减少静态资源的数量，从而减少页面加载时的HTTP请求次数，从而提高页面加载速度(精灵图、BFF架构模式在BFF层对接口进行聚合、合理利用本地缓存–将一些频繁请求且内容不变化的数据使用本地缓存);

2、懒加载:可以减少无用资源的的加载; 以图片懒加载为例, 先设置img标签的src为本地图片,当图片进入视口是在发送请求请求图片资源;

3、防抖与节流—减少频繁点击按钮发送多次请求接口

4、使用浏览器缓存(强缓存和协商缓存)：响应数据中设置缓响应头，如Expires、Cache-Control等，可以减少不必要的网络请求，提高页面加载速度。

5、tab切换cancel取消前一个请求

6、使用Gzip压缩：在服务器端启用Gzip压缩，可以减小传输数据的大小，减少网络传输时间。

7、关闭preload和prefetch插件预加载,此两个插件会在页面空闲时进行预加载

8、使用HTTP/2：HTTP/2协议支持多路复用，头部压缩和服务器推送等特性，可以减少网络延迟和提高页面加载速度。

9、使用预加载：对于一些即将要使用的资源，可以使用预加载标签进行预加载，从而提前获取资源，减少加载时间。

10、使用服务端渲染（SSR）：对于一些需要频繁更新的页面，可以使用服务端渲染来减少前端渲染的时间，提高页面加载速度。

11、延迟加载：对于一些非关键资源，可以延迟加载，等页面主要内容加载完成后再加载这些资源，从而提高页面初始加载速度。

三、DOM层面:

1、核心是要减少DOM操作,减少页面的回流和重绘

(1)V3中已经优化的够彻底了,例如更先进的diff算发,异步更新队列等
(2)浏览器针对页面的回流与重绘，进行了自身的优化——渲染队列, 浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。