时隔一年半,我,一个卑微的前端菜鸡,又来写面经了

一面

1. 之前做过 SSR 是哪种服务端渲染，是同构么
2. 介绍一些上一份工作主要都负责哪些事情
3. 介绍一下单例模式和它在前端的应用
4. 介绍一下原型链
5. 介绍一下前端的继承方式
6. HTTP，TCP，七层网络结构，讲一下
7. chrome 浏览器最多同时加载多少个资源，那如果想同时加载更多资源应该怎么办
8. http2 的多路复用是什么原理
9. 实现一个改变 this 指向的 call 方法，介绍一下原理
10. 求斐波那契数列第 N 项
11. 跨端有了解过么，Taro，uniapp 有写过么
12. 有 Devops 相关的经验么
13. Docker 和 k8s 有相关经验么
14. 了解 JSON Web Token 么，它和其他的鉴权方式有什么区别
15. 网络安全有了解么，CSRF 如何防御，SameSite 有哪几个值

二面

1. 之前的工作在每个阶段给你带来了哪些成长
2. 你之前做过的比较有亮点的项目
3. 如果你还在之前的部门的话，你有哪些事情是还想做的
4. 对 TDD 的看法是怎样的
5. 移动端一套代码适配多端是如何做的

二面前面聊了聊项目，最后一直在给我将部门未来的发展趋势，说了很久，说实话我听得有点困了，然后不知道为啥给我挂了

1. 介绍一个比较难的项目
2. 如果用户希望自己定义一个颜色生成对应的皮肤，应该怎么制定方案
3. webpack 迁移 Vite 遇到过哪些问题
4. Vue 和 React 的区别
5. Vue 和 React 的 Diff 算法有哪些区别
6. 编写一个方法，判断一个字符串是否是合法的 XML

const str1 = "
123
"; // true
const str2 = "
123
"; // true
const str2 = "
123
"; // false

1. 在一个矩阵中查找一个字符串，可以上下左右移动，但是不能回头，如果能找到这个字符串返回 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. 青蛙跳台阶，一次可以跳 1 阶，2 阶或者 3 阶，如果想跳上一个 N 阶共有几种跳法

前面吹逼时间有点长，导致后面三道算法题做题时间不太够了，挂了

一面

1. 之前做过的有难度的项目
2. 浏览器缓存机制
3. HTTPS 介绍一下
4. 节流和防抖的原理是什么
5. 事件循环介绍一下
6. 输出结果

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");

1. 0.1 + 0.2 为什么不等于 0.3，为什么会有误差，如何解决
2. 大数加法如何实现
3. v-for 为什么会有 key
4. 为什么 vue 的 data 用一个函数而不是一个对象
5. 虚拟 DOM 介绍一下
6. diff 算法介绍一下
7. webpack 和 Vite 的区别，迁移过程是怎么样的
8. 前端工程化你是怎么理解的

二面

1. 在之前公司业务和技术上主要都负责哪些
2. 技术选型和技术架构都是怎样的
3. 研发流程上有做效率工具么
4. node 的框架用的是哪个，内存监控是怎么做的，你了解过哪些 node 的框架
5. vue 和 react 都看过哪些部分源码，v-model 的原理是什么，虚拟 dom 的优缺点是什么
6. typescript 相比 JavaScript 的优点是什么
7. export 和 module.exports 的区别
8. node 的内存泄露是如何监控的
9. node 读取文件的时候，fs.readFile 和 stream 有什么区别
10. 你的优势和劣势是什么

聊了好多 node 监控相关的，说实话没咋接触过

一面

1. 介绍有难点的项目
2. 使用 Vite 遇到过哪些问题
3. esbuild 有了解吗
4. 当你们把体量很大的项目拆分后，有没有遇到拆分之前没有的问题
5. 组内工具包你们是如何保证向下兼容的
6. 以下两种写法有什么区别，会出现什么效果，如果不一样的话如何能得到同样的效果

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>
    
  );
}

1. 问输出

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);
  });

1. 写个二叉树遍历，深度优先广度优先
2. Typescript 类型了解过吗，infer 是做什么的，实现一个 Pick 和一个 Omit

二面

