【面试】1110- 一年前端社招面试总结，入职阿里菜鸟-技术圈

前言

本篇文章也是认识的一位好朋友「东仔」，也是和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。