前言

最近两篇面试以及离职相关的文章不容错过哦。

今年面试还是比较顺的，面了五家公司(酷家乐、拼多多、字节、滴滴、蚂蚁)，都过了。

在文章里我不仅会列出面试题，还会给到一些答题建议，个人能力有限，也不能保证我回答都正确，如果有错误，希望能纠正我。

字节

一面

说一下浏览器缓存

浏览器缓存分为强缓存和协商缓存，强缓存会直接从浏览器里面拿数据，协商缓存会先访问服务器看缓存是否过期，再决定是否从浏览器里面拿数据。

控制强缓存的字段有：Expires和Cache-Control，Expires 和 Cache-Control。

控制协商缓存的字段是：Last-Modified / If-Modified-Since 和 Etag / If-None-Match，其中 Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。

cookie 与 session 的区别

Session 是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中； Cookie 是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现 Session 的一种方式。

详见：COOKIE和SESSION有什么区别？

浏览器如何做到 session 的功能的。

其实就是考察 http 怎么处理无状态是怎么处理的，具体可见 COOKIE和SESSION有什么区别？里面的答案。

解释一下：csrf 和 xss

XSS：恶意攻击者往 Web 页面里插入恶意 Script 代码，当用户浏览该页之时，嵌入其中 Web 里面的 Script 代码会被执行，从而达到恶意攻击用户的目的。

CSRF：CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。

详见：前端安全面试题

怎么防止 csrf 和 xss

详见：前端安全面试题

跨域的处理方案有哪些

常用的：jsonp、CORS、nginx 代理，完整的大概是九种，可见：九种跨域方式实现原理（完整版）

CORS 是如何做的？

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。

对于 CORS ，Get 和 POST 有区别吗？

其实想考察的就是什么时候会有预检请求(option 请求)。

了解 HTTPS 的过程吗？

推荐浪浪的深入理解HTTPS工作原理

webpack 如何做性能优化

webpack 做性能优化主要是考虑打包体积和打包速度。

体积分析用 webpack-bundle-analyzer 插件，速度分析用：speed-measure-webpack-plugin 插件。

打包速度优化瓶子君的：玩转 webpack，使你的打包速度提升 90%。

es module 和 commonjs 的区别

高频题，考察 ES6 模块和 CommonJS 模块的区别。关键点：1. 前者是值的引用，后者是值的拷贝。 2.前者编译时输出接口，后者运行时加载。

推荐文章：前端模块化：CommonJS,AMD,CMD,ES6

react 里如何做动态加载

React.lazy ，另外通过 webpack 的动态加载：import() 和 ensure.require

动态加载的原理是啥，就是 webpack 编译出来的代码

讲道理 webpack 动态加载就两种方式：import()和 require.ensure，不过他们实现原理是相同的。

我觉得这道题的重点在于动态的创建 script 标签，以及通过 jsonp 去请求 chunk，推荐的文章是：webpack是如何实现动态导入的

笔试题：页面结构包括页头（永远在顶部）、主体内容、页脚，页脚永远在页面底部（不是窗口底部），即内容高度不够时，页脚也要保证在页面底部

常规题，考察基本的布局

笔试题：写 new 的执行过程

new 的执行过程大致如下：

创建一个对象
将对象的 _ proto_ 指向构造函数的 prototype
将这个对象作为构造函数的 this
返回该对象。

function myNew(Con, ...args) {
  let obj = Object.create(Con.prototype)
  let result = Con.apply(obj, args)
  return typeof result === 'object' ? result : obj
}

笔试题：写一个处理加法可能产生精度的函数，比如 0.1 + 0.2 = 0.3

思路：对于浮点数在底层处理是有问题的，所以目的就是想办法将所以的浮点数转化为整数进行处理，同时乘以一个倍数(A)，然后加起来后再除以这个倍数(A)，这个倍数应该是两个数中最小的那个数的倍数，比如 0.1 + 0.02 ,那么应该同时乘以 100，变为 10 + 2，然后再将值除以 100。

1000000000 + 1000000000 允许返回字符串处理大数

大数问题就是通过字符串来处理，从后往前加，然后处理进位的问题。

二面

聊项目

项目基本是问：

项目难点以及怎么解决的
项目有哪些亮点？

写一个 es6 的继承过程

这个题我觉得出得很好，很考察基本功。

// 这个是要实现的方法
createClass = fun(sons, super) {
	// TODO
	return fn;
}

// 这是个 es6 的一个例子，要实现 extends 的功能。
class Man extends Human {
	cons (args) {
		super(args)
	  // xxxxx
	}

	speak() {
		console.log('')
	}
}

写一个大数相乘的解决方案。传两个字符串进来，返回一个字符串

function multi(str1, str2) {

}

这道题跟一面的时候思路差不多，只是进位的时候不一定是 1。

三面

聊项目

写一个防抖函数

算法题:https://leetcode-cn.com/problems/bu-ke-pai-zhong-de-shun-zi-lcof/

小节

字节果然是出了名的考算法题比较多的，基本每面都会算法题和编程题，对编程能力比较看重吧。

讲道理一面还是比较常规的，二三面因为都是团队 leader 和更高级别的，问的技术细节也比较少了，重点考察一些技术方案和项目的问题。

滴滴

一面

webpack 原理

大致就是：

初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
确定入口：根据配置中的 entry 找出所有的入口文件；
编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

babel 原理

babel的转译过程分为三个阶段：parsing、transforming、generating，以ES6代码转译为ES5代码为例，babel转译的具体过程如下：

