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

前端性能优化有哪些方式

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

（）

文件加载更快的方法：

1. 压缩文件

（）

2. 减少网络请求：使用雪碧图/精灵图、节流防抖

3. 减少渲染次数：使用缓存，如本地缓存、vue的keep-alive、HTTP缓存等。

文件渲染更快的方法：

1. 提前渲染

2. 避免渲染阻塞：将CSS放在HTML的head中，JS放在HTML的body底部

3. 减少渲染次数：如减少页面重排

4. 懒加载

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

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

值的关注的指标有：

1. 首屏渲染时间（也叫白屏时间）

2. 最大内容绘制。

3. 交互动作反馈时间

4. NetWork请求时间。

说一说服务端如何渲染

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

优点：

1. 减少网络传输，提高传输效率。

2. 首屏渲染快。

3. 有利于seo搜索。

XSS攻击是什么

XSS指跨站脚本攻击，攻击者通过向网站注入恶意代码实现攻击，当用户浏览这个页面时，就会执行这些恶意代码。可能造成泄露用户登陆信息cookie，恶意跳转等。

预防XSS攻击的方法：

1. 对注入的代码启动HTML编码。

2. 过滤非法字符。

3. 设置cookie属性http-only，防止js脚本读取cookie。

CSRF攻击是什么

CSRF攻击叫做跨站请求伪造，通过盗用用户的身份信息发起请求。诱导用户跳转到新页面，如果目标站点只使用cookie，并且kookie是允许跨域的，此时就能拿到用户的cookie，来模拟用户进行操作。

预防CSRF攻击的方法：

1. 增加用户与页面交互操作，例如页面增加随机数字验证码。

2. 使用token来认证。

3. 设置cookie规定其他网站不能使用本网站的cookie。

说一下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的页面与数据逻辑是分离模式。