【面试】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 的组件传值 说一下 useCallbackhooks在什么场景下不可用谈谈 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。