vue 项目中的前端性能优化

        性能优化主要的两个方面是：网络请求优化和代码效率优化。不过性能优化之外，用户体验才能性能优化的目的。

首先了解用户从输入url到页面显示的过程

         简单来说，就是用户在输入 URL 并且敲击回车之后，浏览器会去查询当前域名对应的 IP 地址。对于 IP 地址来说，它就相当于域名后面的服务器在互联网世界的门牌号。然后，浏览器会向服务器发起一个网络请求，服务器会把浏览器请求的 HTML 代码返回给浏览器。

        之后，浏览器会解析这段 HTML 代码，并且加载 HTML 代码中需要加载的 css 和 js，然后开始执行 JavaScript 代码。进入到项目的代码逻辑中，可以看到 Vue 中通过 vue-router 计算出当前路由匹配的组件，并且把这些组件显示到页面中，这样我们的页面就完全显示出来了。而我们性能优化的主要目的，就是让页面显示过程的时间再缩短一些。

一、网络请求优化

1. 先给文件打包之后再上线，使用css雪碧图打包图片等等（浏览器在获取网络文件时，需要通过 HTTP 请求，HTTP 协议底层的 TCP 协议每次创建链接的时候，都需要三次握手，而三次握手会造成额外的网络损耗。如果浏览器需要获取的文件较多，那就会因为三次握手次数过多，而带来过多网络损耗的问题）
2. 上线之前压缩css、js，在图片选择格式上选择jpg，对于精度要求高的选择png，同等像素的情况下，选择体积比较小的图片（减少文件体积，体积越小，文件到加载速度也就越快）
3. 图片懒加载（动态计算图片的位置，只需要正常加载首屏出现的图片，其他暂时没出现的图片只显示一个占位符，等到页面滚动到对应图片位置的时候，再去加载完整图片）
4. 路由懒加载，只有用户访问到这个路由的时候再去加载对应的代码

   
     {
       path: '/course/:id',
       component: () => import('../pages/courseInfo'),
     },

   5. 使用浏览器缓存机制对静态资源进行缓存（Expires、Cache-control，last-modify、etag）

二、代码效率优化

        在浏览器加载网络请求结束后，页面开始执行 JavaScript，因为 Vue 已经对项目做了很多内部的优化，所以在代码层面，我们需要做的优化并不多。很多 Vue 2 中的性能优化策略，在 Vue 3 时代已经不需要了，我们需要做的就是遵循 Vue 官方的最佳实践，其余的交给 Vue 自身来优化就可以了。