1. SSR 和 CSR 的区别，Nuxt 这类的 SSR 方案和直接渲染 ejs 这类方案有什么本质的区别
2. Vue 和 React 使用的比重是怎样的，这两者各自的优劣介绍一下
3. PureComponent 会引入什么问题，什么情况下会需要用到它
4. Vue 的单文件开发模式，这个解析 vue-loader 是如何实现的。
5. 如果 template 语言换掉的话，会如何处理。
6. script 的部分会如何处理，由于 babel-loader 是只能针对 js 类型的文件进行转化，那.vue 文件中的 script 标签是如何被 babel-loader 读取的。
7. vue scoped 是怎么实现的，dom 上的哈希是如何和 style 中的哈希对应起来的，又是如何保证每次生成的哈希不变的
8. babel.config.js 和.babelrc 有什么区别，应该在什么场景使用，同时使用的话会出现什么现象
9. Vue 调用 render 函数的时机是在什么时机被触发的，后续状态变更导致 render 又是谁触发的
10. Vue 和 React 在数据更新上的差异，Vue 这种数据劫持的方式会不会带来额外的问题，Vue3 在这些问题上有优化么
11. 和forceupdate 都做了哪些事
12. 异步更新 DOM 这个操作，Vue 和 React 都是如何实现的，Vue 的异步处理还有其他方式可以做么，除了 MessageChannel 还有其他和他用法类似的 API 么
13. 公用的代码如何做提取，如何判断一个资源是否应该被提取
14. Portal 除了做了把组件提到对应的 DOM 下之外，还做了哪些事
15. 用什么方式发请求，axios 是个同构的工具，它是如何实现区分 Node 和浏览器环境的
16. axios 内部如何把 xhr 的 callback 转换为 promise 的，如何处理请求异常的

二面问得比较细，很多地方的细节其实没太关注过，挂了

一面

1. 实现 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";

1. 输入一个字符串，遇到方括号则对方括号内的字符串重复 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

二面

1. Vue2 和 3 的区别，依赖收集和派发更新都是如何做的，vue 是如何保证父组件重新渲染不导致子级重新渲染的
2. webpack 异步加载和分包的原理是什么
3. Vite 依赖与预构建是把所有的用到的依赖都合并到一起还是每个都是单独的包，一个包安装了多个版本问题如何处理？
4. node 的进程管理了解过么？多进程都有哪些方案？
   4.1 worker 挂了如何能监测到？
   4.2 IPC 通信是什么？
   4.3 如果用 cluster 启动多进程后，子进程是多个端口还是一个端口？
   4.4 一个 worker 是一个进程吗？它有独立的 pid 么？
   5.5 进程之间数据通信如何做
   
5. node 内存泄露是如何监控的？原理是什么？内存是监控进程的还是监控 docker 的？
6. webpack 打 polyfill 都有哪几种方式
7. http2 都有哪些应用，多路复用和 1.1 版本 keep-alive 有什么区别和联系，如果 http1.1 服务端需要按顺序处理请求，那为什么有的时候在一个页面里看图片，有时下面的图片会先出来，http pipeline 有了解吗，http 流传输有了解吗
8. 前端的工程化都做了哪些事情？git CI/CD 都做了哪些事？比如 lint，安全检查，圈复杂度都有关注吗？lint 的规则是你们业务自己定制的吗？组件测试和自动化测试有做吗？上线的流水线有配过吗？小流量上线是如何做测试的？
9. Taro 多平台的兼容是怎样做的，Taro 是怎么把 react 代码编译成运行时，运行时是什么样的代码，又是如何让它在原生小程序的 DSL 中执行的
10. 前端监控报警是怎么做的，都有哪些监控指标，报警的策略是怎样的，关注哪些指标和维度，白屏如何监控
11. 都做过哪些优化，动画的剪包如何做，FPS 是如何监控的

这个真的是有点。。。难，很多完全是我知识盲区，尤其 node 的部分和 Taro 的部分，挂得服气

一面

1. 主要做过哪些项目
2. Vue 兄弟组件传值方式都有哪些
3. 介绍一下 Vuex
4. 介绍一下 diff 算法
5. Websocket 介绍一下，它和 http 有什么关系
6. 介绍一下 https
7. 用三个正面的词和三个负面的词评论一下你自己
8. 介绍一下你最近读过的一本书
9. 有没有做过哪些和代码没关系的但是比较精通的事情
10. 你对下一份工作的期望是怎样的

