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

- 日理万妓 2022-12-10 05:59 157阅读 0赞

前言

金九银十，又是一年跑路季。先介绍下个人情况，一年半经验，计算机专业的大专。凭着对前端的热爱，基本每天都会抽点时间来学习，基础还算可以。其实上家公司呆着还是挺舒服的，没有加班，唯一不好就是不偏技术，业务也相对简单。考虑到未来的职业发展，最终还是选择跳出这个舒适圈。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
9月中旬离职，在上周面试了有7家。其中一家是优居网，这次面试过程也是比较有趣的经历，因为面试官基本不问前端的问题，有被毒打到。后面才了解到面试官是全栈偏后端的。所以这篇分享对于前端面试可能用处不大，小伙伴就当是看个热闹拓展知识。

一面

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

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

大概过程是：

DNS解析ip

根据ip对服务器发送连接请求

三次握手，连接服务器

数据传输

四次挥手，断开服务器（不一定会断开连接，因为HTTP1.1中会复用TCP连接）

浏览器解析数据

并行构建DOM树和CSSOM树

合成Render树

布局

绘制

渲染层合成（展示内容在页面上）。

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

https重定向

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

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

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

a标签

location.href

window.open

设置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、多进程打包

三面

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

我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前端学习交流3000人裙：前面：851 中间：231 最后：348。或者关注我的微信公众号：(前端留学生）里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题，前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

最后

虽然最后拿到了offer，但还是选择不去。个人倾向稳定一些的公司。

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/77b8f58703134f15ba7ce42038bb08f0.png