最近在面试，总被问到到性能相关的东西，所以整理下
web性能概述
web应用性能主要两个主要的方面
- 页面加载性能：首次访问时，应用展示出内容与达到可交互状态的速度，
- 更新性能：应用响应用户输入更新的速度。比如当前用户在搜索框中输入结果列表的更新速度。
核心web指标
核心web指标的构成指标会随着时间的推移而展，当前针对2020年的指标构成侧重于用户体验的三个方面---- 加载性能、交互性、视觉稳定性---并包括以下指标（以及指标响应的阈值）
-
Largest Contentful Paint（LCP）：最大内容绘制，测量加载性能。LCP应在页面首次开始加载后2.5s内发生
-
First Input Delay（FID）：首次延迟输入，测量交互性。页面的FID应为100ms或更短
-
Comulative Layout Shift（CLS）：积累布局偏移，测量视觉稳定性。页面的 CLS应保持在0.1.或更少
vue性能分析
为了提高性能，我们首先需要知道如何衡量它。 用于生产部署的负载性能分析：
用于本地开发期间的性能分析：
-
app.config.performance将会开启 Vue 特有的性能标记，标记在 Chrome 开发者工具的性能时间线上。
-
Vue 开发者扩展也提供了性能分析的功能。
页面加载优化
页面加载优化许多跟框架无关，可参考web性能
选用正确的框架
- 若用户对页面加载性能很敏感，避免将其部署为纯客户端的SPA，而是让服务端直接返回包含用户想要查看的内容的HTML代码。
包体积与Tree-shaking
一个最有效的提升页面加载速度的方法就是压缩JS打包产物的体积
- 尽可能地采用构建步骤
- 使用相对现代的打包工具，许多vue的API都是可以被tree-shaking的。
- 无须在浏览器中载入Vue，因为当使用了构建步骤时，模版会被编译。
- 避免引入新的依赖时导致包体积膨胀。
- 如果使用了构建步骤，应当尽量选择ES模块格式化以来，它们相对Tree- Shaking更友好。
- 查看包体积，并评估与其提供的功能之间的性价比
- 若只在渐进式增强下使用Vue，避免使用构建步骤，可考虑使用petite-vue（只有6KB）
代码分割
构建工具将构建后的js包拆分为多个较小的，可以按需并行加载的文件
更新优化
props稳定性
尽可能让传给子组件的props尽量保持稳定
通用优化
大型虚拟列表
前端应用中最常见的性能问题就是渲染大型列表。无论一个框架性能有多好，渲染成千上个列表都会变得很慢，因为浏览器需要处理大量的dom节点。
常见的虚拟化工具：
减少大型不可变数据的响应性开销
vue的响应性系统默认是深度的，虽然这种站台管理变得更直观，但在数据量巨大是，深度响应性会导致不小的性能负担。因为每个事故行反问豆浆触发代理的依赖追踪。
vue为此提供了一种解决方案，使用shallowRef和shallowReactive来绕开深度响应，
避免不必要的组件抽象
避免不必要的创建无渲染组件或高价组件和使用