二面

1. 对上家公司的感受，自己的成长，不满的地方
2. 之前的团队规模是怎样的
3. 之前的业务是怎样的
4. 对下一份工作的期望是怎样的

一面

1. 对下一份工作有怎么样的期望，你对这个规划做过哪些努力
2. 介绍一个有难点的工作
3. 为什么之前要把项目从 SSR 迁移到 CSR
4. 实现一下 koa 中间件原理，如何判断调用了多次 next 并抛出错误
5. 事件循环介绍一下，Node 事件循环中如果在 Poll 阶段不停地产生新的事件会怎样
6. Node 中如果要对很大的字符串做 JSON.parse 应该怎样处理
7. 讲一下浏览器中的重绘和重排
8. 介绍一下浏览器的合成层
9. 如果一个页面需要同时适配 PC 端和移动端，应该怎么做，rem 和 vw 方案有什么区别
10. typescript 定义一个对象应该如何定义，如果定义对象的 key 必须是字符串，应该如何定义
11. Vue 的响应式原理介绍一下，Watcher 的 cleanDeps 是做什么的
12. computed 和 watch 是什么原理
13. 如果 data 里有一个对象，不希望它被深层监听，需要怎么做
14. 给定任意二维数组，输出所有的排列组合项。比如 [['A','B'], ['a','b'], ['1', '2']]，输出 ['Aa1','Aa2','Ab1','Ab2','Ba1','Ba2','Bb1','Bb2']
15. 给出任意一个二维数组，要求输出数组元素的所有排列组合。如[['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"]

二面

1. Node 服务迁移到轻服务主要都做了什么
2. 你们的 RPC 用的哪个框架，grpc 和 thrift 的区别有了解么，protobuf 有了解吗
3. serverless 有多少了解，它适合做什么，都用它写过什么
4. 客户端提供 API 版本不一致这类兼容性问题你是如何做的处理
5. webpack 迁移 Vite 有遇到什么问题，snowpack 有了解过么，它和 vite 有什么区别
6. 对 React 熟悉么，hooks 有哪些最佳实践
7. 性能优化都做过哪些
8. 一个页面的性能指标都有哪些，你是如何做监控的，如何监控 node 服务的性能监控
9. 实现一个二叉树中序遍历的迭代器，时间复杂度最好是多少，最差是多少，空间复杂度是多少

三面

1. 实现一个函数，传入一个数组，数组中每一项代表一个线段的起止位置，计算所有线段覆盖的长度总量，并编写测试用例

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. 计算一个矩阵内，所有 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

1. Vue 从修改属性到渲染到页面上都经历了什么
2. 详见代码

/\*\*

- 目标:
- 实现一个简单的观察者模式(或发布-订阅模式)
  \*/

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新值
    **/

1. 如果需要你实现扫码登录、单点登录，有什么方案 做的业务不太感兴趣，后续没有继续面

1. 为什么之前用 SSR，为什么又从 SSR 迁移成 CSR
2. 离线包的原理是什么
3. React hooks 比 class component 的优势在哪，如何在 hooks 中实现 shouldComponentUpdate 这个生命周期，有实现过自定义的 hooks 么，useCallback 和 useMemo 的区别是什么
4. 为什么你们移动端选择 vue，pc 选择 react，这两个在性能上有什么区别么
5. 有做过哪些性能优化
6. vite 的原理是什么，迁移 vite 有遇到什么问题么
7. serverless 有什么了解，它背后的实现原理是什么，你用它做过哪些东西
8. 反转链表
9. 一个字符串的全排列 问题基本都答上来了，题也都写出来了，但是不知道为啥挂了

一面

1. 主要的技术栈
2. 主要都是和客户端如何协作
3. Vue 新版本特性有了解么
4. 在工作中有用到什么设计模式么
5. typescript 装饰器有了解么，类装饰器的 this 是如何处理的
6. 有用过抽象类么
7. 举例一下 Map 和 object 的区别，如果需要一个字典的需求，都是 key: value 的形式，那应该怎么选择这两个呢
8. Map 和 WeakMap 有什么区别
9. js 垃圾回收机制有了解吗
10. 二分查找的时间复杂度是多少，简要描述一下过程，O(logN)是怎么算出来的，TopK 的时间复杂度是多少，快排的时间复杂度是多少
11. ES5 的继承都有哪几种，主要介绍一下组合寄生，下面这个的输出是什么，this 指向谁

class A {
  constructor() {
    console.log(this.name);
  }
}
class B extends A {
  constructor() {
    super();
    this.name = "B";
  }
}
const b = new B();

1. 输入一个二叉树和两个 node，输出这两个 node 的最近公共祖先

二面

1. 如果让你实现一个计算器，都需要考虑哪些问题 比较开放的一个题，边说边写

三面

1. 看新的机会的时候你更看重哪些方面，对哪些方面会感兴趣
2. 当前薪资
3. 接触过哪些排序算法，归并排序的思路是什么，一个数组做归并排序的话，一共经历了多少次合并
4. 最有挑战的项目是什么样的
5. 有没有经历过比较痛苦的阶段
6. 最近有在学什么新的东西么
7. 之前的工作中有没有你比较欣赏或者崇拜的工程师
8. 前端缓存策略，last-modified 和 etag 有什么区别，分别的适用场景是什么

一面

1. 根据我的简历逐个捋项目
2. 对一个树形结构遍历，输出所有叶子节点
3. 写一共获取 URL 后的参数的方法 很简单的一轮面试

二面

1. 在上家公司做的主要业务是哪些，你负责哪些，哪些是迭代比较多的
2. 换肤方案你们具体是如何实现的
3. 国际化方案是如何做的
4. 页面间同步状态一般都有哪些方案，分别的应用场景都是哪些
5. localstorage 的会不会出现不同项目的 key 覆盖别人的 key 的问题，如何解决
6. 业务的技术选型是如何考虑的
7. 写一个发布订阅模式的 on/emit/off
   7.1 如果需要把订阅者执行成功和失败的方法分开，需要怎么做
   7.2 如果希望失败的可追溯，找到是哪个订阅者的报错，需要怎么做
   7.3 实现一下 before 和 after 方法，可以添加一些前置的和后置的订阅者
   7.4 现在希望给所有的订阅者加打点上报的功能，并且提供全局的开关，需要如何设计
   7.5 如果需要给某一个订阅者单独加一个打点，需要如何设计
   
8. 如果想给一个对象上的所有方法在执行时加一些打点上报的功能，如何做

这一轮面试面了一个半小时，真的就是在一个功能上加来加去，其实想想还是挺考验代码健壮度的

三面

1. 为什么考虑做前端
2. 做好一个产品工程师或者软件工程师，核心在于哪里
3. 介绍一个有代表性的项目
4. 主要都负责哪些业务，工作的 C 端和 B 端的占比是怎样的
5. 目前都看了哪些机会，下一份工作是怎么考虑的，希望做哪个方向
6. 整体开发流程是怎样的
7. 工作节奏是怎样的
8. 个人优势和缺点

一面

1. 以什么样的心态找下一份工作，对下一份工作有什么样的要求
2. 有什么比较感兴趣的业务，你在这个业务中想要做什么
3. 如果希望 DOM 中的一个值和 js 中的变量双向绑定，使用原生 js 可以怎么做，React 和 Vue 分别又都是怎么做的
4. proxy 和 defineProperty 的区别是什么，各自的优势和缺点是什么
5. 浏览器发请求和 node 发请求都有什么区别，浏览器都为发请求做了哪些默认行为
6. 如何理解线程和进程
7. 为什么 Vite 比 webpack 快很多，ESM 和 commonJS 的区别是什么，为什么 ESM 加载会更快，如何理解 ESM 的静态
8. 都做过哪些打包的优化
9. 在 CI/CD 中都需要做哪些事情可以把流程做得更好
10. 最近在学习什么

二面

1. 介绍一下你负责的业务
2. 为什么要对一些项目做重构
3. 组件库你们是如何做的，你在里面是什么角色，组件与组件之间的调用关系如何处理
4. 刘海屏你们如何适配的
5. 有对小程序做过从打开到完全展现这个流程的监控么
6. 讲讲对 TDD 的理解
7. 有用到敏捷开发么，对代码质量保障效果如何
8. 提升开发效率你们有做过什么么
9. 性能上优化有做过哪些事情
10. 平时如何学习
11. 这次换工作考虑的是什么
12. 如果不考虑钱的问题，你最想做一个什么样的产品

一面

1. 输出，原因，解释一下调用栈和作用域链的关系

let a = 3;
function func(a) {
  a = 10;
  console.log(a);
}
func();
console.log(a);

1. 实现一下 Promise.all
2. 数组转成嵌套对象

["a","b","c","d"] => {a: {b: {c: {d: null}}}}

1. 解释一下事件循环
2. 解释浏览器渲染机制：重绘、重排，如何优化？
3. Vue 和 React 对比

二面

1. 在上家主要做哪些业务
2. 对 B 端和 C 端在技术开发上侧重点都有哪些
3. 对技术选型是怎么考量的
4. 下一步有哪些规划
5. 如何能创造出一个技术产品
6. 请写一个抽奖程序 ，已有参与抽奖的员工工号组成的数组 staffIds。
   规则 1：同一员工不可重复中奖。
   规则 2：每轮执行抽奖程序，入参是本轮要抽取的中奖人数 n，将中奖人工号打印出来
7. webpack 迁移到 Vite 有什么优势，遇到过什么问题，迁移后如何测试

三面

1. 在上一份工作主要负责哪部分业务
2. 前后端架构是怎样的
3. 怎么理解 SSR，在项目中如何应用
4. B 端都做过哪些内容，架构是怎样的

一面

1. 浏览器请求头和响应头都能记起哪些，都是做什么的
2. 协商缓存与强缓存
3. 响应头和跨域相关都有哪些，之前都是如何解决跨域的
4. Access-Control-Allow-Origin 用 * 和指定域名的区别是什么
5. 跨域是否允许携带 cookie，如果希望携带 cookie 需要如何做，如果 a.com 是我的域名，向 b.com 发请求，带的是哪个域名的 cookie
6. 请求头的 host，origin，refer 的区别是什么
7. 在什么场景下会发起 options 请求
8. !important 在什么场景用，css 选择器权重是如何计算的
9. 盒模型的边距叠加，如何解决盒子塌陷，如何创建 BFC
10. ==和===的区别，a==1&&a==2 有什么方式让它返回 true
11. Object.create(null)和直接创建一个{}有什么区别
12. new 一个函数做了哪些事
13. 对事件循环的理解
14. Vue 和 React 源码读过哪些部分，印象最深刻的是哪些
15. 简单介绍以下 Vue-router 的原理
16. diff 算法简单介绍一下
17. 前端工程化做过哪些
18. 如何做到的逐步减少项目中的 typescript 报错
19. 写过 webpack 插件么
20. babel 转换的原理是什么
21. 性能优化做过哪些
22. 离线存储是如何做的
23. 都用过哪些设计模式
24. 对线上各类异常如何处理，对线上的静态资源加载失败如何捕获
25. node 多进程间通信是如何做的
26. koa 中间件原理实现是如何做的
27. 如何界定一个依赖包的安全性
28. node 做过哪些性能优化

二面

1. 在 git CI 做过哪些事，做的动机是什么
2. 无障碍做过哪些事
3. 业务上，前端和后端的工作占比是怎样的
4. 有升级到 Vue3 么，觉得 Vue 的优点是怎样的
5. Vue 和 React 觉得哪个更优雅
6. 有没有做过给团队开发提效的技术方案
7. 在上家公司最大的成长是什么
8. 今年的全年 OKR 是什么
9. 下一份工作有什么期待

三面

1. 有亮点的项目
2. 脚手架用的是什么，有自己做过脚手架么，Vite 的原理是什么，如何区分环境
3. Vue3 的组合式 API 有了解么
4. typescript 和 Vue2 遇到过兼容性问题么
5. 为什么要把 SSR 迁移到 CSR
6. 离线包的原理是什么，有做离线包增量更新么
7. bridge 原理有了解么
8. 对页面的异常监控有了解吗
9. 介绍一下 React 的优化
10. 性能优化都做过哪些
11. 写一个 EventBus，包含 emit/on/off
12. 之前工作中的亮点
13. 组件库有做过吗

一面

1. 做 2B 多一些还是 2C 多一些
2. 介绍一下盒模型，怪异模式和标准模式有什么区别
3. 如何做 CSS 屏幕适配
4. 移动端有没有遇到过滑动穿透的问题
5. 有没有遇到过移动端浏览器兼容问题
6. js 的数据类型都有哪些，有什么区别，为什么基本数据类型存到栈但是引用数据类型存到堆
7. 数据类型常用的判断方式都有哪些
8. ES6 都用到哪些
9. Promise 都有哪些方法
10. Promise 的 then 的链式调用，返回的一个新的 promise 的状态是什么
11. await 和 promise 的关系，分别的应用场景有哪些
12. esmodule 和 commonjs 区别是什么，还接触过其他的模块化方案么
13. 浏览器都有过哪些了解，内核都有哪些，chrome 浏览器开启一个页签时开启了多少个进程，对应开启了哪些线程
14. 异步加载 js 的方式都有哪些
15. 加载 css 和 js 时会阻塞 dom 渲染么
16. 强缓存和协商缓存谁的优先级谁高，区别是什么，强缓存和服务器有通讯么，没有通讯的话有状态码么，状态码是谁返回的，缓存是存到了哪里
17. cookie 都有哪些属性
18. samesite 作用是什么
19. cookie 和 storage 的区别是什么
20. http 都有哪些版本，1.1 有什么不好的地方么，队头阻塞是什么引起的，2.0 有没有完全解决了队头阻塞问题
21. get 和 post 有什么区别
22. 工程化都做过哪些
23. Vue 和 React 的区别
24. SSR 和 CSR 的区别是什么，分别的适用场景是什么，什么叫同构，除了 SSR 还有什么方案可以解决首屏渲染问题
25. 有写过 webpack 插件么
26. babel 配置过么，preset 和 plugin 谁的优先级高
27. 项目代码规范是如何做的，如何避免有人本地跳过代码规范
28. git commit 的有限制么
29. eslint 和 prettier 的冲突是如何解决的
30. CI 和 CD 的区别，除了 gitlab 的 CI/CD 之外还接触过哪些
31. docker 有了解么，有实际用过么

二面

1. 之前主要是 Vue 还是 React，用哪个多一些？有看过一些源码么
2. Vue3 和之前版本的差异在哪儿
3. 之前小程序是如何开发的
4. Node 了解过哪些，之前的 SSR 都是如何做的
5. 接下来工作有哪些期望
6. wasm 之前有哪些了解
7. 屏幕内有一个矩形，有一条对角线，如果在矩形上点击，如何判断点击的位置是在对角线上方，还是下方，还是点到了对角线上
8. 如果想给这个矩形画个对角线，可以有哪些方式
9. 之前的数据可视化是如何做的
10. 有没有一些技术沉淀的东西，比如在技术社区的交流或者写一些文章
11. 除了编码以外，有没有做过管理方面的事情
12. serverless 有哪些了解
13. 现在工作分工的职责定界是怎么样的
14. 前端工程化都做了哪些

一面

1. 主要技术栈有哪些
2. 主要业务有哪些
3. 主要的技术方案是什么样的
4. SSR 迁移到 CSR 的背景是怎样的，各自的优势是什么，为什么服务端渲染页面会比客户端快
5. 首屏性能优化都有哪些
6. 都有用到过哪些协议
7. 遇到的无障碍的挑战是哪些，屏幕阅读器功能是如何实现的了解吗
8. 国际化做过哪些
9. 都做过哪些方面的重构，重构都做了哪些优化
10. webpack 迁移 vite 遇到了哪些问题
11. 对 serverless 有哪些了解，都用它做了哪些事情
12. 测试驱动开发是怎么样的流程，有什么方案可以提高 TDD 的效率
13. 前端安全都遇到过哪些问题
14. https 讲一下
15. 常见的 HTTP 状态码都有哪些
16. 浏览器进程模型有了解吗
17. 浏览器渲染流程是怎样的
18. 事件循环介绍一下
19. Vue 的插槽的实现原理是什么
20. 都做过哪些性能优化

二面

1. Vue 和 React 哪个写的多一些
2. Vue 的组合式 API 的优势是什么
3. Vue2 的重复逻辑封装一般都有哪些方式
4. 如果是需要通过调用 API 显示 UI 组件，这种需要如何实现（比如 Toast、Dialog）
5. useCallback 和 useMemo 的区别和使用场景
6. 对一个公共组件或者工具做打包，一般都需要产出哪些范式的文件
7. commonjs 和 esm 的模块引入和加载执行的区别是什么
8. node 调用 RPC 是怎么做的，对 thrift 有哪些了解
9. SSR 和 CSR 的优势分别是什么
10. Node 用的什么框架
11. 如果页面中有大量的 DOM 更新，导致页面变卡，有哪些方案可以优化
12. 换肤方案是如何做的
13. 如果在 js 中执行 location.href = url，这个行为有可能会有哪些安全问题
14. CSRF 原理，整体的攻击链路是怎样的，都有哪些解决方案
15. XSS 都有哪些方式，如果过滤都需要过滤哪些内容

三面

面试官迟到五分钟没有任何道歉，让我开摄像头自己不开，面试全程一直在 pua，问我有挑战的项目，我一句话得被打断三次，极其没有礼貌。以下是面试官原话

你这个项目我理解也没什么难点啊
你没做过客户端你不懂
为什么你需要解决代码里有很多报错的问题，我理解头条的程序员应该不会写出都是报错的代码吧
头条对你的培养可能真的不够
我没有觉得头条不好的意思，我只是觉得头条对你的成长可能真的没什么帮助
你们这个架构本身就是有问题的
我认为你在计算机底层思维上还是有很大问题的
我这边也有很多头条来的程序员，他们都用过这个，你们那边怎么没用过

一面

1. 为什么选择做前端这个行业
2. Vue 和 React 的区别，项目是如何做选型的
3. 介绍一个之前重构的项目
4. typescript 的优缺点
5. 有没有经历过需求无法实现或实现难度较大的情况，这种情况如何处理呢
6. 之前做过最有挑战的问题
7. 实现一个类似微信聊天列表页的布局，有如下需求

1. 有一个吸顶的栏，内部的内容不需要实现
2. 一个吸底部的按钮栏，内部有四个按钮，按钮功能不需要做，只需要实现布局
3. 中间的列表可滚动
// 多说一下，这个其实考察的是画页面的基本能力和细节，比如假如使用fixed布局，滚动条会是全屏的
// 但是如果使用absolute，限制屏幕高度100%，中间局部滚动就可以把滚动条限制到中间部分，甚至可以隐藏滚动条
// 面试考画页面的话，一定要多注意这类细节，还有比如BEM命名、1px边框等问题是否有意识，这些都要考虑

1. 最长递增子序列 力扣
2. 最长连续递增子序列 力扣

二面

1. 之前主要做的业务都是哪些
2. 团队的规模和分工是怎样的
3. 之前做过的有挑战的项目
4. SSR 为什么要迁移到 CSR，如果不迁移的话如何能做到 CSR 离线包的效果
5. 搜索旋转排序数组 力扣

三面

1. 之前做过的有挑战的项目
2. Vue 和 React 的区别
3. Vue 数据双向绑定原理
4. 页面第一次加载会触发哪些 Vue 的生命周期
5. Vue 的 filter 原理有了解吗，如果需要你实现一个 filter，可以实现把一个字符串首字母大写的功能，你要如何做（最开始问原理，导致我后面理解错了，我以为是让我实现一下 Vue 的 filter 功能了，然而人家其实要的是'abc' => 'Abc'的一个方法，但是面试官对我的实现持肯定态度）
6. 用 css 实现一个 Tooltip：界面上有一个 Button，鼠标 hover 上去后会在 Button 上方显示一个 tooltip，这个 tooltip 有圆角，下方有一个小三角形
7. 对闭包的理解，闭包的适用场景和缺点
8. 从输入 URL 到页面渲染都发生了什么
9. 英语测试（说实话我没太听明白，我英文水平很差，直接跪了）

四面

1. 做过的有挑战的项目
2. 无障碍都做过哪些
3. 合并两个有序数组 力扣
4. 合并多个有序数组（这题里我解答完之后自认为时间复杂度是 O(n2)，循环中用到了 shift 这个方法，面试官问我这个的时间复杂度是多少，我说是 O(n)，面试官说有什么办法可以解决这个么，我说可以基于原有的方式倒着循环，这样就可以用 pop 代替 shift 了，面试官问我为什么 pop 时间复杂度是 O(1)，我说不知道，面试官让我有时间可以去了解一下均摊算法）

五面

1. 下一份工作的期望
2. 有挑战的项目
3. SSR 迁移 CSR 的原因，遇到过哪些问题
4. LRU 算法 力扣 （这个题我最开始用 Map 做的，面试官跟我说如果不用 Map，如何实现每次查询和删除都能做到 O(1)，我没思路，面试官问我查询 O(1)用什么，我说用哈希，问我插入删除 O(1)用什么，我说用链表，可我不知道怎么结合到一起，面试官提示我可以用双向链表，然后我才做出来的）

六面

1. 英语的自我介绍
2. 为什么会选择做前端，做前端的动机是怎样的
3. 在追求极致体验方面做过哪些
4. 都会关注哪些指标，如何做检测
5. 之前的工作中迭代速度是怎样的
6. 未来三到五年的规划是怎样的
7. 有没有做过自动化测试方案，对于兼容性如何做自动化测试
8. 对于 UX 还原度，应该如何高效测试
9. 一个 PC 页面，如果需要适配手机屏幕，都有哪些需要注意的，可能需要解决哪些问题，需要如何去测试

1. 主要技术栈是哪些
2. 之前参与的重构的项目有哪些有难度的地方
3. SSR 迁移到 CSR 是基于什么考虑
4. 项目的体量大概都有多大
5. 项目优化或者重构后，一般从哪些方面评判效果好还是不好呢
6. bridge 的原理有了解么，有遇到过什么问题么，在一些没有 bridge 的场景里有没有做过特殊处理
7. 做过唤起 app 么，有遇到过什么问题吗，如何判断唤起是否成功
8. 国际化采用的什么方案
9. 换肤方案是如何做的
10. 小程序和 H5 都有哪些区别，有看过小程序底层如何实现的么
11. 为什么要做 Vite 迁移，迁移有遇到了什么问题
12. 写一个 React Hooks，用来倒计时，传入时间，返回 start、pause、restart、isRunning
13. 实现一个方法，传入一个 url 的数组和一个数字，对 url 进行请求，并根据数字限制最大请求数

一面

1. 对下一份工作有什么期望
2. React 阅读过哪部分源码
3. Vue 和 React 的区别
4. proxy 和 defineproperty 的在 Vue 中区别是什么
5. Vue-router 原理
6. js 和 ts 混合开发有没有最佳实践
7. Vite 为什么会比 webpack 快
8. Rollup 和 webpack 打包结果有什么异同
9. 问输出，解释一下函数调用栈和作用域链的关系

function bar() {
  console.log(project);
}

function foo() {
  var project = "foo";
  bar();
}

var project = "global";
foo();

1. 问输出，如果希望循环中输出 123，有哪些方式可以改

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(new Date(), i);
  }, 1000);
}

console.log(new Date(), i);

1. 对 js 的异步是如何理解的
2. 如何理解闭包
3. 求一个字符串的不重复的最长字串的长度 力扣
4. 判断一个对象是否是循环引用对象
5. 团队内部 eslint 的规范是如何指定的
6. 从输入 url 到渲染页面，都发生了什么

二面

1. 主要负责的业务
2. 换肤方案是如何做的
3. 国际化方案是如何做的，都做了哪些语种
4. 离线包的方案原理是什么
5. node 主要都做了哪些
6. 安全问题遇到过哪些，CSRF 的加签名是如何做的
7. 单向链表反转
8. 快速排序

三面

1. 主要负责哪些业务
2. 有过带人的经验么
3. 输出数组中频率第二高的元素的下标
4. 幂等与非幂等的区别
5. get 请求是否可以传图片
6. 有没有遇到过前端安全问题
7. 线上问题一般如何处理

   “分享、点赞、在看” 支持一波👍