其他
时隔一年半，我，一个卑微的前端菜鸡，又来写面经了
The following article is from 程序员成长指北 Author 刮涂层_赢大奖
写在前面
本次面试持续了整整四周，密度非常大，平均每天四家，身心俱疲，如果不是时间紧迫建议不要把面试安排得这么密集 八股文虽然很多没什么用，但是该背还得背 算法和数据结构不是短时间就能练成的，不过好在前端不会有太难的算法题，都是基本的动态规划，回溯，数组遍历，链表，二叉树的问题，如果自己算法实在不太行，找工作提前一两个月把力扣上比较经典的题刷一刷，遇到题最起码不至于没思路，各种排序的原理还是要看看的，很容易被问到，而且一旦答不上来很减分 不管你写 Vue 的还是 React 的（如果你写 ng 当我没说），很容易被问到两者区别，建议从多个角度去聊，比如框架特性、生态、开发体验、社区评价、性能、源码等多个角度聊 有亮点的项目最好多准备几个，最好是不同类型的，比如业务的、偏中后端的、组件库的、工程化的和新兴技术的，根据自己擅长的内容最起码准备两三个，有的面试官就是想看你都做过哪些有难度的事情，一招鲜这时候就不好用了 对不同的角色的面试官问的问题，要在不同的角度回答，比如同样问你有没有处理过兼容性问题，对前面的面试官，就可以回答遇到过的不兼容的场景和解决细节，遇到后面 leader 的面试就可以更多地从如何高效验证排查兼容性问题这个角度回答，注意场景 最后一般面试官都会给提问题的时间，我个人一般是问业务内容、技术栈、团队规模或者未来业务和技术上发展方向，到后面的面试官我会问一下这位面试官在这个团队中的角色，根据他的角色结合他对上面几个问题的表述可以初步判断出这个团队是边缘的，还是核心的，还是单纯是个画大饼的 整体面下来，面试体验最好的是微软，谦卑，有礼貌，感觉微软面试官是有一整套面试话术的，比如 “接下来我会问你一些业务相关问题，请在不违反当前公司原则的情况下回答，如果我的问题你不方便回答可以直接告诉我” “接下来这个题你可以用你任何熟悉的编译器进行作答” “我接下来描述的问题如果你有任何不清楚的都可以随时打断我” 我答的题，还有我描述的项目，面试官一般都会先给予肯定答复，如果有问题再做进一步的提问 中途有一轮，面试官的问题我理解错了，实现了另一个东西，面试官第一反应是自己没有表述清楚，而且说我理解的这个方向的代码实现得很好 后面英文面试时，我英语很差，面试官说了一大段英语我基本没听明白，面试官问我是不是自己说太快了
Taptap
一面
换肤都做过什么处理，有没有处理过可能改变尺寸的换肤 i18n 在团队内部都做了哪些实践 webpack 迁移 vite 遇到了哪些问题 CI/CD 做了哪些实践 鉴权有了解么，jwt 如何实现踢人，session 和 jwt 鉴权的区别 TCP 三次握手 http1.0，1.1，2 都有哪些区别 https，为什么 https 可以防中间人攻击 冒泡排序
二面
给你一个已经升序排列的数组，给一个数字，找一下这个数字在这个数组里出现了几次 洗牌算法，如何验证这个洗牌算法可以把牌洗得足够乱 node stream 去取一个超大数据量的日志，由于内存限制每次只能取一部分，现在希望在全部日志中随机取一万条，如何做 介绍一下项目 有哪些是由你主导提出的方案做的事情
京东
一面
介绍一下 promise，它为啥叫 promise esmodule 介绍一下，它和 commonjs 的区别，主要的优势是什么 介绍一下 vite 的原理，它会去编译你的代码吗，vite 引用 commonjs 的包的时候怎么处理 如何转成 esm vue3 的组合式 API 有了解吗，它有哪些优势 介绍 https cors 介绍一下 微前端有了解吗 为什么你们移动端 h5 用 vue，pc 管理端用 react？ git 对象上的操作有了解过吗？git reset、rebase 这些操作用过吗 ？ 看你之前跳的都比较频繁，每段都没超过两年，京东有个二五原则，这个问题你怎么看
二面
你们小程序是用的 taro，对 taro 原理有了解吗 你们 cms 系统的架构是怎样的 你有了解过 webpack 现在也支持 esm 了吗？ 你们的组件库是全公司公用的还是团队内自己的，是从 0 开发还是参考其他开源组件库在别人的基础上搞的？ 有用 vue3 吗，为什么团队没有上 vue3？ 你们 react 用的是什么语法？fiber 原理有了解吗？ 你们当前团队有多少人，未来想做哪方面？
度小满
怎么理解 vue 单向数据流的 Vue 组件之间的通信方式都有哪些，用过 eventbus 么，eventbus 的思想是什么 写个自定义 v-modal listener 有了解吗 Vue 生命周期有哪些，都是做什么的，updated 什么情况下会触发，beforeCreate 的时候能拿到 Vue 实例么，组件销毁的时候调用的是哪个 API 什么情况下会触发组件销毁，销毁的时候会卸载自定义事件和原生事件么 自定义指令写过么，自定义指令都有哪些钩子 传统前端开发和框架开发的区别是什么 Vue2 的数据响应式有两个缺陷，你知道是哪两个缺陷么，为什么会有这样的缺陷，如何解决 Vue 如何实现的数组的监听，为什么 Vue 没有对数组下标修改做劫持 Symbol 有了解吗，迭代器有了解吗，哪些是可迭代的 用 Set 获取两个数组的交集，如何做 实现 Promise.all animation 和 transition 有什么区别 写个动画，一个盒子，开始时缩放是 0，50%时是 1，100%时是 0，开始结束都是慢速，持续 2 秒，延迟 2 秒，结束后固定在结束的效果
这是我面的比较离谱的一个，问各种 API，没什么实际营养，说实话挺无聊的，面试体验也一般
BOSS 直聘
聊一下最复杂的项目 在无障碍的项目中做过哪些 做黑夜模式有没有考虑过用户设置了定时切换手机黑夜模式的情况 你们开发的 h5 项目依赖的安卓和苹果的 webview 的内核分别都是什么 Lottie 动画上做过哪些优化，有考虑在低端机上用 CSS 动画做么 如果让你做一个动画，一个地球本身在自转，外面有个飞机围着它转，飞机的螺旋桨自己也在转，有哪些需要考虑的点 CI/CD 上做过哪些 webpack 迁移 Vite 遇到过哪些问题，之前 webpack 慢是为什么，有过优化么 业务内的公共工具提炼了哪些 自己做着玩的这些项目介绍一下，主要都是做什么的 这次找工作主要看重什么
奇虎 360（安全卫士）
写 Vue 多还是 React 多？ 职业规划 CSS 实现一个扇形 问输出，以及原因（具体代码我没记，但是这个考点，以下题也都是）
var a = { name: "Sam" };
var b = { name: "Tom" };
var o = {};
o[a] = 1;
o[b] = 2;
console.log(o[a]);
问输出
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
async function async2() {
console.log("async2");
}
console.log("script start");
setTimeout(() => {
console.log("setTimeout");
}, 0);
async1();
new Promise((resolve) => {
console.log("promise1");
resolve();
}).then(() => {
console.log("promise2");
});
console.log("script end");
问输出
const promise1 = Promise.resolve("First");
const promise2 = Promise.resolve("Second");
const promise3 = Promise.reject("Third");
const promise4 = Promise.resolve("Fourth");
const runPromises = async () => {
const res1 = await Promise.all([promise1, promise2]);
const res2 = await Promise.all([promise3, promise4]);
return [res1, res2];
};
runPromises()
.then((res) => console.log(res))
.catch((err) => console.log(err));
Vue 的 nextTick 是做什么的？8.React 的合成事件和原生事件了解吗？ webpack 和 vite 的区别是什么，切 Vite 的动力是什么 之前的开发模式是怎样的，是一个人负责一个模块还是按照需求排期分配 微前端有了解么
HR 约我现场二面，我说我去不了北京，HR 说帮我协调一下远程面试，之后就再也没联系我
陌陌
之前做过哪些工具 移动端兼容性问题遇到过哪些 如何限制 Promise 请求并发数 实现这个 pipe
const fn = pipe(addOne, addTwo, addThree, addFour); // 传入pipe的四个函数都是已实现的
fn(1); // 1 + 1 + 2 + 3 + 4 = 11，输出11
了解过 Vue3 么，为什么还没有上 Vue3，了解 Proxy 么，它和 defineProperty 的区别是什么，性能上有什么区别么 Vue 如果想做模板的复用，应该怎么做 有做过骨架屏么，是怎么做的 有做过懒加载么 有过 React Native 的经历吗 MySQL 优化有了解过么
高德
一面
如果实现一个三栏布局，需要三栏占同样的宽度，放多个元素时会自动换行，有哪些做法 移动端适配是用 rem 还是 vw？分别的原理是什么？你们用什么方案？ ES6 语法用过哪些，都有哪些常用的特性 Promise 详细聊一下，可以解决哪些问题 p 成功的会如何走，如果 p 失败了进入 b 之后，b 中又失败了是否会继续执行后面的 c 或 d
p.then(a, b).then(c).catch(d);
下面这个 class 的四个属性分别属于这个 class 的什么，fn 和 f 有什么区别
class A {
static a = 1;
b = 2;
fn() {}
f = () => {};
}
实现一个 node 异步函数的 promisify Vue 生命周期都有哪些 keep-alive 的原理是什么，如果不用它的话怎么自己实现类似的效果 v-if 和 v-show 的区别
二面
介绍一下之前做的项目 如果需要你实现一个全文翻译功能，富文本的标签部分你是如何处理的，翻译之后数据如何回填 typescript 实现一个字符串类型去左侧空格
type A = " Hello world! ";
type B = LeftTrim<A>; // 'Hello world! '
如果需要你实现一个弹幕的组件，你需要如何设计这个组件的 props 和 state，内部如何实现，有哪些地方可以优化
三面
介绍一个有挑战性的项目 无障碍方面你了哪些优化 i18n 方面你都做过哪些 你们做的是一个怎么样的产品
const data1 = { "a.b.c": 1, "a.b.d": 2 };
const data2 = { "a.b.e": 3, "a.b.f": 4 };
// 把如上两个对象合并成一个JSON，其中的.需要处理成对应的层级
你对 serverless 的理解是什么样的 未来发展方向希望是怎样的 对技术上有什么期望
滴滴
一面
之前做过 SSR 是哪种服务端渲染，是同构么 介绍一些上一份工作主要都负责哪些事情 介绍一下单例模式和它在前端的应用 介绍一下原型链 介绍一下前端的继承方式 HTTP，TCP，七层网络结构，讲一下 chrome 浏览器最多同时加载多少个资源，那如果想同时加载更多资源应该怎么办 http2 的多路复用是什么原理 实现一个改变 this 指向的 call 方法，介绍一下原理 求斐波那契数列第 N 项 跨端有了解过么，Taro，uniapp 有写过么 有 Devops 相关的经验么 Docker 和 k8s 有相关经验么 了解 JSON Web Token 么，它和其他的鉴权方式有什么区别 网络安全有了解么，CSRF 如何防御，SameSite 有哪几个值
二面
之前的工作在每个阶段给你带来了哪些成长 你之前做过的比较有亮点的项目 如果你还在之前的部门的话，你有哪些事情是还想做的 对 TDD 的看法是怎样的 移动端一套代码适配多端是如何做的
二面前面聊了聊项目，最后一直在给我将部门未来的发展趋势，说了很久，说实话我听得有点困了，然后不知道为啥给我挂了
小红书
介绍一个比较难的项目 如果用户希望自己定义一个颜色生成对应的皮肤，应该怎么制定方案 webpack 迁移 Vite 遇到过哪些问题 Vue 和 React 的区别 Vue 和 React 的 Diff 算法有哪些区别 编写一个方法，判断一个字符串是否是合法的 XML
const str1 = "<html><div>123</div></html>"; // true
const str2 = "<div><div>123</div><div></div></div>"; // true
const str2 = "<html><div>123</html></div>"; // false
在一个矩阵中查找一个字符串，可以上下左右移动，但是不能回头，如果能找到这个字符串返回 true
const str = "abcde";
const matrix = [
["0", "0", "0", "0", "0", "0"],
["0", "0", "a", "b", "0", "0"],
["0", "0", "0", "c", "d", "0"],
["0", "0", "0", "0", "e", "0"],
];
青蛙跳台阶，一次可以跳 1 阶，2 阶或者 3 阶，如果想跳上一个 N 阶共有几种跳法
前面吹逼时间有点长，导致后面三道算法题做题时间不太够了，挂了
美团（酒旅）
一面
之前做过的有难度的项目 浏览器缓存机制 HTTPS 介绍一下 节流和防抖的原理是什么 事件循环介绍一下 输出结果
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
async function async2() {
console.log("async2");
}
console.log("script start");
setTimeout(() => {
console.log("setTimeout");
}, 0);
async1();
new Promise((resolve) => {
console.log("promise1");
resolve();
}).then(() => {
console.log("promise2");
});
console.log("script end");
0.1 + 0.2 为什么不等于 0.3，为什么会有误差，如何解决 大数加法如何实现 v-for 为什么会有 key 为什么 vue 的 data 用一个函数而不是一个对象 虚拟 DOM 介绍一下 diff 算法介绍一下 webpack 和 Vite 的区别，迁移过程是怎么样的 前端工程化你是怎么理解的
二面
在之前公司业务和技术上主要都负责哪些 技术选型和技术架构都是怎样的 研发流程上有做效率工具么 node 的框架用的是哪个，内存监控是怎么做的，你了解过哪些 node 的框架 vue 和 react 都看过哪些部分源码，v-model 的原理是什么，虚拟 dom 的优缺点是什么 typescript 相比 JavaScript 的优点是什么 export 和 module.exports 的区别 node 的内存泄露是如何监控的 node 读取文件的时候，fs.readFile 和 stream 有什么区别 你的优势和劣势是什么
聊了好多 node 监控相关的，说实话没咋接触过
知乎
一面
介绍有难点的项目 使用 Vite 遇到过哪些问题 esbuild 有了解吗 当你们把体量很大的项目拆分后，有没有遇到拆分之前没有的问题 组内工具包你们是如何保证向下兼容的 以下两种写法有什么区别，会出现什么效果，如果不一样的话如何能得到同样的效果
export default class App extends React.Component {
state = {
cnt: 0
};
render() {
return (
<>
<button
onClick={() => {
this.setState({ cnt: this.state.cnt + 1 });
setTimeout(() => {
this.setState({ cnt: this.state.cnt + 1 });
}, 1000);
}}
>
add cnt
</button>
<div>cnt: {this.state.cnt}</div>
</>
);
}
}
export default function App() {
const [cnt, setCnt] = useState(0);
return (
<>
<button
onClick={() => {
setCnt(cnt + 1);
setTimeout(() => {
setCnt(cnt + 1);
}, 1000);
}}
>
add cnt
</button>
<div>cnt: {cnt}</div>
</>
);
}
问输出
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
throw new Error();
}, 2000);
});
const p2 = p1
.then((val) => {
console.log(val);
return val + 1;
})
.catch((err) => {
console.log(err);
return err;
});
Promise.all([p2, Promise.reject(3)])
.then((val2) => {
console.log(val2);
})
.catch((err2) => {
console.log(err2);
});
写个二叉树遍历，深度优先广度优先 Typescript 类型了解过吗，infer 是做什么的，实现一个 Pick 和一个 Omit
二面
SSR 和 CSR 的区别，Nuxt 这类的 SSR 方案和直接渲染 ejs 这类方案有什么本质的区别 Vue 和 React 使用的比重是怎样的，这两者各自的优劣介绍一下 PureComponent 会引入什么问题，什么情况下会需要用到它 Vue 的单文件开发模式，这个解析 vue-loader 是如何实现的。 如果 template 语言换掉的话，会如何处理。 script 的部分会如何处理，由于 babel-loader 是只能针对 js 类型的文件进行转化，那.vue 文件中的 script 标签是如何被 babel-loader 读取的。 vue scoped 是怎么实现的，dom 上的哈希是如何和 style 中的哈希对应起来的，又是如何保证每次生成的哈希不变的 babel.config.js 和.babelrc 有什么区别，应该在什么场景使用，同时使用的话会出现什么现象 Vue 调用 render 函数的时机是在什么时机被触发的，后续状态变更导致 render 又是谁触发的 Vue 和 React 在数据更新上的差异，Vue 这种数据劫持的方式会不会带来额外的问题，Vue3 在这些问题上有优化么 forceupdate 都做了哪些事 异步更新 DOM 这个操作，Vue 和 React 都是如何实现的，Vue 的异步处理还有其他方式可以做么，除了 MessageChannel 还有其他和他用法类似的 API 么 公用的代码如何做提取，如何判断一个资源是否应该被提取 Portal 除了做了把组件提到对应的 DOM 下之外，还做了哪些事 用什么方式发请求，axios 是个同构的工具，它是如何实现区分 Node 和浏览器环境的 axios 内部如何把 xhr 的 callback 转换为 promise 的，如何处理请求异常的
二面问得比较细，很多地方的细节其实没太关注过，挂了
腾讯（看点）
一面
实现 ob 和 watch 方法，希望当方法传入 watch 函数时会执行一次，之后每次修改 data 上的属性时，会触发对应的 console
const data = ob({ count: 0, foo: "test" });
watch(() => {
console.log("watch-count", data.count);
});
watch(() => {
console.log("watch-foo", data.foo);
});
data.count += 1;
console.log("showcount", data.count);
delete data.count;
data.foo = "test2";
输入一个字符串，遇到方括号则对方括号内的字符串重复 n 次，n 是方括号前面的数字，如果没有数字则为 1 次，可能存在嵌套
const test1 = "a2[b]a2[b2[c]]";
// abbabccbcc
const test2 = "2[3[c]]a2a";
// cccccca2a
const test3 = "[abc][d]3[e2]4";
// abcde2e2e24
二面
Vue2 和 3 的区别，依赖收集和派发更新都是如何做的，vue 是如何保证父组件重新渲染不导致子级重新渲染的 webpack 异步加载和分包的原理是什么 Vite 依赖与预构建是把所有的用到的依赖都合并到一起还是每个都是单独的包，一个包安装了多个版本问题如何处理？ node 的进程管理了解过么？多进程都有哪些方案？
4.1 worker 挂了如何能监测到？
4.2 IPC 通信是什么？
4.3 如果用 cluster 启动多进程后，子进程是多个端口还是一个端口？
4.4 一个 worker 是一个进程吗？它有独立的 pid 么？
4.5 进程之间数据通信如何做node 内存泄露是如何监控的？原理是什么？内存是监控进程的还是监控 docker 的？ webpack 打 polyfill 都有哪几种方式 http2 都有哪些应用，多路复用和 1.1 版本 keep-alive 有什么区别和联系，如果 http1.1 服务端需要按顺序处理请求，那为什么有的时候在一个页面里看图片，有时下面的图片会先出来，http pipeline 有了解吗，http 流传输有了解吗 前端的工程化都做了哪些事情？git CI/CD 都做了哪些事？比如 lint，安全检查，圈复杂度都有关注吗？lint 的规则是你们业务自己定制的吗？组件测试和自动化测试有做吗？上线的流水线有配过吗？小流量上线是如何做测试的？ Taro 多平台的兼容是怎样做的，Taro 是怎么把 react 代码编译成运行时，运行时是什么样的代码，又是如何让它在原生小程序的 DSL 中执行的 前端监控报警是怎么做的，都有哪些监控指标，报警的策略是怎样的，关注哪些指标和维度，白屏如何监控 都做过哪些优化，动画的剪包如何做，FPS 是如何监控的
这个真的是有点。。。难，很多完全是我知识盲区，尤其 node 的部分和 Taro 的部分，挂得服气
金山
一面
主要做过哪些项目 Vue 兄弟组件传值方式都有哪些 介绍一下 Vuex 介绍一下 diff 算法 Websocket 介绍一下，它和 http 有什么关系 介绍一下 https 用三个正面的词和三个负面的词评论一下你自己 介绍一下你最近读过的一本书 有没有做过哪些和代码没关系的但是比较精通的事情 你对下一份工作的期望是怎样的
二面
对上家公司的感受，自己的成长，不满的地方 之前的团队规模是怎样的 之前的业务是怎样的 对下一份工作的期望是怎样的
网易（灵犀）
一面
对下一份工作有怎么样的期望，你对这个规划做过哪些努力 介绍一个有难点的工作 为什么之前要把项目从 SSR 迁移到 CSR 实现一下 koa 中间件原理，如何判断调用了多次 next 并抛出错误 事件循环介绍一下，Node 事件循环中如果在 Poll 阶段不停地产生新的事件会怎样 Node 中如果要对很大的字符串做 JSON.parse 应该怎样处理 讲一下浏览器中的重绘和重排 介绍一下浏览器的合成层 如果一个页面需要同时适配 PC 端和移动端，应该怎么做，rem 和 vw 方案有什么区别 typescript 定义一个对象应该如何定义，如果定义对象的 key 必须是字符串，应该如何定义 Vue 的响应式原理介绍一下，Watcher 的 cleanDeps 是做什么的 computed 和 watch 是什么原理 如果 data 里有一个对象，不希望它被深层监听，需要怎么做 给定任意二维数组，输出所有的排列组合项。比如 [['A','B'], ['a','b'], ['1', '2']]，输出['Aa1','Aa2','Ab1','Ab2','Ba1','Ba2','Bb1','Bb2']给出任意一个二维数组，要求输出数组元素的所有排列组合。如 [['A', 'B', 'C'],[ 'A1', 'B1', 'C1'],[ 'A2', 'B2']]，输出["AA1A2", "BA1A2", "CA1A2", "AB1A2", "BB1A2", "CB1A2", "AC1A2", "BC1A2", "CC1A2", "AA1B2", "BA1B2", "CA1B2", "AB1B2", "BB1B2", "CB1B2", "AC1B2", "BC1B2", "CC1B2"]
二面
Node 服务迁移到轻服务主要都做了什么 你们的 RPC 用的哪个框架，grpc 和 thrift 的区别有了解么，protobuf 有了解吗 serverless 有多少了解，它适合做什么，都用它写过什么 客户端提供 API 版本不一致这类兼容性问题你是如何做的处理 webpack 迁移 Vite 有遇到什么问题，snowpack 有了解过么，它和 vite 有什么区别 对 React 熟悉么，hooks 有哪些最佳实践 性能优化都做过哪些 一个页面的性能指标都有哪些，你是如何做监控的，如何监控 node 服务的性能监控 实现一个二叉树中序遍历的迭代器，时间复杂度最好是多少，最差是多少，空间复杂度是多少
三面
实现一个函数，传入一个数组，数组中每一项代表一个线段的起止位置，计算所有线段覆盖的长度总量，并编写测试用例
lineCoverage([
[0, 1],
[2, 3],
]); // 2
lineCoverage([
[0, 2],
[2, 3],
[3, 4],
]); // 4
lineCoverage([
[0, 2],
[1, 3],
[2, 4],
]); // 4
lineCoverage([
[0, 5],
[1, 3],
[2, 4],
]); // 5
lineCoverage([
[0, 6],
[2, 6],
[6, 7],
]); // 7
计算一个矩阵内，所有 1 覆盖的区域（岛屿问题） 力扣
// howManyDots(canvas:number[][]): number
// // 上下左右相邻视为一起
// [[0,0,0],
// [0,1,0],
// [0,0,0]]
// =>1
// [[1,1,0,1],
// [0,0,1,0],
// [0,1,1,0]]
// =>3
// [[1,1,1,1],
// [0,0,0,1],
// [1,0,0,1],
// [1,1,1,1]]
// =>1
便利蜂
Vue 从修改属性到渲染到页面上都经历了什么 详见代码
/\*\*
- 目标:
- 实现一个简单的观察者模式(或发布-订阅模式)
\*/
const shop = {
apple: 5, // 苹果 5 元
potato: 2, // 马铃薯 2 元
tomato: 3, // 西红柿 3 元
orange: 7, // 橙子 7 元
}
/**
* 现在我们有一个便利店的实例对象，目标是需要增加对商品价格的监听，当商品价格发生变化时，触发对应的事件。
* 1、小明关注苹果价格变化
* 2、小刚关注橙子价格变化
* 3、当价格变化时，自动触发对应的事件
*/
class Pubsub {
constructor() {
}
list = {};
// 监听方法，添加监听者，监听对象，和监听事件的方法，
// 提示，可以将移除方法作为监听方法的返回值
listen = (key, listener, callback) => {
}
// 发布消息的方法
publish = (key, price) => {
/** 该如何定义 发布方法？ **/
}
}
// 定于一个Pubsub的实例对象
const pubsub = new Pubsub();
const event1 = pubsub.listen('apple', '小明', (listener, price) => {
console.log(`${listener}关注的apple的最新价格是${price}元`);
})
const event2 = pubsub.listen('apple', '小强', (listener, price) => {
console.log(`${listener}关注的apple的最新价格是${price}元`);
})
const event3 = pubsub.listen('orange', '小刚', (listener, price) => {
console.log(`${listener}关注的orange的最新价格是${price}元`);
})
const event4 = pubsub.listen('orange', '小强', (listener, price) => {
console.log(`${listener}关注的orange的最新价格是${price}元`);
})
/**
* 应该补充怎样的逻辑能够使得我们能够监听shop中的属性值变化呢？
* 提示：vue中双向绑定是怎么实现的呢？
* vue2.0或vue3.0的实现方式都是可以的
*/
/** 我们设置一个观察者方法，让 shop这个实例对象便成为可观察对象 **/
const observable = () => {
};
const newShop = observable(shop);
newShop.apple = 6;
/** 小明关注了苹果的价格，苹果价格变更将会触发事件
** console.log将会输出: 小明关注的apple的最新价格是6元
**/
newShop.tomato = 10;
/** 无人关注西红柿价格，不会触发事件 **/
newShop.orange = 11;
/** 小刚关注了橙子的价格，橙子价格变更将会触发事件
** console.log将会输出: 小刚关注的orange的最新价格是11元
**/
console.log(newShop);
/**
** 输入出newShop
**/
console.log(newShop.apple);
/**
** 输入出newShop的apple新值
**/
如果需要你实现扫码登录、单点登录，有什么方案 做的业务不太感兴趣，后续没有继续面
快手（商业化）
为什么之前用 SSR，为什么又从 SSR 迁移成 CSR 离线包的原理是什么 React hooks 比 class component 的优势在哪，如何在 hooks 中实现 shouldComponentUpdate 这个生命周期，有实现过自定义的 hooks 么，useCallback 和 useMemo 的区别是什么 为什么你们移动端选择 vue，pc 选择 react，这两个在性能上有什么区别么 有做过哪些性能优化 vite 的原理是什么，迁移 vite 有遇到什么问题么 serverless 有什么了解，它背后的实现原理是什么，你用它做过哪些东西 反转链表 一个字符串的全排列 问题基本都答上来了，题也都写出来了，但是不知道为啥挂了
蓝湖
一面
主要的技术栈 主要都是和客户端如何协作 Vue 新版本特性有了解么 在工作中有用到什么设计模式么 typescript 装饰器有了解么，类装饰器的 this 是如何处理的 有用过抽象类么 举例一下 Map 和 object 的区别，如果需要一个字典的需求，都是 key: value 的形式，那应该怎么选择这两个呢 Map 和 WeakMap 有什么区别 js 垃圾回收机制有了解吗 二分查找的时间复杂度是多少，简要描述一下过程，O(logN)是怎么算出来的，TopK 的时间复杂度是多少，快排的时间复杂度是多少 ES5 的继承都有哪几种，主要介绍一下组合寄生，下面这个的输出是什么，this 指向谁
class A {
constructor() {
console.log(this.name);
}
}
class B extends A {
constructor() {
super();
this.name = "B";
}
}
const b = new B();
输入一个二叉树和两个 node，输出这两个 node 的最近公共祖先
二面
如果让你实现一个计算器，都需要考虑哪些问题
三面
看新的机会的时候你更看重哪些方面，对哪些方面会感兴趣 当前薪资 接触过哪些排序算法，归并排序的思路是什么，一个数组做归并排序的话，一共经历了多少次合并 最有挑战的项目是什么样的 有没有经历过比较痛苦的阶段 最近有在学什么新的东西么 之前的工作中有没有你比较欣赏或者崇拜的工程师 前端缓存策略，last-modified 和 etag 有什么区别，分别的适用场景是什么
百度
一面
根据我的简历逐个捋项目 对一个树形结构遍历，输出所有叶子节点 写一共获取 URL 后的参数的方法
二面
在上家公司做的主要业务是哪些，你负责哪些，哪些是迭代比较多的 换肤方案你们具体是如何实现的 国际化方案是如何做的 页面间同步状态一般都有哪些方案，分别的应用场景都是哪些 localstorage 的会不会出现不同项目的 key 覆盖别人的 key 的问题，如何解决 业务的技术选型是如何考虑的 写一个发布订阅模式的 on/emit/off
7.1 如果需要把订阅者执行成功和失败的方法分开，需要怎么做
7.2 如果希望失败的可追溯，找到是哪个订阅者的报错，需要怎么做
7.3 实现一下 before 和 after 方法，可以添加一些前置的和后置的订阅者
7.4 现在希望给所有的订阅者加打点上报的功能，并且提供全局的开关，需要如何设计
7.5 如果需要给某一个订阅者单独加一个打点，需要如何设计如果想给一个对象上的所有方法在执行时加一些打点上报的功能，如何做
这一轮面试面了一个半小时，真的就是在一个功能上加来加去，其实想想还是挺考验代码健壮度的
三面
为什么考虑做前端 做好一个产品工程师或者软件工程师，核心在于哪里 介绍一个有代表性的项目 主要都负责哪些业务，工作的 C 端和 B 端的占比是怎样的 目前都看了哪些机会，下一份工作是怎么考虑的，希望做哪个方向 整体开发流程是怎样的 工作节奏是怎样的 个人优势和缺点
大疆
一面
以什么样的心态找下一份工作，对下一份工作有什么样的要求 有什么比较感兴趣的业务，你在这个业务中想要做什么 如果希望 DOM 中的一个值和 js 中的变量双向绑定，使用原生 js 可以怎么做，React 和 Vue 分别又都是怎么做的 proxy 和 defineProperty 的区别是什么，各自的优势和缺点是什么 浏览器发请求和 node 发请求都有什么区别，浏览器都为发请求做了哪些默认行为 如何理解线程和进程 为什么 Vite 比 webpack 快很多，ESM 和 commonJS 的区别是什么，为什么 ESM 加载会更快，如何理解 ESM 的静态 都做过哪些打包的优化 在 CI/CD 中都需要做哪些事情可以把流程做得更好 最近在学习什么
二面
介绍一下你负责的业务 为什么要对一些项目做重构 组件库你们是如何做的，你在里面是什么角色，组件与组件之间的调用关系如何处理 刘海屏你们如何适配的 有对小程序做过从打开到完全展现这个流程的监控么 讲讲对 TDD 的理解 有用到敏捷开发么，对代码质量保障效果如何 提升开发效率你们有做过什么么 性能上优化有做过哪些事情 平时如何学习 这次换工作考虑的是什么 如果不考虑钱的问题，你最想做一个什么样的产品
美团（买药）
一面
输出，原因，解释一下调用栈和作用域链的关系
let a = 3;
function func(a) {
a = 10;
console.log(a);
}
func();
console.log(a);
实现一下 Promise.all 数组转成嵌套对象
["a","b","c","d"] => {a: {b: {c: {d: null}}}}
解释一下事件循环 解释浏览器渲染机制：重绘、重排，如何优化？ Vue 和 React 对比
二面
在上家主要做哪些业务 对 B 端和 C 端在技术开发上侧重点都有哪些 对技术选型是怎么考量的 下一步有哪些规划 如何能创造出一个技术产品 请写一个抽奖程序 ，已有参与抽奖的员工工号组成的数组 staffIds。
规则 1：同一员工不可重复中奖。
规则 2：每轮执行抽奖程序，入参是本轮要抽取的中奖人数 n，将中奖人工号打印出来webpack 迁移到 Vite 有什么优势，遇到过什么问题，迁移后如何测试
三面
在上一份工作主要负责哪部分业务 前后端架构是怎样的 怎么理解 SSR，在项目中如何应用 B 端都做过哪些内容，架构是怎样的
网易（传媒）
一面
浏览器请求头和响应头都能记起哪些，都是做什么的 协商缓存与强缓存 响应头和跨域相关都有哪些，之前都是如何解决跨域的 Access-Control-Allow-Origin 用 * 和指定域名的区别是什么 跨域是否允许携带 cookie，如果希望携带 cookie 需要如何做，如果 a.com 是我的域名，向 b.com 发请求，带的是哪个域名的 cookie 请求头的 host，origin，refer 的区别是什么 在什么场景下会发起 options 请求 在什么场景用，css 选择器权重是如何计算的 盒模型的边距叠加，如何解决盒子塌陷，如何创建 BFC ==和===的区别，a==1&&a==2 有什么方式让它返回 true Object.create(null)和直接创建一个{}有什么区别 new 一个函数做了哪些事 对事件循环的理解 Vue 和 React 源码读过哪些部分，印象最深刻的是哪些 简单介绍以下 Vue-router 的原理 diff 算法简单介绍一下 前端工程化做过哪些 如何做到的逐步减少项目中的 typescript 报错 写过 webpack 插件么 babel 转换的原理是什么 性能优化做过哪些 离线存储是如何做的 都用过哪些设计模式 对线上各类异常如何处理，对线上的静态资源加载失败如何捕获 node 多进程间通信是如何做的 koa 中间件原理实现是如何做的 如何界定一个依赖包的安全性 node 做过哪些性能优化
二面
在 git CI 做过哪些事，做的动机是什么 无障碍做过哪些事 业务上，前端和后端的工作占比是怎样的 有升级到 Vue3 么，觉得 Vue 的优点是怎样的 Vue 和 React 觉得哪个更优雅 有没有做过给团队开发提效的技术方案 在上家公司最大的成长是什么 今年的全年 OKR 是什么 下一份工作有什么期待
三面
有亮点的项目 脚手架用的是什么，有自己做过脚手架么，Vite 的原理是什么，如何区分环境 Vue3 的组合式 API 有了解么 typescript 和 Vue2 遇到过兼容性问题么 为什么要把 SSR 迁移到 CSR 离线包的原理是什么，有做离线包增量更新么 bridge 原理有了解么 对页面的异常监控有了解吗 介绍一下 React 的优化 性能优化都做过哪些 写一个 EventBus，包含 emit/on/off 之前工作中的亮点 组件库有做过吗
奇虎 360（奇舞团）
一面
做 2B 多一些还是 2C 多一些 介绍一下盒模型，怪异模式和标准模式有什么区别 如何做 CSS 屏幕适配 移动端有没有遇到过滑动穿透的问题 有没有遇到过移动端浏览器兼容问题 js 的数据类型都有哪些，有什么区别，为什么基本数据类型存到栈但是引用数据类型存到堆 数据类型常用的判断方式都有哪些 ES6 都用到哪些 Promise 都有哪些方法 Promise 的 then 的链式调用，返回的一个新的 promise 的状态是什么 await 和 promise 的关系，分别的应用场景有哪些 esmodule 和 commonjs 区别是什么，还接触过其他的模块化方案么 浏览器都有过哪些了解，内核都有哪些，chrome 浏览器开启一个页签时开启了多少个进程，对应开启了哪些线程 异步加载 js 的方式都有哪些 加载 css 和 js 时会阻塞 dom 渲染么 强缓存和协商缓存谁的优先级谁高，区别是什么，强缓存和服务器有通讯么，没有通讯的话有状态码么，状态码是谁返回的，缓存是存到了哪里 cookie 都有哪些属性 samesite 作用是什么 cookie 和 storage 的区别是什么 http 都有哪些版本，1.1 有什么不好的地方么，队头阻塞是什么引起的，2.0 有没有完全解决了队头阻塞问题 get 和 post 有什么区别 工程化都做过哪些 Vue 和 React 的区别 SSR 和 CSR 的区别是什么，分别的适用场景是什么，什么叫同构，除了 SSR 还有什么方案可以解决首屏渲染问题 有写过 webpack 插件么 babel 配置过么，preset 和 plugin 谁的优先级高 项目代码规范是如何做的，如何避免有人本地跳过代码规范 git commit 的有限制么 eslint 和 prettier 的冲突是如何解决的 CI 和 CD 的区别，除了 gitlab 的 CI/CD 之外还接触过哪些 docker 有了解么，有实际用过么
二面
之前主要是 Vue 还是 React，用哪个多一些？有看过一些源码么 Vue3 和之前版本的差异在哪儿 之前小程序是如何开发的 Node 了解过哪些，之前的 SSR 都是如何做的 接下来工作有哪些期望 wasm 之前有哪些了解 屏幕内有一个矩形，有一条对角线，如果在矩形上点击，如何判断点击的位置是在对角线上方，还是下方，还是点到了对角线上 如果想给这个矩形画个对角线，可以有哪些方式 之前的数据可视化是如何做的 有没有一些技术沉淀的东西，比如在技术社区的交流或者写一些文章 除了编码以外，有没有做过管理方面的事情 serverless 有哪些了解 现在工作分工的职责定界是怎么样的 前端工程化都做了哪些
腾讯音乐
一面
主要技术栈有哪些 主要业务有哪些 主要的技术方案是什么样的 SSR 迁移到 CSR 的背景是怎样的，各自的优势是什么，为什么服务端渲染页面会比客户端快 首屏性能优化都有哪些 都有用到过哪些协议 遇到的无障碍的挑战是哪些，屏幕阅读器功能是如何实现的了解吗 国际化做过哪些 都做过哪些方面的重构，重构都做了哪些优化 webpack 迁移 vite 遇到了哪些问题 对 serverless 有哪些了解，都用它做了哪些事情 测试驱动开发是怎么样的流程，有什么方案可以提高 TDD 的效率 前端安全都遇到过哪些问题 https 讲一下 常见的 HTTP 状态码都有哪些 浏览器进程模型有了解吗 浏览器渲染流程是怎样的 事件循环介绍一下 Vue 的插槽的实现原理是什么 都做过哪些性能优化
二面
Vue 和 React 哪个写的多一些 Vue 的组合式 API 的优势是什么 Vue2 的重复逻辑封装一般都有哪些方式 如果是需要通过调用 API 显示 UI 组件，这种需要如何实现（比如 Toast、Dialog） useCallback 和 useMemo 的区别和使用场景 对一个公共组件或者工具做打包，一般都需要产出哪些范式的文件 commonjs 和 esm 的模块引入和加载执行的区别是什么 node 调用 RPC 是怎么做的，对 thrift 有哪些了解 SSR 和 CSR 的优势分别是什么 Node 用的什么框架 如果页面中有大量的 DOM 更新，导致页面变卡，有哪些方案可以优化 换肤方案是如何做的 如果在 js 中执行 location.href = url，这个行为有可能会有哪些安全问题 CSRF 原理，整体的攻击链路是怎样的，都有哪些解决方案 XSS 都有哪些方式，如果过滤都需要过滤哪些内容
三面
面试官迟到五分钟没有任何道歉，让我开摄像头自己不开，面试全程一直在 pua，问我有挑战的项目，我一句话得被打断三次，极其没有礼貌。以下是面试官原话
你这个项目我理解也没什么难点啊
你没做过客户端你不懂
为什么你需要解决代码里有很多报错的问题，我理解头条的程序员应该不会写出都是报错的代码吧
头条对你的培养可能真的不够
我没有觉得头条不好的意思，我只是觉得头条对你的成长可能真的没什么帮助
你们这个架构本身就是有问题的
我认为你在计算机底层思维上还是有很大问题的
我这边也有很多头条来的程序员，他们都用过这个，你们那边怎么没用过
微软中国
一面
为什么选择做前端这个行业 Vue 和 React 的区别，项目是如何做选型的 介绍一个之前重构的项目 typescript 的优缺点 有没有经历过需求无法实现或实现难度较大的情况，这种情况如何处理呢 之前做过最有挑战的问题 实现一个类似微信聊天列表页的布局，有如下需求
1. 有一个吸顶的栏，内部的内容不需要实现
2. 一个吸底部的按钮栏，内部有四个按钮，按钮功能不需要做，只需要实现布局
3. 中间的列表可滚动
// 多说一下，这个其实考察的是画页面的基本能力和细节，比如假如使用fixed布局，滚动条会是全屏的
// 但是如果使用absolute，限制屏幕高度100%，中间局部滚动就可以把滚动条限制到中间部分，甚至可以隐藏滚动条
// 面试考画页面的话，一定要多注意这类细节，还有比如BEM命名、1px边框等问题是否有意识，这些都要考虑
最长递增子序列 力扣 最长连续递增子序列 力扣
二面
之前主要做的业务都是哪些 团队的规模和分工是怎样的 之前做过的有挑战的项目 SSR 为什么要迁移到 CSR，如果不迁移的话如何能做到 CSR 离线包的效果 搜索旋转排序数组 力扣
三面
之前做过的有挑战的项目 Vue 和 React 的区别 Vue 数据双向绑定原理 页面第一次加载会触发哪些 Vue 的生命周期 Vue 的 filter 原理有了解吗，如果需要你实现一个 filter，可以实现把一个字符串首字母大写的功能，你要如何做（最开始问原理，导致我后面理解错了，我以为是让我实现一下 Vue 的 filter 功能了，然而人家其实要的是'abc' => 'Abc'的一个方法，但是面试官对我的实现持肯定态度） 用 css 实现一个 Tooltip：界面上有一个 Button，鼠标 hover 上去后会在 Button 上方显示一个 tooltip，这个 tooltip 有圆角，下方有一个小三角形 对闭包的理解，闭包的适用场景和缺点 从输入 URL 到页面渲染都发生了什么 英语测试（说实话我没太听明白，我英文水平很差，直接跪了）
四面
做过的有挑战的项目 无障碍都做过哪些 合并两个有序数组 力扣 合并多个有序数组（这题里我解答完之后自认为时间复杂度是 O(n2)，循环中用到了 shift 这个方法，面试官问我这个的时间复杂度是多少，我说是 O(n)，面试官说有什么办法可以解决这个么，我说可以基于原有的方式倒着循环，这样就可以用 pop 代替 shift 了，面试官问我为什么 pop 时间复杂度是 O(1)，我说不知道，面试官让我有时间可以去了解一下均摊算法）
五面
下一份工作的期望 有挑战的项目 SSR 迁移 CSR 的原因，遇到过哪些问题 LRU 算法 力扣 （这个题我最开始用 Map 做的，面试官跟我说如果不用 Map，如何实现每次查询和删除都能做到 O(1)，我没思路，面试官问我查询 O(1)用什么，我说用哈希，问我插入删除 O(1)用什么，我说用链表，可我不知道怎么结合到一起，面试官提示我可以用双向链表，然后我才做出来的）
六面
英语的自我介绍 为什么会选择做前端，做前端的动机是怎样的 在追求极致体验方面做过哪些 都会关注哪些指标，如何做检测 之前的工作中迭代速度是怎样的 未来三到五年的规划是怎样的 有没有做过自动化测试方案，对于兼容性如何做自动化测试 对于 UX 还原度，应该如何高效测试 一个 PC 页面，如果需要适配手机屏幕，都有哪些需要注意的，可能需要解决哪些问题，需要如何去测试
快手（广告）
主要技术栈是哪些 之前参与的重构的项目有哪些有难度的地方 SSR 迁移到 CSR 是基于什么考虑 项目的体量大概都有多大 项目优化或者重构后，一般从哪些方面评判效果好还是不好呢 bridge 的原理有了解么，有遇到过什么问题么，在一些没有 bridge 的场景里有没有做过特殊处理 做过唤起 app 么，有遇到过什么问题吗，如何判断唤起是否成功 国际化采用的什么方案 换肤方案是如何做的 小程序和 H5 都有哪些区别，有看过小程序底层如何实现的么 为什么要做 Vite 迁移，迁移有遇到了什么问题 写一个 React Hooks，用来倒计时，传入时间，返回 start、pause、restart、isRunning 实现一个方法，传入一个 url 的数组和一个数字，对 url 进行请求，并根据数字限制最大请求数
腾讯（广告）
一面
对下一份工作有什么期望 React 阅读过哪部分源码 Vue 和 React 的区别 proxy 和 defineproperty 的在 Vue 中区别是什么 Vue-router 原理 js 和 ts 混合开发有没有最佳实践 Vite 为什么会比 webpack 快 Rollup 和 webpack 打包结果有什么异同 问输出，解释一下函数调用栈和作用域链的关系
function bar() {
console.log(project);
}
function foo() {
var project = "foo";
bar();
}
var project = "global";
foo();
问输出，如果希望循环中输出 123，有哪些方式可以改
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(new Date(), i);
}, 1000);
}
console.log(new Date(), i);
对 js 的异步是如何理解的 如何理解闭包 求一个字符串的不重复的最长字串的长度 力扣 判断一个对象是否是循环引用对象 团队内部 eslint 的规范是如何指定的 从输入 url 到渲染页面，都发生了什么
二面
主要负责的业务 换肤方案是如何做的 国际化方案是如何做的，都做了哪些语种 离线包的方案原理是什么 node 主要都做了哪些 安全问题遇到过哪些，CSRF 的加签名是如何做的 单向链表反转 快速排序
三面
主要负责哪些业务 有过带人的经验么 输出数组中频率第二高的元素的下标 幂等与非幂等的区别 get 请求是否可以传图片 有没有遇到过前端安全问题 线上问题一般如何处理
- EOF -
觉得本文对你有帮助？请分享给更多人
推荐关注「前端大全」，提升前端技能
点赞和在看就是最大的支持❤️