cover

16年本科毕业，一直以来也没太多面试经历。

今年三月初裸辞，赶上疫情，有蛮多时间进行面试，按时间顺序面了伴鱼/好未来/OPPO/贝壳/滴滴/Shopee/头条/快手/阿里，在此特地总结一下。

前面的面试都记得很认真，到后面精神和体力值都指数级下降，面经就记录得越发简洁了……

面经

先放面经，主要贴一下与项目没太大关系的知识点考察题目

伴鱼（C轮在线教育公司）Offer

一开始投了两家教育类公司，算是我老东家的竞品，业务比较类似所以第一波来面。三轮技术面体验非常好，收到 offer 之后大前端负责人也给了很多关于选组与个人发展的建议。

一面

  1. 看代码说输出，常规 EventLoop 题目
  2. 看代码说输出，考察 JavaScript 参数按值传递
  3. 说说内存堆栈
  4. Fiber 架构
  5. 尤雨溪说 Vue3 没有采用 Fiber，依然很快，为什么 （这是个好题目）
  6. 懒加载与动态 import 语法的坑
  7. Webpack 怎么给 chunk 包命名，再说说怎么合理分包
  8. 说说怎么本地调试 npm 包，考察 npm link
  9. WeakMap 是什么，相比 Object 有什么优点
  10. 有没有写过 Webpack 插件，讲讲 Webpack 原理
  11. 老生常谈说说从输入 url 到页面加载发生了什么，面试官追问了网络应用层以下的内容
  12. Promise 的状态，Promise.all 是干什么的
  13. Promise.then.catch.then 会执行吗
  14. HTTP 缓存
  15. 简短聊了聊项目，顺着简历提到的性能优化点问了一些内容

二面

  1. CI / CD怎么做的
  2. Docker 分层是什么，怎么做
  3. Tree-shaking 原理
  4. 新版 React 的特性
  5. 对 React 做的优化
  6. Hooks VS HOC/ Render Props
  7. 给 Render props 传 pure component 有优化吗，解决了什么问题 （也是个埋坑问题）
  8. HTML 渲染机制， CSS 阻塞渲染吗
  9. 合成层怎么触发，怎么分的
  10. Node 端 Event Loop
  11. 微前端了解多少，如果让你做微前端的技术选型，你怎么考虑

三面

三面是大前端负责人，疯狂问项目，也考察了对业务的思考和看法，没有什么具体的知识点就没记了

好未来（中台）技术面通过，放弃 Offer

题目很神奇，恍惚回到了四年前找实习的时候 = = 两轮技术面但都没问什么有用的，就没怎么记

  1. CSS 定位方式， sticky 的使用场景
  2. 说说 CSS3 新属性
  3. 居中方式， flex布局怎么做
  4. script 标签的 async 和 defer 属性
  5. 怎么实现一个扑克牌翻转效果
  6. 怎么实现一个富文本编辑器

OPPO（智能搜索 base 北京） Offer

一面

  1. JSBridge 原理
  2. React 16 中 Diff 算法的变化
  3. 向一个 DOM 后面插入节点怎么做
  4. 怎么实现 lodash.get 方法

二面

  1. CDN 的特点，用 CDN 资源为什么快（分布式节点，回源，缓存，CDN 主动拉取）
  2. Vue 与 React 的区别
  3. 浏览器渲染相关的思考，怎么优化，对平时开发有什么启示
  4. Node 的特点，为什么适合高并发
  5. Node 服务部署，运维
  6. Node 框架用的什么， Koa 与 Express 相比有什么不同
  7. 简历项目挨个聊

三面

  1. 介绍一个项目
  2. 懒加载怎么做
  3. 说说其它性能优化方式
  4. 浏览器缓存
  5. 路由模式
  6. HTTPS 原理
  7. ContentType 模式，formData 里面是什么结构
  8. 数据上报怎么做，除了 img 标签
  9. git workflow，merge 与 rebase 的区别
  10. Promise 原理

四面

  1. Node 底层了解多少
  2. React 冷启动很慢，为什么，哪些地方可以优化
  3. 用户弱网环境问题排查与优化
  4. 性能数据上报怎么实现，什么时候上报
  5. CSRF 防范方法

贝壳（如视） Offer

如视是贝壳的 VR 业务线，链家、自如 app 里的 VR 看房就是他们做的，很好的团队，做的事情也很酷！

