一年前端社招面试总结，入职阿里菜鸟

前言

本篇文章也是认识的一位好朋友「东仔」，也是和Fly一年的前端，最近在面试和他交流了很多，还有雨哥，后面继续约他写一份面试题。最近Fly哥也在疯狂面试，差不多大中厂小厂、得物、B站、爱奇艺、蚂蚁、字节、阿里「有的面完了，有的offer有的还在流程中。等我确定了，我也写一份面经，给大家参考，整体和下面差不多，但是我会有点可视化的，所以最近」更新的可视化文章比较少，精力有限，等我「调整结束」了依旧是高质量文章送上。

介绍

❝个人背景：2020年毕业，二本学校科班前端，一年出头前端经验。上家公司主要做的是 Vue2 PC端的产品，捎带一些可视化方向的技术。技术栈以 Vue2 为主，有自行学习 React、Node.js 、Webpack、 Flutter 、Vue3 、TypeScript 等。

❞

在卷了一年多后，希望能在沪杭找一家比较好的公司以及团队来进一步的提升自己，于是在 8 月中旬离职，远程面试了三周左右，终于收获到了满意的 Offer。

期间总共面试了大约 10 ~ 15 家大中型公司，其中携程、申通、网易云等几家由于面试时间过晚，均在一面前后自行放弃了后续面试。

阿里菜鸟、滴滴杭州、B站、华为西研所、星环、英语流利说、阿里乌鸫等均面试通过，最终选择了入职阿里巴巴菜鸟网络。

说明

各公司技术面大多是 3 轮，较少为 2 轮或 4 轮，视频面试占多数（方便共享屏幕手写代码），也有少数为电话面试，有 3 家左右公司有单独笔试。视频面试出手写题概率极大，手写题前端相关较多（防抖节流等），算法题有的公司考有的不考，算法题难度为简单到中等，其中中等难度题目较多。

笔者只有一年经验，所以考察基础技术较多，项目与场景题较少。各家面试题有很多重复的题目，因此本文不单独以公司为单位分类，而将所有题目以技术分类同时加上考察频率，希望更容易突出考察重点高频题。

由于很多题目展开分析时内容过多，本文只列举出题目，答案读者可自行找资料学习。

面试题

❝未标注的题目出现频率为 1 ~ 2 次，中频 代表 3 ~ 5 次，高频代表 5 次以上

❞

❝以下给出正常的题目，不列举遇到的坑爹刁钻题、场景题以及可视化方向的题目

❞

HTML5

• 「cookie、localStorage、sessionStorage的区别 —— 高频」
• HTML5 的新特性有哪些
• meta 标签都包含哪些使用方法
• 语义化标签有哪些

CSS3

• 「谈谈 Flex 布局 —— 高频」
• 水平垂直居中有哪些方式 —— 中频
• 动画有哪些实现方式（含 JS）—— 中频
• 谈谈对 BFC 的理解 —— 中频
• 谈谈盒模型 —— 中频
• CSS3 的新特性有哪些
• 三栏布局有哪些实现方式
• 移动端适配的方式
• 1px 问题
• less / sass 有做过哪些比较高级的操作

JavaScript（含ES6）

• 「谈谈事件循环（含浏览器与 Nodejs）——高高频」
• 「谈谈原型与原型链 —— 高频」
• 「谈谈对闭包的理解 —— 高频」
• 「var、let、const 的区别 —— 高频」
• 继承有哪些方式 —— 中频
• requestAnimationFrame了解吗 —— 中频
• 谈谈对 Promise 的理解 —— 中频
• 谈谈垃圾回收机制 —— 中频
• 谈谈深浅拷贝 —— 中频
• 谈谈数据类型以及内存方式 —— 中频
• 谈谈类型转换
• script标签上defer与 async 的区别
• Promise的all / allSettled / race / any 区别
• 哪些数据结构可以直接迭代
• ES6 新特性有哪些

TypeScript

• 谈谈对泛型的理解 —— 中频
• 谈谈 TS 中的函数重载
• interface与type的区别

HTTP

• 「强缓存与协商缓存（304状态码是什么） —— 高频」
• 谈谈 HTTPS —— 中频
• HTTP 1/2/3 是如何解决队头阻塞的
• HTTP2 头部压缩是怎么做的
• HTTP 1/2/3 的区别
• TLS 握手过程
• httponly的作用
• 301 和 302 的区别

Vue