ES6代码输入
babylon 进行解析得到 AST
plugin 用 babel-traverse 对 AST 树进行遍历转译,得到新的AST树
用 babel-generator 通过 AST 树生成 ES5 代码

虚拟 DOM 的理解

从 React 历史的长河里聊虚拟DOM及其价值

项目里如何做的性能优化

这个跟我的项目相关。

写过webpack loader 或者插件吗

讲讲你写的 babel 插件

二面

redux 的原理

redux 做状态管理和发布订阅模式有什么区别

redux 其实也是一个发布订阅，但是 redux 可以做到数据的可预测和可回溯。

react-redux 的原理，是怎么跟 react 关联起来的

react-redux 的核心组件只有两个，Provider 和 connect，Provider 存放 Redux 里 store 的数据到 context 里，通过 connect 从 context 拿数据，通过 props 传递给 connect 所包裹的组件。

了解多端的原理吗？

不清楚，没了解过。

http 与 tcp 的关系

tcp 可以建立多个连接吗？

我估计是想问 http 的管线化，当时忘了这个叫啥了

介绍一下为什么要有三次握手，四次挥手

写过 babel 插件吗？用来干啥的？怎么写的 babel 插件

写过一些简单的 babel 插件，说了我们公司用来通过代码生成文档的 babel 插件是怎么做的。

知道怎么转化成 AST 的吗？

我估计就是问词法分析和语法分析相关的

研究过 React 的运行时吗？

职业规划。

三面

项目介绍

说一下你的项目有哪些复杂的点，以及怎么解决的

这个聊了挺久的，还聊了一些数据量比较大的怎么处理。

你们的业务组件库有多少个，是什么样的组件

权限组件是怎么设计的

会node 吗？

我说我只会增删改查，会点 express，然后就开始一顿狂轰乱炸的知识。

介绍一下你对中间件的理解

怎么保证后端服务稳定性，怎么做容灾

感觉已经超纲了，基本没做过，还好之前跟后端同学聊过他们怎么做容灾的，还记得两点说了下。

多个服务器部署
降级处理，服务挂了，从缓存里面取。

怎么让数据库查询更快

索引
如果数据量太多了可以拆表，分多个数据库

数据库是用的什么？

mysql

为什么用 mysql

希望滴滴能提供给你什么？

这个题其实还挺常考的，可以好好准备下，背一下答案。

最后面试官问我有什么想问他的么，我说没有，因为我之前问得挺多了。不过他还是给我介绍了他们业务还是很厉害的，集团第三，还拿了 A 级绩效，公司有很多技术上的沉淀，跨端呀，web IDE 呀，等等

这个时候我就感觉自己能过了，感觉是在吸引我去，偷笑。

四面

介绍一下项目的难点以及怎么解决的

一起讨论那些难点

自己有什么技术上的优势

最近在研究什么技术？

职业规划

移动端的业务有做过吗？

希望滴滴能提供给你什么？

当业务重的时候怎么安排时间？

小节

滴滴我面的这个岗位是可能回去做一些多端应用，所以会涉及到很多 webpack 和 ast 相关的东西，所以这些问得比较多，感觉这个组还是很不错的，能做到很多技术上的东西。

蚂蚁

一面

讲讲来蘑菇街都干了哪些事情

聊聊有什么技术上的沉淀

除了 redux mbox dva 还用过其他的状态管理没

hooks 原理

看过 hooks 相关的草案吗

你对蚂蚁有什么期望，或者说技术的规划，想做的东西

vue3 的类似 hooks 的原理是怎么样的

二面

聊项目，项目的难点，以及自己做了哪些事情

为什么项目里会引入 TS

dva 和 redux 的区别

职业发展，今年的打算

组件升级怎么让使用这个组件的人都知道。

如果让你设计项目自动设计组件升级，并且安全，你会怎么去设计

三面

全程聊项目，因为他不是前端的，所以没问前端任何知识，主要聊业务相关的，看看我对业务的理解，以及一些想法。

项目难点
怎么解决
项目有什么改进的地方
业务方怎么拿到反馈的，就是做的这个东西具体有什么用

小节

一面面试官问了很多我完全不知道的东西，我知道的东西可能答的比较随意吧，记不起来了。反正能深深的感受到面试对知识的广度和深度远超我很多很多，基本不在一个 level 的。

二三面已经是 P9 的大佬来面了，所以也没问太多的技术细节，都是考察一些技术的解决方案和项目的东西。

蚂蚁的面试其实还是比较难的，问题都不是那种有确定的答案，基本都是考察你平时的积累和经验。

最后

上一篇拼多多和酷家乐的面经之后有很多人问我工作几年，怎么学习的之类的，或者你面了这么多都过了是不是有什么技巧呀？

首先我目前工作了快两年了，18 年 7 月份毕业的。

关于如何准备面试的问题，我的策略是把自己会的东西以及常用的东西，尽量让面试官问不倒你，不会的东西可以跟面试官说不会，不怎么了解，那一般面试官也不会问相关的问题了，如果连自己常用的东西都了解得不深，那么就不太有可能把平时不常用的了解得很深了。

比如我可能写 react 比较多，参与过组件库的开发，webpack 写得也比较多。所以我在准备的时候，就尽量准备的这些知识，了解我的人都知道，我对 react 研究得比较多，原理、性能优化都写过文章，所以如果考 react 的东西，我基本不担心。对于 vue、移动端、小程序、node 啥的，我基本没准备，问倒的时候我就说仅仅了解，没有什么实战经验。

最后我是桃翁，一个爱思考的前端er，期待你的关注。

如果你最近也在找工作，欢迎找我交流，下面是我公众号。