一面

  1. JSBridge 原理
  2. 开发 WebView 遇到过哪些问题
  3. 开发直播应用的心得体会（算是与简历项目相关）
  4. 如何设计一个日志分析，现场还原系统（记录画面）
  5. 实现一个单例
  6. 算法，括号匹配问题，Leetcode Easy 题目小变形

二面

  1. SSO 鉴权流程
  2. samesite cookie
  3. toB 和 toC 业务特点，区别
  4. 在上家公司遇到了什么问题，怎么解决的，技术和非技术都可以说说
  5. Electron 播放音视频踩过什么坑吗
  6. CSRF 防范方法
  7. Buffer 与 Stream
  8. createObjectURL 与 canvas.toDataURL
  9. base64 是什么

三面

聊项目为主，问了一些个人规划职业发展的问题

滴滴（网约车 C端） Offer

从晚上五点开始，连着面三轮，流程很快

一面

  1. TypeScript 里有哪些 JavaScript 没有的类型
  2. React Hooks 原理
  3. 节流防抖的使用场景
  4. Event Loop
  5. 数组与对象有哪些遍历方式，for…in 与 Object.keys 有什么区别
  6. ES6 的 Module 与 CommonJS
  7. Promise 有哪些方法，都是做什么的
  8. 按需加载怎么做
  9. 实现 Bind
  10. 实现一个乱序算法
  11. 实现一个深拷贝
  12. 跨域场景与常规解决方案
  13. HTTP 缓存
  14. 垂直居中与盒子模型
  15. 图片跑马灯效果怎么实现

二面

  1. JSBridge 原理
  2. 如何自己实现一个组件按需加载
  3. Webpack 原理，追问让说的更细一些
  4. Webpack 热更新原理
  5. Flex 布局
  6. BFC 的原理和使用场景
  7. CI/CD 怎么做的，哪些有提效
  8. 说一件让你有成就感的事情

三面

  1. TypeScript type 与 interface 的区别
  2. React Fiber
  3. Babel loader 原理
  4. Node Stream 是干什么的
  5. 写一个 ES5 继承
  6. 写一个 twoSum 算法
  7. Webpack 常用优化方式
  8. Webpack 原理
  9. React 里 key 做什么的
  10. z-index 干啥的，有哪些条件会形成层叠上下文

Shopee (卖家平台 base 深圳) Offer

疫情期间被家里催着回北方，就还是拒了 offer

一面（各种基础题，没记多少）

  1. CSS 块级元素与行内元素， BFC 等等
  2. 各种看输出题目，event loop，原型链
  3. 写一个大数加法
  4. 写一个数组拍平

二面

  1. 遍历 Object 属性的方式，哪些可以只遍历自有属性
  2. async 的异常捕获
  3. 如何并发执行 async
  4. 针对 HTTP 请求的优化方案
  5. icon 是怎么引入的， iconfont 里面怎么识别我们引入的 icon
  6. 如何检测浏览器、服务器是否支持 http2.0
  7. Sentry 这类监控怎么监控错误的，对于跨域脚本错误呢
  8. GraphQL 接口的性能与质量，单机QPS多少，单核还是多核部署（这个算问项目）
  9. 怎么做懒加载，如果我们想点击一个按钮，然后动态加载 modal，要怎么做
  10. mobx 和 redux
  11. 实现一个记忆函数

头条（广告系统）Offer

快被二面虐哭了

一面

  1. 移动端自适应方案
  2. 几道看输出的题目，考察变量声明提升，暂时性死区，原型链
  3. React 虚拟 DOM diff 算法
  4. Webpack HMR 原理
  5. 说几个 HTTP Content-Type
  6. cookie 的属性有哪些，都是干啥的
  7. React 组件间通信机制
  8. React 路由模式原理
  9. JSBridge 原理
  10. 手写实现 Promise.all，后面还有加上并发限制的几个小变形

二面

  1. 聊聊 React Fiber，Fiber 是依据什么切分任务的
  2. 显示器刷新率与浏览器帧率
  3. 瀑布流计算逻辑
  4. CSS 幽灵空白节点与解决方案
  5. CSS 行内元素的 baseline 问题
  6. 写个深拷贝
  7. Object.create 是干啥的，自己实现一个
  8. JavaScript 里的包装类型
  9. 聊聊 JavaScript 的语法解析， JIT 等等
  10. WebAssembly 了解么，是干啥的
  11. 说说最近很火的面试题 a == 1 && a == 2 && a == 3
  12. 聊聊尾递归
  13. HTTPS 原理
  14. HTTP 缓存

