美团点评 3.23前端面试总结（二面36min）

• 做的事情，遇到的需求、用的技术……

主要是PC还是M端上的？（都有）

用的技术栈是一样的吗？（是的）

• 为什么用jQuery ？（入职前公司就是用的这个）

• 补充了一下正在用React做重构

做了哪些页面，简单介绍一下（mi-note-10，滚轮动画，印度tv55）

滚动动画怎么实现

监听滚轮位置，动画盒子与滚轮盒子相互配合，动画盒子固定定位展示动画，滚轮盒子撑起高度与滚动距离，将滚轮滚动距离配合动画长度，转成百分比控制进度

遇到的问题

半屏动画时，动画的下一块会被滚轮盒子挤开，需要加上fixed同时算入滚轮盒子的高度中

动画内容怎么实现，用的jQuery的动画库

js添加类名，提前设置好样式与更新，配合 CSS 动画

PC与移动端两套代码吗？（移动端动画会简化）

动画的资源很多，怎么页面性能优化

上传前压缩，非首屏内容懒加载

怎么懒加载？

src置空，添加data-src或者用image对象配合canvas画图

达到的效果？（加载时间减少2秒左右）

• 怎么看的加载时间（本地看，lighthouse）

Lighthouse有哪些优化的建议

缩减JS的关键路径、白屏时间、首次渲染时间、CPU空闲时间，转换资源格式，区分首屏资源与非首屏资源

CSS动画与Canvas动画的区分，选择的原因（加载图片量的大小）

• 替换图片的src也可以实现，为什么要用canvas呢？（控制图片加载时间，可以不用等图片替换后再请求资源）

除了产品展示之外还接触了什么？（框架重构）

讲一下重构

• SAP对SEO的支持不太好，用SSR配合SAP处理

为啥要重构（架构升级、页面层次结构优化）

每一个产品都有一个页面，不同产品的开发效率怎么样（分复杂度，纯图片半天、静态页一天、加动画三天）

有什么积累（动画效果组件，拖拽式建站）

你开发过组件吗？（本来是有的，后面没来得及就离职了）

除了这个还做了什么业务？（其他业务只做了解，没有机会操作）

技术上的难点（轮播图组件功能不足，查源码，自己封装api）

有没有看过竞争者的产品展示（vivo、华为、苹果）

文字上浮、滚轮动画

看完有啥收获（设计起来做的很巧妙，有些地方完全没想到）

苹果的airpods动画，canvas不撑满整个屏幕，用transform缩放，canvas绘制区域越大性能消耗越多，scale配合高分辨率也能达到相同效果

怎么发现的？（开发者工具，看源码）

源码看起来很奇怪，脱敏

这种功能怎么实现（webpack插件）

插件怎么实现（生命周期钩子加上处理函数）

写过插件吗？（冒油，只了解原理）

还有其他的项目吗（Vue聊天室开发）

这个到实习之间在做什么呢？（本专业的技术java、C#、数据库之类的课）

前端框架有什么了解（Vue框架，看源码）

写过什么项目（自己封装提示符组件之类的）

小米的站点用vue重构（按块封装组件，按结构分成几种类型的组件，固定的内容直接封组件，用组件）

手上有啥offer（有两个……）

未来的职业规划（两年之内，自身技能提高）

工作地点（上海，不想异地）

对美团有什么想了解的？

• 团队做的事情，提升的机会（餐饮Sass……，用的React框架。半年一次考评）