美团前端一面面经

美团一面 (50 min) 已凉~~

发个面经保佑一面能过吧
顺序大概是

1. 自我介绍

2. 问了下项目中用到了响应式的适配，说了下用了 rem (然后没有追问，可能是想让我自己说)

3. 项目中的首屏优化(路由懒加载，图片懒加载)

4. 项目中有没有用到什么新技术说了下 vue3，然后提到了 proxy，问了 vue3 中响应式数据如何收集依赖

5. 路由懒加载说了下 es6 的 import 函数以及需要分包

6. 说了下图片懒加载的实现原理

7. 图片懒加载中如何判断的图片快达到视口，说了三种

   • element.offsetTop - document.documentElement.scrollTop <= window.innerHeight
   • getBoundingClientRect
   • IntersectionObserver

8. 项目的登录注册

9. webpack 中 loader 和 plugin 区别

10. 问了有没有了解其他构建工具，说了 vite 讲了讲(了解的不多)

    八股

11. 响应状态码 100、101、200、301、302、304、403、404、500

12. http2~http3

    开始问基础

13. css 动画 (transition、animation)

14. 举了个例子说用 js 一帧一帧绘制和用 css 动画哪个更优(因为不知道，从 cpu 和 gpu 方面来讲)

突然想起来，面试官应该是想考我关于浏览器渲染机制方面的问题(简历上写了)，js 的执行会挂起 GUI 线程，如果使用 js 来绘制动画的话会阻塞 html 的解析导致渲染树构建被延迟。

后来去查了一下，关于这方面牵扯的还是挺多的，可以看以下两篇文章。

JS 动画比 CSS3 动画性能谁更好？ - 知乎 (zhihu.com)

CSS and JavaScript animation performance - Web 性能 | MDN (mozilla.org)

14. gpu 为什么更快(瞎扯)

15. 事件循环说一说

16. 事件循环题目

    setTimeout(() => {
      new Promise(res => {
        console.log(2);
        res();
      }).then(() => {
        console.log(1);
      });
      console.log(4);
    }, 0);
    setTimeout(() => {
      console.log(3);
    });
    console.log(5);

17. sum(1)(2)(3)，写的不是很好面试官给提示了
    ​

function cureer(fn) {
  let params = [];
  return function newFn(...newParams) {    // 这里剩余参数漏了提醒一次
      params = [...params, ...newParams]
    if(params.length === fn.length) {
      return fn(...params);    // 这里扩展运算符漏了没看出来提醒了一次
    } else {
      return newFn
    }
  }
}
function getSum(a, b, c) {
  return [...arguments].reduce((a, b) => a + b, 0);
}
const sum = cureer(getSum);
console.log(sum(1)(2)(3));

18. 归并排序，合并有序列表写糊涂了，后面重写了

19. 反问，问了部门做什么的以及学习建议，建议多了解一些前端的新知识提到了一开始说的 vite

面试体验很好，总体来说不难，前端工程化了解的不多答的也不是很细，http 问了好多我也不知道为什么，就把知道的都给说了，也给了提示，面试官好喜欢笑搞得我也忍不住笑。