前端高频面试题--性能篇

前端性能优化有哪些方式

前端性能优化主要分两类：文件加载更快、文件渲染更快

文件加载更快的方法：
1. 压缩文件
2. 减少网络请求：使用雪碧图/精灵图、节流防抖
3. 减少渲染次数：使用缓存，如本地缓存、vue的keep-alive、HTTP缓存等。

文件渲染更快的方法：
1. 提前渲染
2. 避免渲染阻塞：将CSS放在HTML的head中，JS放在HTML的body底部
3. 减少渲染次数：如减少页面重排
4. 懒加载

还可以在感知方面做一些性能优化，例如增加页面的loading，骨架屏等。

说一说性能优化有哪些性能指标，如何量化

可以在谷歌控制台-Lighthouse生成性能检测报告。

值的关注的指标有：
LCP：视口内可见的最大内容元素的渲染时间。如何改善：缓存页面资源，降低图片大小，减小HTML大小等。
FID：用户和页面进行首次交互操作所花费的时间。改善：压缩JS文件，延迟加载首屏不需要的JS文件。
CLS：视觉稳定性。改善：给页面动态插入内容预留空间，给图像视频等元素添加宽高。
INP：网页响应用户交互所花费的时间。改善：减少http请求次数，使用雪碧图等。

说一说服务端如何渲染

服务端渲染（SSR）是指服务器直接将生成的html返回给客户端，客户端直接进行展示。

优点：
1. 减少网络传输，提高传输效率。
2. 首屏渲染快。
3. 有利于seo搜索。

虚拟DOM

虚拟dom，它本身就是一个 JavaScript 对象，虚拟DOM保存在内存中, 只记录dom关键信息, 配合diff算法提高DOM更新的性能

当数据发生变化要更新视图时：
1. 生成新的虚拟DOM结构
2. 和旧的虚拟DOM结构对比
3. 利用diff算法, 找不不同, 只更新变化的部分(重绘/回流)到页面

说一下Diff算法

diff算法就是数据发生变化，通过对比新旧虚拟DOM的变更差异，以最小的成本完成视图更新。同级比较，深度优先。

修改准则：
原来没有现在有就增加，原来有现在没有就删除。原来和现在都有则进行比较，如果为文本结点就替换值，为静态资源不处理，都为正常结点的时候就直接替换结点。新旧都一样的时候，就使用旧的。

MVVM框架和MVC框架区别是什么

定义：
MVVM：全称为model-view-viewModel，各部分通信都是双向的。采用双向数据绑定，View的变动，自动反映在 ViewModel，反之亦然。
MVC：全称为model-view-controller。各部分之间的通信都是单向的。View 传送指令到 Controller,Controller 完成业务逻辑后，要求 Model 改变状态，将新的数据发送到 View，用户得到反馈。

区别：
1. MVC数据是单向的，MVVM是双向的。
2. 在MVC里，View是可以直接访问Model的。MVVM的页面与数据逻辑是分离模式。