【饿了么】前端岗-秋招面经，一面挂
前言
时间线：8月20日投递简历，9月7日面试官打电话约面，9月16日晚上面试。
部门：阿里巴巴 – 本地生活 – 饿了么 – 商家端。
一面
做题+聊天，全程100分钟。
做题
先做五道题，给20~30分钟的时间。
- 列出打印顺序
// 列出打印顺序
function changeStuff(a, b, c) {
a = a * 10;
b.item = "changed";
c = {item: "changed"};
}
let num = 10;
let obj1 = {item: "unchanged"};
let obj2 = {item: "unchanged"};
changeStuff(num, obj1, obj2);
console.log(num);
console.log(obj1.item);
console.log(obj2.item);
- 数组扁平化
// 数组扁平化
const arr = [1, 2, [3, 4, [5, 6, [7]], [8], [9], 10], 11];
- JS 手写快排
// JS 手写快排
const arr = [3, 2, 5, 4, 8, 3, 9, 3, 5, 2, 1, 6];
- 手动实现new操作符
// 手动实现new操作符
let Parent = function (name, age) {
this.name = name;
this.age = age;
};
Parent.prototype.sayName = function () {
console.log(this.name);
};
const child = new Parent('xxx', 0);
child.sayName();
- JS 实现洋葱模型
// JS 实现洋葱模型
async function mid1(next) {
console.log(1);
await next();
console.log(4);
}
async function mid2(next) {
console.log(2);
await next();
console.log(5);
}
async function mid3(next) {
console.log(3);
await next();
console.log(6);
}
const middleware = [mid1, mid2, mid3];
compose(middleware)();
聊天
- 自我介绍
- 说一下实习项目吧
- 说说对跨端的理解
- 微信小程序了解多少
- RN 中的 H5 如何与原生通信
- H5 页面如何保存原生的登陆态
- 这种登陆态和 Web 的有什么区别
- 说说对 Hybrid 的理解
- JSBridge 背后的原理是什么
- JS 为什么能调用原生方法
- 对跨端编译了解多少
- 抓包工具背后的原理是什么
- 说说对前端监控的理解
- 你是如何设计埋点 SDK 的
- 说说 Babel 的工作流程
- 挑一个你写过的 Babel 插件，说说实现思路
- 说说对 TS 的理解
- 即使没有执行，TS 也能提示类型错误，这背后的原理是什么
- AST 还有哪些应用场景
- 你知道哪些性能指标
- TTI 的计算规则
- 你有实践过哪些性能优化
- 提升页面秒开率的手段有哪些
- 如何解决长列表渲染问题
- 接口请求耗时过长怎么办
- 如果我想用缓存解决上述问题，该如何让前端展示最新数据
- 实现一个自定义 Hook，根据缓存和请求接口，展示最新的数据
- 洋葱模型是如何用于请求拦截的
- 函数式组件和类组件有什么区别
- 为什么说函数式组件是一种趋势
- 函数式组件和类组件在编译后哪个更大
- 它们的编译产物还有什么区别
- 实现一个带装饰器的高阶组件
- useMemo 和 useCallback 的区别
- 说下你理解的闭包陷阱
- 说下 webpack 和 vite 的区别
- 如何加快 webpack 的打包速度
- include 和 exclude 的使用场景
- 如何对 node_modules 中的某个 npm 包进行编译
- webpack 的分包策略有了解吗
- 多个 entry 的应用还是 SPA 吗
- 在打包过程中，如何对多页面应用进行缓存
- Tree Shaking 背后的原理
- 为什么原型链上的属性无法被 shaking
- sideEffects 有什么作用
- 说说对事件代理的理解
- Promise 背后的原理是什么
- 说一下 V8 垃圾回收机制
- 哪些情况会造成内存泄漏
- 反问环节