vue本身性能就不错，但是针对某些小的场景，需要针对性的进行微调，今天我们就来了解下vue在性能方面该注意什么。

web应用性能关注的指标

页面加载性能

首次访问的时候，应用展示出内容，并且达到可交互的状态。这个一般会用谷歌定义出来的一系列web指标去衡量。

比如最大内容绘制（LCP），首次输入延迟（FID），首次内容绘制（FCP）等等。

更新性能

应用响应用户输入更新的速度。比如当用户在搜索框中输入时结果列表的更新速度。或者用户在一个单页面应用（SPA）中点击链条跳转页面的切换速度。

理想情况

最理想的是将两者都最大化，但是不同的前端架构往往会影响到这些方面是否能达到更理想的性能。

另外，你构建的应用的类型会极大的影响你在性能方面优先考虑的问题。

所以性能优化第一步是选择合适的框架。这个选择我们后面再聊。

分析工具

为了提高性能，我们要先知道怎么衡量，有个标准。我们可以用一些工具来做。

比如这个网站：https://pagespeed.web.dev/ 你输入网址之后它会帮你分析网站的性能。

这里我用百度做了一个测试。

也可以使用谷歌浏览器自带工具lighthouse

这个工具来进行测试，也可以得到一系列分数。

在本地开发的时候也可以用谷歌浏览器的这个开发者工具lighthouse来做。

也可以用谷歌浏览器自带的性能分析

将vue的app.config.performance设置为true，将会开启vue特有的性能标记。标记在chrome开发者工具的性能时间线上。