高德滴滴美团网易快手腾讯金山 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，它为啥叫 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
$attrs和$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 在这些问题上有优化么
$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]]";
// 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 么？
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],
]); // 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请求
!important在什么场景用，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请求是否可以传图片
有没有遇到过前端安全问题
线上问题一般如何处理

作者：刮涂层_赢大奖
链接：https://juejin.cn/post/7036581158670303240

链接: https://fly63.com/article/detial/11110

最新大厂前端面试