2021最新大厂面试经验分享「大厂面试几轮」

高德 滴滴 美团 网易 快手 腾讯 金山 360 百度 知乎 微软等大厂面试经验 一年半以前，写了个万字前端面经，最终去了字节混饭吃，因为一些业务调整的原因，我又跑路了，没写一面二面都是一轮挂的或者后面我不想面了的，附带部门的是挂了或者我拒了之后又面了另外的部门，按照一面开始时间先后排序，还有很多优秀的公司我面了但是忘记录音，比如momenta、完美世界、掌阅等等。现已完成更新，全文共计一万三千字，

每家的自我介绍和离职原因部分我就省略了~

写在前面本次面试持续了整整四周，密度非常大，平均每天四家，身心俱疲，如果不是时间紧迫建议不要把面试安排得这么密集八股文虽然很多没什么用，但是该背还得背算法和数据结构不是短时间就能练成的，不过好在前端不会有太难的算法题，都是基本的动态规划，回溯，数组遍历，链表，二叉树的问题，如果自己算法实在不太行，找工作提前一两个月把力扣上比较经典的题刷一刷，遇到题最起码不至于没思路，各种排序的原理还是要看看的，很容易被问到，而且一旦答不上来很减分不管你写Vue的还是react的（如果你写ng当我没说），很容易被问到两者区别，建议从多个角度去聊，比如框架特性、生态、开发体验、社区评价、性能、源码等多个角度聊有亮点的项目最好多准备几个，最好是不同类型的，比如业务的、偏中后端的、组件库的、工程化的和新兴技术的，根据自己擅长的内容最起码准备两三个，有的面试官就是想看你都做过哪些有难度的事情，一招鲜这时候就不好用了对不同的角色的面试官问的问题，要在不同的角度回答，比如同样问你有没有处理过兼容性问题，对前面的面试官，就可以回答遇到过的不兼容的场景和解决细节，遇到后面leader的面试就可以更多地从如何高效验证排查兼容性问题这个角度回答，注意场景最后一般面试官都会给提问题的时间，我个人一般是问业务内容、技术栈、团队规模或者未来业务和技术上发展方向，到后面的面试官我会问一下这位面试官在这个团队中的角色，根据他的角色结合他对上面几个问题的表述可以初步判断出这个团队是边缘的，还是核心的，还是单纯是个画大饼的整体面下来，面试体验最好的是微软，谦卑，有礼貌，感觉微软面试官是有一整套面试话术的，比如“接下来我会问你一些业务相关问题，请在不违反当前公司原则的情况下回答，如果我的问题你不方便回答可以直接告诉我”“接下来这个题你可以用你任何熟悉的编译器进行作答”“我接下来描述的问题如果你有任何不清楚的都可以随时打断我”我答的题，还有我描述的项目，面试官一般都会先给予肯定答复，如果有问题再做进一步的提问中途有一轮，面试官的问题我理解错了，实现了另一个东西，面试官第一反应是自己没有表述清楚，而且说我理解的这个方向的代码实现得很好后面英文面试时，我英语很差，面试官说了一大段英语我基本没听明白，面试官问我是不是自己说太快了Taptap一面换肤都做过什么处理，有没有处理过可能改变尺寸的换肤i18n 在团队内部都做了哪些实践webpack 迁移 vite 遇到了哪些问题CI/CD 做了哪些实践鉴权有了解么，jwt 如何实现踢人，session 和 jwt 鉴权的区别TCP 三次握手 http1.0，1.1，2 都有哪些区别HTTPS，为什么 https 可以防中间人攻击冒泡排序二面给你一个已经升序排列的数组，给一个数字，找一下这个数字在这个数组里出现了几次洗牌算法，如何验证这个洗牌算法可以把牌洗得足够乱node stream 去取一个超大数据量的日志，由于内存限制每次只能取一部分，现在希望在全部日志中随机取一万条，如何做介绍一下项目 有哪些是由你主导提出的方案做的事情京东一面介绍一下 promise，它为啥叫 promiseesmodule 介绍一下，它和 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$attrs和$listener 有了解吗Vue 生命周期有哪些，都是做什么的，updated 什么情况下会触发，beforeCreate 的时候能拿到 Vue 实例么，组件销毁的时候调用的是哪个 API什么情况下会触发组件销毁，销毁的时候会卸载自定义事件和原生事件么自定义指令写过么，自定义指令都有哪些钩子传统前端开发和框架开发的区别是什么Vue2 的数据响应式有两个缺陷，你知道是哪两个缺陷么，为什么会有这样的缺陷，如何解决Vue 如何实现的数组的监听，为什么 Vue 没有对数组下标修改做劫持Symbol 有了解吗，迭代器有了解吗，哪些是可迭代的用 Set 获取两个数组的交集，如何做实现 Promise.allanimation 和 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 异步函数的 promisifyVue 生命周期都有哪些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>"; // trueconst str2 = "<div><div>123</div><div></div></div>"; // trueconst 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 在这些问题上有优化么$set和$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]]";// abbabccbccconst test2 = "2[3[c]]a2a";// cccccca2aconst 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 么？5.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],]); // 2lineCoverage([ [0, 2], [2, 3], [3, 4],]); // 4lineCoverage([ [0, 2], [1, 3], [2, 4],]); // 4lineCoverage([ [0, 5], [1, 3], [2, 4],]); // 5lineCoverage([ [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/off7.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请求!important在什么场景用，css选择器权重是如何计算的盒模型的边距叠加，如何解决盒子塌陷，如何创建BFC==和===的区别，a==1&&a==2有什么方式让它返回trueObject.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请求是否可以传图片有没有遇到过前端安全问题线上问题一般如何处理

作者：刮涂层_赢大奖链接：https://juejin.cn/post/7036581158670303240来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。