Vue的性能优化

定位应用的性能问题

Vue应用的性能问题可以分为两个部分：运行时性能问题，加载性能问题。
和其他 web应用一样，定位 Vue应用性能问题最好的工具是 Chrome Devtool(F12 谷歌开发者工具)，通过 Performance 工具可以用来录制一段时间的 CPU 占用、内存占用、FPS 等运行时性能问题，通过 Network 工具可以用来分析加载性能问题。

Chrome Performance 常见的名词指标

Performance.png

FP：First Paint 首次绘制，第一帧数据渲染出来时
标记浏览器渲染任何在视觉上不同于导航前的屏幕内容的时间点
FCP：First Contentful Paint 首次内容绘制
标记浏览器渲染来自DOM第一位内容的时间点，该内容可能是文本、图像、SVG，元素
LCP：Largest Contentful Paint 最大内容渲染，2019.11新增
代表在viewport中最大的页面元素加载的事件。LCP的数据会通过PerformanceEntry对象记录，每次出现更大的内容渲染则会产生一个新的PerformanceEntry对象
DCL：DomContentLoaded
当HTML文档被完全加载和解析完成之后，DomContentLoaded事件被触发，无需等待样式表、图像和子框架的完成加载。
FMP：First Meaningful Paint 首次有效绘制
主内容的绘制，视频网站的主角元素自然是视频，微博网站的博文是主要元素
L：onLoad
当依赖的资源全部加载完成后才会触发
TTI:Time to Interactive 可交互时间
用于标记程序已进行视觉渲染并能可靠响应用户输入的时间点
TBT：Total Blocking Time 页面阻塞总时长
汇总所有加载过程中阻塞用户操作的时长，在FCP和TTI之间任何long task（执行时间超过一定阈值，如50ms）中阻塞部分都会被汇总
FID：First Input Delay 首次输入延迟
衡量从用户首次与网站交互到浏览器实际能够访问之间的时间
SI：Speed Index
用于显示页面可见部分的显示速度（时间）

我们通常要关心指标：FP、FCP、FMP

首页白屏优化

对于打包后的SPA程序，index.html是一个空的，所以首次渲染的页面也是空的（FP），也就是白屏状态；
等待JS加载完成，异步请求数据，在未来的某一帧才开始渲染出大体内容架构（FCP），但仍缺少一些图片等资源，且无法交互；
从而可知，为了减少白屏时间，可以把 FCP 阶段提前：

骨架屏策略：在上线之前，通过JS或框架在index.html中插入大体的页面结构；
预渲染：静态渲染，对于不变的内容在本地预渲染，而变化的内容预留占位。

资源优化

prefetch

prefetch 预获取，分为三种类型：link prefetch、dns prefetch、prerender

link prefetch
在浏览器空闲时加载一个资源（HTML、JS、CSS、Image、Font），是真正的资源下载；
```
    <link ref="prefetch" href="https://apis.google.com/js/api.js">  //谷歌
    <link ref="prefetch" href="/uploads/images/bg.png">
```
注意：虽然预获取了，但页面不会解析，JS不会被执行。
dns prefetch
前端优化与DNS相关的有两点：减少DNS的请求次数，DNS预解析
```
    
    <meta http-equiv="x-dns-prefetch-control" content="on">
    
    <link rel="dns-prefetch" href="https://orderapi.phone.com" />
```
提前解析当前页面中与当前域名不在同一个域的域名（第三方域名），并缓存结果，但不会下载任何资源，所以写入具体的JS、Image等资源没有意义。
当用户真正点击网页上的域名链接时，DNS早已在后台解析完成，所以能减少等待时间，提升用户体验。
prerender 预渲染
不仅会加载资源，还会解析并预渲染页面。但是否执行预渲染是根据浏览器自身判断的，浏览器可能会：
- 分配少量资源对页面进行预渲染；
- 挂起部分请求直至页面可见时；
- 可能放弃预渲染，如果消耗资源过多等等情况。。。
```
    <link rel="prerender" href="https://www.kcdn.com" />
```
很显然，它是一个相对非常“重”的操作（资源浪费严重），浏览器会提前加载所有资源，并把渲染结果缓存在内存中。
在SPA项目中基本没有应用场景，对于MPA项目，在确定用户一定会进入该页面的情况下，可以考虑使用prerender。

preconnect

preconnect 预连接

    <!-- 谷歌使用了预链接 -->
    <link ref="preconnect" href="https://www.gstatic.com">

浏览器要建立一个连接，需要经过DNS解析，TCP三次握手和TLS协商（https)，这些过程也相当的耗时。dns-prefetch只是做了DNS解析，而preconnect把这三步都做了，使浏览器预先建立一个连接，等真正需要加载资源时能直接请求。

preload

preload 预加载，它的作用是将资源率先加载，听起来容易和prefetch混淆：

prefetch 是预获取，是对用户接下来很可能会使用到的资源的预先下载；
preload 本质上是影响资源的加载顺序，把可能后置下载的资源前置下载。

preload的特点