三面

  1. 介绍一个项目
  2. 这个项目还有哪些可以做的优化，技术优化，产品优化等等
  3. 错误监控的实现原理
  4. 数据上报的几种方案比较
  5. 挨个问了问简历里大佬比较感兴趣的内容

快手（中台）Offer

一面

  1. 聊了很久项目，各种项目
  2. Webpack 常见优化手段
  3. Webpack 里有几种哈希，都是干什么的
  4. 实现 LRU

二面

  1. 介绍一个项目
  2. 介绍一下 React Hooks，相比于 HOC 它有什么特点，解决了什么问题
  3. Mobx 如何监听到 Object array 的元素属性变化
  4. 开发移动端与 PC 端项目有什么不同
  5. JSBridge 原理，怎么解决安全问题
  6. 实现 Promise.all，加上一些变形
  7. 写个 treeToArray，再写个 arrayToTree

三面

  1. 移动端适配方案，rem 解决了什么问题，为什么要采用 rem
  2. 只用原生 API 实现一个拖拽跟随效果（好题目，又扩展地问了很多问题，有空再写写）
  3. 除了你一面说的那些，Webpack 还有什么优化手段（这个问法好厉害…）
  4. 深入考察了一波 CSS 绝对定位，相对定位，块级元素的本身概念
  5. 拐着弯问了个 @import 的特性和坑

阿里（钉钉 base 北京）HR面挂

作为面试季的结束，这个结果挺酸爽的……

总体感觉钉钉重点考察候选人对业务甚至商业模式的理解，hr 面都详细地问了做的事情对业务的帮助与影响，当前业务模式下技术有哪些手段可以降低项目成本等等

由于已经到了面试季的最尾声了，题目几乎都没怎么记，其实挺多知识点的切入，扩展方式都很赞

一面

  1. 聊项目
  2. React Fiber
  3. 比较一下 Mixin / HOC / Hooks
  4. 数据劫持的几种方式
  5. 手写 compareVersion 两种解法

二面

  1. 聊项目，有没有调研过业界竞品的技术方案
  2. CI 怎么做的， E2E测试的具体收益，适用于哪些场景
  3. 扫码登录的实现逻辑
  4. JSBridge 原理

三面

  1. 各种聊项目，对过往工作经历里的一些业务理解（各种对业务的理解，有哪些深挖的点）
  2. 聊虚拟 DOM 和 diff 算法，与真实 DOM 对比
  3. 聊闭包
  4. 聊工程化
  5. 聊 Web 安全
  6. 聊 Go 语言
  7. 聊你对钉钉的看法和对业务，前景理解

四面

这一面聊技术的内容不多，更多还是一些职业规划，技术规划，和业务方有分歧怎么处理这些软素质相关的问题。

四面之后本来还要有一轮大佬面，但是时间没排上就先进行 hr 面了，hr 面了一个半小时，然后就挂了…

体会

本来春节期间趁着在家还着重刷了一波算法的，但还是菜，面试期间手撕算法的场合也不多。

除了以上列出的技术考察点，还是聊项目更多，所以功在平时，好好做项目，多思考是必要积累。大多数面试里都是一轮纯基础面，类似于题库抽题的方式来考察各种基本点。第一轮通过之后都是聊项目为主，穿插着一些技术点面试也是很虚的“聊聊xx”，在我看来这种提问方式很考察对技术点的纵向理解，要自己扩展着一直说说说才行，这种题目也达成了一问一答的话就会减分，在面试官那里看起来是卡壳的。

对于贴在简历里的项目而言，项目的方方面面自己都要心里有数，最基本的打包体积有多少，首屏时间有多少，除此之外，针对项目在业务上下游中的作用也要有所了解和思考。针对面试官对项目的提问，一些场景的方案设计也要尽量做到，从业务出发，主要为业务考虑，权衡多种方案，给出自己的答案。很多时候，思考过程比答案更重要，毕竟面试并不是考察机器记忆。

还是要继续努力才行~