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

前端性能优化有哪些方式

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

文件加载更快的方法:
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的页面与数据逻辑是分离模式。

  • 8
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值