具有优先级，但不会阻塞onload事件：preload在网页中具有强制加载的功能，所以它的加载具有优先级，不过它仅仅是加载资源，并不会执行，所以仍需要 script 加载资源;
它设计的目的是为当前页面的资源进行预加载，跳转页面后就使用不到了;
使用as字段来设定优先级，as=style 则为最高优先级。优先级顺序为：HTML/CSS>Images>JS

举个栗子
当资源没有直接体现在HTML中，而是隐藏在CSS或JS里，preload可以提前告知浏览器隐藏资源的存在，以便浏览器做出最优的安排。

# style.css
    @font-face {
        font-family: myFirstFont;
        src: url('https://fonts.gstatic.com/s/sofia/v8/8QIHdirahM3j_su5uI0Orbjl.woff2');
    }
    h1 {
        font-family: myFirstFont;
    }

未配置preload

<head>
    <link rel="stylesheet" href="style.css">
</head>

加载过程

no preload.png

对字体的下载发生在CSS下载之后，因为只有当浏览器下载完CSS并解析之后，才知道字体资源的存在；

配置上 preload

<link rel="preload" 
   href="https://fonts.gstatic.com/s/sofia/v8/8QIHdirahM3j_su5uI0Orbjl.woff2" 
   as="font" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

加载过程

with preload.png

同时下载字体和CSS，因为浏览器提前知道了隐藏资源的存在，做出了最优安排。与未配置preload相比，下载时间减少了。

小结

如果出现跨域无法加载，则加上 crossorigin 字段；
这些优化都是属于勤快优化类型，将数据的加载和数据的使用/解析分开，且都有完整的工程化打包方案，如webpack，很多大站都会使用这些优化方式。

优化无限列表性能

如果应用中存在非常长或者无限滚动的列表，那么采用 窗口化 的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建 DOM 节点的时间。
vue-virtual-scroll-list 和 vue-virtual-scroller 都是解决这类问题的开源项目。还可以参考 Google工程师的文章Complexities of an Infinite Scroller来尝试自己实现一个虚拟的滚动列表来优化性能，主要使用到的技术是 DOM 回收、墓碑元素 和 滚动锚定。

组件懒加载

上面提到的无限列表的场景，比较适合列表内元素非常相似的情况。不过有时候，你的Vue应用的超长列表中的内容往往不尽相同，例如在一个复杂应用的主界面中，由非常多不同的模块组成，而用户看到的往往只有首屏一两个模块。但在初始渲染时，不可见区域的模块也会执行和渲染，从而带来一些额外的性能开销。
使用组件懒加载在不可见时只需要渲染一个骨架屏，不需要真正渲染组件。

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载；

实现思路：
- 组件化
  将各模块拆分为组件粒度，降低耦合度；将组件依赖的资源（比如请求接口、请求相关的依赖资源）全部封装在组件内部进行调用；
- 加载优先级
  优先加载首屏可见模块，其余不可见模块懒加载，待可见或即将可见时加载；
判断可见性问题
通过监听scroll、resize事件来判断模块是否可见，代码不仅繁琐，而且一不小心没有函数去抖就又可能导致严重的性能问题。
H5新增的IntersectionObserver API是一个不错的解决方案，其设计是异步的，回调是在主线程空闲时才执行，而且保证回调执行次数非常有限，在性能方面表现更优，使用起来也更简单。
当然，低版本浏览器还是要通过 polyfill 兼容。
尽可能懒的条件渲染
解决了可见性问题，懒加载就比较简单了，Vue提供的 v-if 可以做到惰性渲染。
如果可见后进行初始渲染，可见前如何显示
如果在判断加载条件为 false 时，什么都不渲染，就会带来一系列问题：
- 用户体验比较差，最开始是白屏，然后突然又渲染出现内容；
- 最致命的是，判断可见性需要一个目标来观察，如果什么不都渲染，那就无从观察。
因此，引入一个骨架屏的概念，为真实的组件创建一个在尺寸、样式上非常接近真实组件的组件。
骨架屏的作用：
- 提升用户感知体验；
- 保证切换的一致性；
- 提供可见性观察的目标对象。

骨架屏

如何提升切换时的体验
在真实组件开始渲染时，需要一定的时间和空间，时间指的是真实组件从创建到渲染的时间，包括请求接口、请求资源和渲染的时间，空间指的是页面布局中需要给真实组件留出刚好的位置，避免产生抖动。
我们可以使用Vue内置的transition组件自定义骨架组件和真实组件的进入和离开效果，通过合理的布局和定位，减少切换时的抖动，通过设置过渡效果给真实组件留出一定的加载时间。
Vue组件懒加载方案 --- Vue Lazy Component
该插件支持组件可见或即将可见时懒加载，支持组件延时加载，支持加载组件前展示组件骨架，提高用户体验，支持懒加载组件分包异步加载。

API上的优化

Object.freeze
Object.freeze()：把不会修改的对象/数组冷冻起来，Vue将不会对这些数据做响应式处理。当然，擅自修改这些数据也将会报错给你看。
```
const columnList = Object.freeze([
    { title: '姓名', key: 'name', align: 'center' },
    { title: '性别', key: 'gender', align: 'center' }
])
```