vue中的性能优化
文章目录
- 一、Vue为什么要做性能优化
- 二、如何做vue的性能优化
-
- 1. 网络请求优化
-
-
- link标签
- 项目静态资源压缩
- 懒加载
- 利用浏览器的缓存机制高效复用项目文件
- 总结
-
- 2. 代码优化
- 3. 用户体验优化
-
-
- 场景1
- 场景2
-
一、Vue为什么要做性能优化
性能优化的目的是使网站的加载速度更快，用户等待网站加载的时间越短，他们就越可能对网站产生好感，并越可能继续在网站上浏览。此外，在移动设备上，性能优化可以帮助网站在较慢的网络条件下仍然能够流畅运行。性能优化也可以降低服务器的负载，从而降低运营成本。总之，前端性能优化是为了提高网站的速度和用户体验，并降低运营成本。
所以如果你是前端从业者，那么无论是求职的简历，还是晋升的 PPT，性能优化相关的内容都是不可或缺的。
二、如何做vue的性能优化
其实要做性能优化，需要了解很多基础知识，比如从用户输入URL到页面显示的整个过程，我们要知道在这个过程中每一步都发生了什么，之后才能针对每一步去做优化处理，这里就不多作说明。
1. 网络请求优化
link标签
可以优化的第一个点，就是在首页的标签中，通过使用标签去通知浏览器对页面中出现的其他域名做DNS的预解析。
例如页面中的图片通常都是放在独立的CDN中，这样页面加载首页的时候浏览器引擎就可以对域名进行预解析并把结果缓存起来，这样在后续的过程中若在出现相同域名的请求，浏览器就可以从缓存中直接获取对应的IP地址发起请求。
项目静态资源压缩
浏览器在获取网络文件时，需要通过 HTTP 请求，HTTP 协议底层的 TCP 协议每次创建链接的时候，都需要三次握手，而三次握手会造成额外的网络损耗。如果浏览器需要获取的文件较多，那就会因为三次握手次数过多，而带来过多网络损耗的问题。
解决办法首先可以考虑让文件尽可能地变少或者变小，比如先给文件打包压缩代码之后再上线；图片使用精灵兔、压缩打包图片等；
懒加载
懒加载一般有图片懒加载、路由懒加载。
图片懒加载的意思是，我们可以动态计算图片的位置，只需要正常加载首屏出现的图片，其他暂时没出现的图片只显示一个占位符，等到页面滚动到对应图片位置的时候，再去加载完整图片。
路由懒加载，把不常用的路由单独打包，在用户访问到这个路由的时候再去加载代码。
利用浏览器的缓存机制高效复用项目文件
我们需要做的，就是尽可能高效地利用浏览器的缓存机制，在文件内容没有发生变化的时候，做到一次加载多次使用，项目中如果成功复用一个几百 KB 的文件，对于性能优化来说是一个巨大的提升。
浏览器会缓存页面中的静态资源（如图片、视频、音频、CSS 文件、JavaScript 文件等），从而减少对服务器的访问压力，提高页面的加载速度。我们可以通过设置响应头中的 Cache-Control 和 Expires 字段来控制浏览器的缓存行为。
Vue.js 是一个构建用户界面的框架，它本身并不提供对 Expires、Cache-control、Last-modify、ETag 等 HTTP 头的支持。但可以使用 Vue.js 的网络请求库（如 axios）来发送 HTTP 请求，并设置这些 HTTP 头以实现缓存。
总结
-
使用浏览器缓存：浏览器会缓存页面中的静态资源（如图片、视频、音频、CSS 文件、JavaScript 文件等），从而减少对服务器的访问压力，提高页面的加载速度。前端开发者可以通过设置响应头中的 Cache-Control 和 Expires 字段来控制浏览器的缓存行为。
-
使用 CDN：CDN 是内容分发网络的缩写，是一种分布式的网络架构，用于将网站的静态资源分发到多个地方，从而提高网站的加载速度和可用性。前端开发者可以通过使用 CDN 来加速页面中的静态资源加载，从而提高页面的性能。
-
使用 HTTP/2：HTTP/2 是 HTTP 协议的最新版本，它提供了多路复用、流控制和头压缩等新特性，可以提高页面的加载速度。前端开发者可以通过使用 HTTP/2 来提高页面的性能。
-
使用缓存框架：缓存框架是一种用于缓存数据的软件，可以提高应用的性能。前端开发者可以使用缓存框架来缓存应用中的数据，从而减少对数据库的访问压力，提高应用的性能。例如，前端开发者可以使用 Redis、Memcached 等缓存框架来缓存数据，并通过设置缓存时间来控制缓存的生命周期。
- 使用组件缓存：组件缓存是指在应用中缓存组件的状态，以便在页面切换时重用已渲染的组件，而不需要重新渲染。前端开发者可以通过框架（如 Vue）提供的组件缓存机制来实现组件缓存，从而提高应用的性能。
2. 代码优化
在Vue3里我们不需要考虑太多，他已经做的很好了，我们只需要遵循Vue的最佳使用方法，其余的交给Vue自身就可以了。
比如 computed 内置有缓存机制，比使用 watch 函数好一些；组件里也优先使用 template 去激活 Vue 内置的静态标记，也就是能够对代码执行效率进行优化；v-for 循环渲染一定要有 key，从而能够在虚拟 DOM 计算 Diff 的时候更高效复用标签等等。
然后是JS代码优化，这里指的就是实际的算法逻辑了，根据具体的问题进行分析，找到代码的瓶颈之后对耗时过长的逻辑进行优化即可。
3. 用户体验优化
性能优化的主要目的，还是为了能让用户在浏览网页的时候感觉更舒服，所有有些场景我们不能只考虑单纯的性能指标，还要结合用户的交互体验进行设计，必要的时候，我们可以损失一些性能去换取交互体验的提升。
场景1
用户加载大量图片的同时，如果本身图片清晰度较高，那直接加载的话，页面会有很多图一直是白框。
我们也可以预先解析出图片的一个模糊版本，加载图片的时候，先加载这个模糊的图作为占位符，然后再去加载清晰的版本。虽然额外加载了图片文件，但是用户在体验上得到了提升。
场景2
用户上传文件的时候，如果文件过大，那么上传可能就会很耗时。而且一旦上传的过程中发生了网络中断，那上传就前功尽弃了。
我们可以选择断点续传，也就是把文件切分成小块后，挨个上传。这样即使中间上传中断，但下次再上传时，只上传缺失的那些部分就可以了。可以看到，断点上传虽然在性能上，会造成网络请求变多的问题，但也极大地提高了用户上传的体验。
还有很多组件库也会提供骨架图的组件，能够在页面还没有解析完成之前，先渲染一个页面的骨架和 loading 的状态，这样用户在页面加载的等待期就不至于一直白屏。
总的来说，我们需要根据实际场景来判断是否需要舍弃部分的性能来提示用户体验。