前言
这次面试因为有比较明确的目标，想去 阿里、美团、快手、头条 等大公司提升提升自己，因此在准备了一番后，依次面了对应的公司。此处主要是总结一下当时面试遇到的一些问题，看看对于 2 年前端经验的人面试官们到底需要怎样的能力，以及部分问题的解体的思路。
注：面试一定得表现的自然，轻松自然、说话流畅自信会更容易通过面试！
CSS 部分
在我面试时，遇到的 CSS 相关问题很少，大概掌握两个问题即可。
更多 CSS 相关面试题可查阅： CSS 知识点整理
1. 水平居中布局
这个算是经典中的经典题了，之前我也总结过一篇 水平垂直居中 的文章，网上同样也有很多相关的题目，这里就不赘述了。
当然，这个问题问出来只能算是一个引子，于此引出的问题还包括：
- flex 相关知识
- translate 字体模糊问题
相关文章：
2. BFC 问题
该部分也是老生长谈的内容，可参考我之前总结的文章 浅谈 BFC，这里也不做赘述了。
面试出 CSS 的问题可以说基本上就这么俩，不会有过多其余的细节考察（除非校招生），重点还是在 JavaScript、算法和项目经验上。
JavaScript 部分
JS 部分面试也基本和网上的面经差异不大，除非像头条、阿里部分会考察一些偏原理性的问题外，其余的基本是 ES6 外加一两道 JS 题，大致有如下内容：
1. ES6 ～ 11 新特性
该部分的问题基本上和 ES6 入门教程 没太多出入，把网上那部分知识啃完，然后项目中多撸撸基本上没问题，比较重点的是这么几个：
- 从 let、const 问到 闭包函数，最后到 作用域 相关内容
- 原型链 与 Class
- Promise 与 代码执行顺序
- ES Module 与 CommonJs 差异
- 箭头函数 与 this 相关问题
像 Proxy、解构、Set、Map、对象数组等的扩展 问题之类的，问的频率很小，我是没有被问到过。
相关文章：
2. bind 和 apply/call 的区别，实现一个 bind
根本区别是 bind 返回一个函数，绑定时不执行，调用时执行；后者直接执行。
参考面试题题解
3. 实现一个任务调度函数
这部分考察对 Promise 的理解，只要知道“当异步函数处理完获得了返回的结果后，再调用下一个任务”这个逻辑后，题目就很好解开了。
参考面试题题解
4. 实现一个 JSONP
这个问题我当时没写出来，但是和面试官说明了思路（刷题刷漏了）。JSONP 的思路是 script 脚本不受跨域限制，因此后端将返回内容通过 JSON 拼接到 script 链接函数内后，前端拿到 script 脚本就会触发全局函数执行（提请注册的一个 callback 函数）。
参考面试题题解
5. 实现 excel 的字符串坐标转数组
这个面试题是我觉得最简单的一个，主要是考察简单的正则以及进制转换。只要知道“10 进制转 N 进制”以及“N 进制转 10 进制”的逻辑，该题不难解。
参考面试题题解
大致都是一些不是特别难的手写代码的题目，更多手写代码的题目可参考 手写代码系列
6. 为什么提前调用 let 声明的变量会报错
这个得回答到 let 会创建一个局部块，因为从 ES6 之后就有了块级作用域了，作用域外的变量无法调用到作用域内的变量，因此在 JS 第一次解析代码的时候，这东西不会弄到全局环境中，在它之前调用时，通过 RHS 查询就无法查到，于是就报错了。
可参阅 let 和 var 的区别
Node
这部分我也遇到过一些，解释过只会很浅的使用，然后面到的问题主要为一下两个。Node 深挖也会挖出很多内容，比如：V8 和 Chrome 浏览器内核的 V8 有什么区别，事件循环的区别等等，最好准备准备。
1. 解释一下，什么是 Event Loop
其实这个只要答道 “异步非阻塞模式” 以及解释一下 宏任务、微任务、同步任务 的个人理解基本上能过，当然越标准越好，因为这个学习 Node 的最基本的知识。
可参阅
2. npm 的理解
该部分主要还是对 node_modules 的一些变化和问题进行考察，以及 lock 文件的理解，解释清除这个就没什么问题了。
- 可参阅 npm install 原理分析
3. npm 发布时版本号的问题
emmm，这部分解释一下项目不同程度的修改该怎么升级版本号即可，举个例子：
项目从 v1.0.0 升级版本
- 改了个组件的小 bug： v1.0.1
- 更新了一个组件的函数，新增了一些组件： v1.1.0
- 组件库从支持 Vue 变为支持 React 了： v2.0.0
算法题
因为前端对算法不是很严，除了头条有些神经质以外，其余的只需要稍微刷刷 leetcode 上的简单算法题（主要刷刷 二叉树 的题），基本上没问题。
算法题的重点基本上在二叉树上，因为可以用数组来模拟，然后就是堆和动态规划。
推荐刷题思路为：
- 基础排序算法
- 数组相关算法
- 二叉树的算法题
- 堆和动态规划
一般刷简单的就行了。
HTTP
HTTP 方便主要还是考察状态码、缓存和浏览器的渲染流程，稍微深一点的就是如为什么 TCP 慢、DNS 解析相关、首部压缩算法 等。
浏览器渲染（从输入 url 到页面渲染的完成过程）
这个题其实问的挺多的，简单描述一下整体流程：
- DNS 解析域名得到 IP；（浏览器缓存 -> 本地缓存 -> DNS 服务器 -> 根服务器）
- 拿到服务器地址，与服务器建立连接，3 次握手；
- 获取并解析 html 文件，开始构建 CSSTree 和 DomTree；
- 合成 RenderTree 并在页面布局；
- 页面绘制；
- 离开页面，4 次挥手
这里面也会细扣一些内容，比如DNS 怎么解析的、3 次握手 和 4 次挥手分别做了什么
304 与缓存
该部分网上查阅资料即可。
HTTP、HTTPS、HTTP2、HTTP3 和 WebSocket
这些知识基本上是一套走的，多查阅文章即可。因为我掌握的也不是很多，仅是浅浅谈了一些内容以及部分实现，这些网上基本都能找到，想和面试官谈笑风生的话最好还是研究研究。
我遇到的问题包括：
- HTTP 和 HTTPS 有什么不同
- HTTP2 有哪些新特性，与 HTTP1.1 相比有什么优势
- HTTP2 的加密流程能描述一下吗
- HTTP3 你有了解吗，与 HTTP2 相比有什么优势
- 卡尼项目中有用到 Websocket，你能说说它有什么好处吗
参阅
Nginx
- 正向代理和反向代理
- 负载均衡和实现方式，优缺点
- gzip 首部压缩
Webpack
这部分内容在前端面试时也是加分项，开发点基础插件，了解下 Webpack 编译后的内容和源码相关的内容，开发点简单的包，基础扎实巩固。
更多 Webpack
问题可参阅：关于 webpack 的面试题
1. webpack 主要是用来解决什么问题的
核心思路：
- JS 的模块化开发
- 打包构建为一个整体
其实抓住“模块化”来回答即可，可以简单说一下 webpack 的由来原因，但主要还是因为 JS 的模块化开发方式。
2. plugins 和 loader 的区别
- Loader: 主要用于使 Webpack 将非 JS 文件转化为 JS 文件
- Plugins: 主要用于解决 Loader 无法解决的事，用于辅助，如：压缩、打包 等
3. Webpack 的 Loader 和 Plugins 的开发思想
这部分我没回答上来，没开发过，可参考一下对应文章。
4. 了解过 Webpack 原理吗，能简单介绍一下吗
同样没回答上来。
5. 做过哪些 Webpack 的性能优化
因为了解过 Vue Plugins 部分的编写，也做过一点点 DllPlugins 的编写，将这些给面试官说了
- DllPlugins 预打包
- 部分 ES6 模块的 TreeShaking
- 分析包体积，然后部分插件按需引用
6. 有做过包的开发吗，能描述一下开发思路
介绍了一下当初写 npm 包时的一些思想：
- Library 打包和按需打包
- 类似 Element-ui 的项目结构的划分
- 文档的一些设计和建设思路
- 组件的一些编写思路
TypeScript
这部分也是加分项，以前有过 Java 基础这部分应该问题不大，熟读官网，学习下装饰器的编写，一般也没什么太难的内容。
更多内容可以参阅 Typescript 面试问题
1. interface 和 type 有什么区别，它们能互相继承吗
- interface 不能声明基本类型，type 可以；
- type 无法 extends，但能通过交叉继承（&）来实现继承；
- interface 能够合并声明；
interface 能 extends type，type 也能交叉继承（&） interface，它们也能自己继承自己。
可参阅： interface VS type
2. namespace 和 module 区别
简单来说，namespace 相当于包名，module 相当于文件，官方不推荐用 module 了。主要解决多文件命名冲突问题，目前我在项目内仅 vuex 部分使用，一处声明，多处使用。
3. TypeScript 优缺点
这部分仁者见仁，智者见智，我总结的一些：
- 前期开发时间成本大，后期维护方便
- 合作开发方便，规范性强
- 组件潜在问题前期容易暴露出来，隐藏错误少
- 装饰器开发模式很便捷
这里不会装饰器的尽量不要谈这方面的内容，但这部分算是 TS 的重点部分，建议补补。
框架相关
框架因为我这边是学习 Vue 相关的内容，了解部分源码的知识，这部分深挖一点准没错，基本问题网上能找到，这里就列举一些：
- Vue 的 数组 是怎么监听变化的？（原生方法重写）
- 简单的 Observer 函数能实现一个吗？（Object.defineProperty）
- 如果不用 Vue 组件能实现 EventBus 吗？（可以，观察者模式）
- Vue 组件通讯的方式？（$emit、prop、provider、eventbus、vuex 等）
- watch 和 computed 区别？（是否偏计算属性，是否缓存值）
- Vue 生命周期是什么？（官网图有）
- Vue3 有哪些新特性？（proxy、函数式风格等）
- Diff 算法？（动态规划找节点树、patch 补丁判断是否更新节点、更新）
项目相关
其实面试题在整个面试环节中仅仅在一面碰的较多，二面会稍微提到一部分（一般是算法），后面基本上都是问项目相关的内容了。这部分不太好描述，大概的一些问题如下：
- 简单解释一下你的项目？（描述需要精简、流畅、项目间是否有关联、项目开发的目的）
- 项目中遇到最难的问题，你是怎么解决的？（有把握的，最好是可以体现自身在解决问题时能凸显价值的）
- 你对 xxx 项目的理解，怎么设计的？（最好近期开发的项目拿来说，比较熟，需要熟知整体流畅）
- 开发哪个项目时是你感觉收获最大的，为什么？（能凸显个人能力的项目）
- 你为什么要换工作？（自己思考清除原因，一定得清晰）
- 你有什么个人的职业规划吗？（自己之后的发展思路，提前想明白）
- 你觉得你的优势是什么？（很关键，千万不要说什么有潜力之类的话，基本差评，得凸显自己的价值：能独立开发项目、能带团队、善于沟通等等）
当然面试时结结巴巴的就不要说自己善于沟通了……