vue 项目中的前端性能优化

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

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

vue 项目中的前端性能优化_第1张图片

         简单来说,就是用户在输入 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 自身来优化就可以了。

你可能感兴趣的:(前端,javascript,vue)