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

妖狐艹你老母 2022-09-16 03:55 154阅读 0赞

## 前言 ##

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