• 「双向绑定原理（响应式原理）—— 高频」
• 「computed 与 watch 的区别（追问有看过源码吗）—— 高频」
• 「Vue 的 diff 算法(key的作用) —— 高频」
• 「Vue3 的新特性有哪些 —— 高频」
• 「Vue 的生命周期 —— 高频」
• 「v-if 与 v-show 的区别 —— 高频」
• 「组件传值方式 —— 高频」
• 谈谈对 MVVM 的理解 —— 中频
• Vue 的渲染过程 —— 中频
• 谈谈对 vuex 的理解 —— 中频
• 路由原理 —— 中频
• 插槽的各种方式
• 混入
• keep-alive
• 自定义指令
• defineProperty 与 Proxy的差异
• $nextTick 原理

React

• 「谈谈对 hooks 的理解 —— 高频」
• 「Fiber & 渲染过程 —— 高频」
• React 的生命周期 —— 中频
• setState 是同步还是异步 —— 中频
• React 的 diff 算法以及和 Vue 的有什么区别
• 树的比较为什么时间复杂度是 On³，React 是怎么优化虚拟DOM的比较的
• React 的组件传值
• 说一下 useCallback
• hooks 在什么场景下不可用
• 谈谈mobx与redux的区别

Webpack & babel

• 「Webpack 的性能优化有哪些方式 —— 高频」
• 「Webpack 的打包过程 —— 高频」
• 有做过自定义 Loader/Plugin吗？怎么做的？原理是什么？——中频
• Webpack的插件机制原理 —— 中频
• Webpack5 新特性有哪些
• 常见的 Loader 与 Plugin 有哪些
• Tapable.js常见钩子函数有哪些
• External有什么缺陷
• 谈谈模块热替换原理
• 描述 babel 的转换过程
• babel 的预设和插件的区别是什么

Node.js & express & koa & mongoDB & mySQL

• 谈谈 Node.js 的事件循环——中频
• 谈谈 mongoDB 与 mySQL 的区别 —— 中频
• Node.js 常见的模块有哪些
• 有用 Node.js写过工具吗，怎么做的
• express 与 koa 的中间件原理
• 谈谈对 Restful 风格的认识
• Node.js 开发中怎么调试

其他

• 「Web安全的攻击原理以及防御方式（XSS与CSRF）—— 高频」
• 「Vue 与 React 的对比 —— 高频」
• 「性能优化的方式有哪些 —— 高频」
• 谈谈重绘与回流 —— 中频
• Flutter 与 React Native 的比较
• 谈谈 Flutter 的架构
• 谈谈 Vite 原理
• Webpack / gulp / rollup / vite 的区别
• 口述快速排序
• V8 执行 JavaScript 代码的过程
• 谈谈单例模式与工厂模式
• 谈谈策略模式
• 在项目中有用过哪些设计模式
• 浏览器页签间的通信方式有哪些

手写题

• 防抖与节流 —— 中频
• 数组去重
• 扁平数组转树形对象 —— 中频
• 实现 bind / call / apply
• 实现 Promise.all
• 实现 Promise.allSettled
• 实现寄生组合式继承
• 实现 const 功能

项目

• 挑一个熟悉的项目详细聊聊
• 项目中你做的亮点
• 项目中遇到什么难点，是怎么解决的
• 之前团队开发项目的流程是什么样的
• 有碰上本地正常线上出错的bug吗，如何排查

经验与反思

• 「由上面列举的题目可以看出，八股文的考察比例非常大，一定要做好充分的准备」。
• 手写题考察频率也很高，都是非常常见的题目，在面试前一定要多练习，达到倒背如流的程度，并且注意尽量写的完善会很加分（可参考伢羽的博客）。
• 近两年网传算法题的频率和难度非常高，实际上不一定会考，并且考的难度不会太高。写不出来可以尝试要面试官提示或者跟面试官讲明自己的思路，实在不会写也不一定百分百会挂掉。推荐在面试前去力扣刷一两百道简单中等题。
• js、Vue或React中一个框架、http、webpack考察频率非常高，需要充分准备并且尽可能的有深度。
• HTML 和 CSS 的基础内容也会考察，注意不要大意翻车。
• 「项目介绍、难点和亮点要提前准备好，可以多自己练习一下表达」，并且准备面试官可能的相关技术上的追问
• 「要准备自己的杀手锏题目，对常见的高频题尽可能答得完善、有深度或有自己独到的见解」，通过杀手锏题目能很大程度提高通过面试的概率。
• 「偶尔少数题目不会并不一定会挂掉，调整好心态继续答好后面的题目。」一分耕耘一分收获，希望大家能收获到满意的Offer。