一次有趣的面试经历，当前端面试碰到后端面试官会发生什么？

前言

金九银十，又是一年跑路季。先介绍下个人情况，一年半经验，计算机专业的渣渣大专。凭着对前端的热爱，基本每天都会抽点时间来学习，基础还算可以。其实上家公司呆着还是挺舒服的，没有加班，唯一不好就是不偏技术，业务也相对简单。考虑到未来的职业发展，最终还是选择跳出这个舒适圈。

9月中旬离职，在上周面试了有7家。其中一家是优居网，这次面试过程也是比较有趣的经历，因为面试官基本不问前端的问题，有被毒打到。后面才了解到面试官是全栈偏后端的。所以这篇分享对于前端面试可能用处不大，小伙伴就当是看个热闹拓展知识。

一面

浏览器输入url后会经历什么

这题也是老经典题目了，相信不少小伙伴也看过相关的文章。

大概过程是：

1. DNS解析ip
2. 根据ip对服务器发送连接请求
3. 三次握手，连接服务器
4. 数据传输
5. 四次挥手，断开服务器（不一定会断开连接，因为HTTP1.1中会复用TCP连接）
6. 浏览器解析数据
7. 并行构建DOM树和CSSOM树
8. 合成Render树
9. 布局
10. 绘制
11. 渲染层合成（展示内容在页面上）。

面试过程中可能有点紧张，后面页面渲染那部分没说出来。

https重定向

原题的描述是，为什么在浏览器上输入http://www.baidu.com会跳转到https下对应的域名，这样做目的是什么？

其实很简单，跳转是服务端做了重定向的处理，目的是为了网站的安全性。

有几种方式可以让网页重定向

1. a标签
2. location.href
3. window.open
4. 设置html的meta标签

window.open有什么弊端

window.open打开的网页可以通过window.opener属性获取到来源网站的window对象，或者通过document.referrer获取到来源网站的地址。所以在使用window.open时，可以把第三个参数设置为noopener=yes,noreferrer=yes。

UTF-8和GBK的区别

这个扯了一下，没答到点上。

正确答案：GBK包含全部中文字符；UTF-8则包含全世界所有国家需要用到的字符。UTF-8是国际编码，它的通用性比较好，GBK是国家编码，通用性比UTF-8差，不过UTF-8占用的数据库比GBK大。

一个请求由什么组成

请求行（请求方法、URL、HTTP协议版本）、请求头、请求体（post传输的数据）

浏览器缓存（强缓存、协商缓存）

大概说了强缓存使用的字段，使用缓存的过程。协商缓存的字段不太记得，模糊的说了下，比较重要的就是协商缓存的两种策略，一种是根据文件修改时间对比，一种根据文件内容的哈希值来对比。

用过哪些http头

content-type，以及一些自定义头。工作中用到的普遍就这些。

说下http2，以及它的应用场景

http2中新增“多路复用”的特性，基于“二进制分帧”把字节流数据分割成带有编号的碎片传输，服务端接收到数据后，根据编号合成一个完整的数据。

应用场景没想出来。

http3了解吗

只了解到传输层是基于UDP协议。

https为什么比http安全，https加密过程

https比http安全是因为在传输数据时做了加密处理。

回答到浏览器生成随机数给服务端构造对称加密算法，然后是对称加密和非对称加密的配合使用，数据使用对称加密，而对称加密的密钥使用非对称加密。

在数据加密前，还有证书验证的阶段，忘记答上了。证书内的公钥是用来加密随机数发给服务端的。

对称加密在工作中有哪些应用

工作中没有应用过，但是知道AES对称加密。

抓包工具是否能抓到https的数据，如果能抓到，安全又怎么保证

能。因为是用户主动进行操作，抓包工具可以配置用户信任的证书，所以数据可以经过抓包工具被获取。

jwt是什么

jwt可以用于验证用户身份信息，和传统的token作用差不多。

传统的token是服务端将用户信息进行MD5处理发送给客户端，客户端在请求时带上token验证。因为MD5是不可逆的，服务端需要去数据库查询相关用户信息，再进行一次MD5，用该MD5和客户端发来的MD5进行对比。

而jwt是不需要服务端经过数据库查询的操作，jwt有对应的加密解密算法，服务端拿到jwt后通过密钥解密可以把其中的用户信息拿到。

oauth2.0验证过程

有听过，但是没了解，没答出来。

说下resfulApi

resfulApi是一种接口设计规范，使用get（获取）、post（新建）、put（更新）、delete（删除）等语义化的方法去描述请求。url里会带上版本号和资源名，资源以复数形式描述。

说下graphQL

graphQL是一种用于api查询的语言，能让客户端只获取所需要的数据。在开发中，后端返回的数据中会包含一些前端不需要的内容。使用graphQL可以把获取数据的主动权交给前端，通过数据模型去规定后端返回的数据，只取所需要的数据，减少接口的冗余数据。

说下B+树

懵，没答出来

二面

二面就简单问了下Vue生命周期，后面都是围绕项目去问。而且我发现面的好多家公司都会问性能优化。这里我也给点小建议，可以从这几个方面去回答：

• 渲染：减少回流重绘、dom操作使用Fragment
• 应用：防抖、节流
• 资源：vue路由懒加载、小程序分包、雪碧图、图片懒加载、dns预解析、压缩、缓存
• webpack：dllPligin、多进程打包

三面

三面是老板面，不聊技术，基本就聊一些经历，性格，对职业的规划，对公司的期望之类的。从交谈中得知，老板是程序员转行，曾经也是个全栈工程师，在阿里待过。然后才知道这家公司成立不够半年，应该是优居网旗下的公司吧。问了老板对公司的技术团队规划，目前是只有两个全栈，技术团队正在扩张，未来会保持在十多个人左右。

最后

虽然最后拿到了offer，但还是选择不去。主要是技术团队和money的问题吧，个人倾向稳定一些的公司。

本文中的一些问题回答的不是很全面，有感兴趣的可以自己去查阅相关的资料。

面试前也做一些知识复习的总结：

• 金九银十，初中级前端面试复习总结「JavaScript篇」
• 金九银十，初中级前端面试复习总结「Vue篇」
• 金九银十，初中级前端面试复习总结「浏览器、HTTP、前端安全」

希望正在面试的小伙伴不被毒打，早日拿到心仪的offer。