Vue重点知识总结—性能篇

1.vue性能优化

1.编码优化（代码层面）

不要将所有数据都放到data中，因为data中数据会遍历添加getter和setter，会收集对应的watcher
若在方法或计算属性中不对组件数据进行修改，最好在刚开始时就将数据赋值给变量，之后使用直接使用变量效率较高（let {user,list} = this）。
在v-for时需要给每项元素绑定事件时用外层事件代理
v-for遍历时避免同时使用v-if，使用计算属性提前把数组中要显示的进行过滤，然后v-for直接使用过滤后的数组
SPA页面采用keep-alive缓存组件，可以添加include和exclude来配置需要缓存的组件。
尽量细地拆分组件，提高复用性、可维护性，减少不必要的渲染
v-if 和 v-show 区分使⽤场景：v-if为false时内部指令不会执行，有阻断功能，不频繁的显隐功能或简单的组件尽量用v-if代替v-show
较复杂的组件渲染比较吃力，显隐功能可以使用v-show进行缓存组件
computed 和 watch 区分使⽤场景：computed 的值有缓存，只有它依赖的属性值发⽣改变，下⼀次获取computed 的值时才会重新计算。watch每当监听的数据变化时都会执⾏回调进⾏后续操作；当我们需要在数据变化时执⾏异步或开销较⼤的操作时，应该使⽤watch。当一个属性受多个属性影响的时候需要computed，当一个属性影响多个属性的时候用watch。
v-for 遍历必须为 item 添加 key，key保证唯一性（vue的dom更新采用就地复用策略）
Object.freeze冻结数据，这些数据只是单纯展示，避免不必要的响应式（this.userInfo = Object.freeze(userInfo)）
使用v-once指令，处理只需要渲染一次的节点或组件（低开销的静态组件）。
无状态（没有自己的数据，只是展示父组件的传值）的组件标记为函数式组件（<template functional></template>）。
合理使用路由懒加载、异步组件（缩减初始包体积，路由会按需加载）
数据持久化（做缓存）
防抖、节流
组件在销毁时注意销毁事件监听和定时器，防止内存泄漏。（vue组件在销毁时会自动销毁组件本身和组件节点上的的事件和指令）
通过对css样式的合并和js逻辑的封装：如在两不同组件中，拥有相同的样式，可通过全局css文件中设置。在js文件上，将相同的方法封装合并成一个方法，如API请求。

2.页面加载性能优化

第三方模块按需导入，比如使用elementUI时，不需要的组件无需引入，避免体积过大。（使用babel-plugin-component插件）
滚动到可视区动态加载。比如长列表使用虚拟滚动，滚动到一定位置时加载下一页。
图片懒加载，动态加载图片。比如vue-lazyload插件，通过v-lazy指令来取代img的src属性。

3.用户体验

骨架屏（app-skeleton）首屏加载Loading
app壳（app-shell）默认先渲染一个导航，或者静态视图

4.SEO优化

预渲染插件（prerender-spa-plugin）
服务端渲染SSR

5.打包优化

使用CDN加载第三方资源，就可以缓解我们服务器的压⼒。什么是CDN
多线程打包（happypack）
Webpack 、Vite 编译时对图⽚进⾏压缩
Webpack可使用相关插件如useless-files-webpack-plugin检查及删除无用文件

6.首屏加载优化

减少入口文件体积，压缩文件
合理使用路由组件按需加载、懒加载、异步组件。缩减初始包体积，在调用某个组件时再加载对应的js文件；
静态资源本地缓存，后端返回的资源：采用http缓存，前端合理利用localStorage，CDN静态资源缓存
UI框架、自定义组件按需加载
图片压缩，开启gzip压缩（webpack中配置）
骨架屏、首屏加载Loading
图标可通过font-icon或矢量图（如SVG）来代替，也可将小图片转为Base64格式进行展示。
通过精灵图来减少小图标的总请求数
图片懒加载，对未可见的图片进行延迟加载。比如通过安装vue-lazyload模块实现懒加载。图片懒加载实现
将公用的JS库通过script标签外部CDN引入，减小打包的js大小，让浏览器并行下载资源文件，提高下载速度；
加一个首屏 loading 图，提升用户体验；

7.计算首屏加载时间

首屏加载时间，指的是浏览器从相应用户输入网址，到首屏内容渲染完成的时间。可以使用window.performance提供的API进行计算。可以在window.onload事件中读取performance提供的各种数据。

计算首屏加载时间公式：times = (performance.timing.domComplete - performance.timing.navigationStart) / 1000

若首屏的DOM会持续变化的话，可以使用 MutationObserver 方法监听DOM变动，根据变动的时间计算DOM趋于稳定的时间节点。

8. 服务器访问速度优化

开启服务器 Gzip 压缩，需要前端提供压缩包，然后在服务器开启压缩，⽂件在服务器压缩后传给浏览器，浏览器解压后进⾏再进⾏解析。（通过webpack或Vite对项目体积进行压缩）
全站 CDN 加速，使用一些第三方 CDN 云加速服务。什么是CDN

2.浏览器性能检测（F12控制台）

Performance（性能）

Performance 是 Chrome 开发者工具中的一个功能，用于记录网页从初始化到运行时的所有性能指标。

使用 Performance 前，我们最好打开 Chrome 的无痕模式。因为 Chrome 上一般有着大量的插件，会或多或少的影响页面的性能，所以我们关掉这个来避免对页面性能的影响。

点击左上角的 Record（小圆点）按钮，Performance 进入 Record 阶段，从此刻开始，它会记录用户的交互以及这些交互对页面性能数据的影响。

生成的 Performance 性能报告，我们先看顶部的三个数据：FPS、CPU 以及 NET。

FPS：主要和动画性能有关，代表每秒帧数。图表中的绿色长条越高，说明FPS越高，用户体验越好。如果其中有红色长条，代表着这部分帧数有卡顿，需要优化
CPU：和底部的 Summary 对应，显示了页面加载过程中，各阶段对 CPU 的占用时间，占用时间越多，代表该阶段越需要优化。在 Performance 中，该部分是最需要关注的指标之一。
NET：每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）深色部分表示传输时间（下载第一个和最后一个字节之间的时间）
Main：火焰图。它展现了主线程在 Record 过程中做的所有事情，包括：Loading、Scripting、Rendering、Painting 等等。火焰图的横轴代表着时间，纵轴代表着调用堆栈。每一个长条代表执行了一个事件或函数，长条的长度代表着耗时的长短，如果某个长条右上角是红色的则表示该函数存在性能问题，需要重点关注。
DOMContentLoaded ：就是 dom 内容加载完毕。那什么是 dom 内容加载完毕呢？打开一个网页当输入一个 URL，页面的展示首先是空白的，然后过一会，页面会展示出内容，但是页面的有些资源比如说图片资源还无法看到，此时页面是可以正常的交互，过一段时间后，图片才完成显示在页面。从页面空白到展示出页面内容，会触发 DOMContentLoaded 事件。而这段时间就是 HTML 文档被加载和解析完成。
load：页面上所有的资源（图片，音频，视频等）被加载以后才会触发 load 事件，简单来说，页面的 load 事件会在 DOMContentLoaded 被触发之后才触发。