最近有一篇阿里盒马前端面试题被各大社区转载，而且据称这是阿里校招面试题，我看完以后，简直惊呆了，打死都不信。今天特意针对他们发的一面，把对应的答案整理了一些。
请先做个自我介绍
我是河畔一角，11年毕业，毕业后先从事JAVA方向开发，后在13年转为前端。13年主要从事XXX，经过3年的时间磨练，让我对前端有了全新的认识。16年进入到乐视，从事XXX，17年进入到松果出行，从事XXX，并从0搭建前端团队，并主导各个前端一线项目研发。
提交表单，常用的方法有哪些？应用层，通信层发生了哪些过程？
提交表单方法
通过form配置action和method实现
通过ajax实现
应用层、通信层发生了哪些过程？
浏览器发送请求后，通过DNS解析域名查找IP地址
经过应用层HTTP
通信层（TCP/IP）经过三次握手和四次挥手
实际上可能考察输入url后请求响应过程
POST和GET的区别，列举一下
大小方面
GET传输一般2kb，POST没有大小限制
安全方面
GET通过url明文传输，POST通过body传输，本身都不安全，因为HTTP就是明文传输。
浏览器记录
GET请求浏览器会记录，POST不会
浏览器后退
GET无害，POST会再次提交
浏览器收藏
GET可以收藏，POST不可以
浏览器缓存
GET可以缓存，POST不会
编码方式
GET通过url编码，POST支持多种编码
TCP数据包
GET产生一个数据包，POST产生2个数据包
使用方式(习惯上讲)
GET主要拉取数据，POST主要提交保存数据
HTTP请求Content-Type值：application/json、application/x-www-form-urlencoded、multipart/form-data
http常见的响应码，拒绝服务资源是哪个?
| 状态码 | 作用 |
|---|---|
| 1.x | 已接收请求，正在处理 |
| 2.x | 请求成功 |
| 3.x | 重定向，需要进一步处理 |
| 4.x | 客户端错误 |
| 5.x | 服务端错误 |
常见状态码：
200 请求成功
301 永久重定向，一般是地址发生变化
302 临时重定向
304 Not Modified（通常是在协商缓存中表示本次内容未修改）
400 Bad Request - 前端请求错误
401 Unauthorized - 未授权
403 Forbidden - 请求被拒绝（本题答案）
404 Not Found - 资源不存在
500 Inter Server Error - 服务端异常
503 Server Unavailable - 服务不可用
前端鉴权了解过吗？
鉴权主要分为四种：
HTTP Basic Authentication (HTTP基本认证)
session-cookie
Token 验证(包括JWT,SSO)
OAuth(开放授权)
我们普通网站常用的认证就是session-cookie的方式，用户向服务端发生请求，服务端会创建session并保存相关身份信息，并向客户端下发一个sessionId,大家如果用心的话，会发现跟JAVA交互的时候，浏览器会有一个JSESSION_ID，跟PHP交互的时候，会有一个PHPSESSION_ID;后面的每次请求，客户端都会自动带上这个cookie跟服务端通信。
实际上大家要明白每一种方式的作用；SSO主要用来做单点登录；OAuth主要用来做第三方网站授权；JWT就是一种便于扩展的跨域认证解决方案，通常会考察这个。
关于JWT我这儿不展开讲，给大家推荐阮一峰的讲解：http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html
OAuth2.0原理
讲原理主要是让你对这个过程做梳理，并不要求对源码过程做剖析，所以可以通过一个简单的流程来进行回答。我通过微信的授权登录来给大家做讲解：OAuth2.0是一个开源的授权认证方案。当我们登录一个网站时，如果想要通过微信做授权登录，从而获取微信的用户信息，正常情况肯定是不允许，通过微信开放的OAuth2.0我们可以做授权认证。我们点击自己网站的微信按钮，跳转一个链接，这个链接比如是：https://open.weixin.qq.com/connect/oauth2/authorize?会跳转到微信那边去让用户同意授权，用户同意以后，会重定向回来并携带一个code，此code是微信下发的临时凭证。开发者拿到此code以后，就可以获取access_token，根据下发的token，我们才能有权限获取其它接口信息。
点击按钮，跳转第三方授权网站
用户同意授权，重定向回来携带code
开发者根据code获取微信access_token
拿到token拉取用户资料
回答的时候，能够把这个过程描述清楚就好，不要过多解析源码。更进一步了解OAuth2.0可参考阮一峰教程：http://www.ruanyifeng.com/blog/2019/04/oauth-grant-types.html
说说https的内在原理，ssl握手过程
https实际上是在应用层(http)和传输层(tcp)之间加了一层安全套接层(ssl).
https原理
客户端发送Https请求
服务端配置CA证书（包含公钥和私钥）
服务端发送证书给客户端（包含颁发机构、过期时间）
客户端解析证书（由TLS验证证书有效性）
验证无问题后，生成随机数并加密，传回给服务端
服务端解密随机值，把响应内容通过私钥进行对称加密，传输给客户端
客户端通过证书解密，获取服务端响应内容
ssl握手过程
客户端发送随机数1，支持的加密方法（如RSA公钥加密）
服务端发送随机数2，和服务器公钥，并确认加密方法
客户端发送用服务器公钥加密的随机数3
服务器用私钥解密这个随机数3，用加密方法计算生成对称加密的密钥给客户端
接下来的报文都用双方协定好的加密方法和密钥，进行加密
大家如果要了解更多ssl详细过程，可参考阮一峰教程
http://www.ruanyifeng.com/blog/2014/02/ssl_tls.html
为什么要用非对称密钥，pms呢？公钥怎么了？
非对称加密相对更安全，通过公钥解密后，只有私钥才能解密，而对称加密只需要一个密钥就能加密和解密。
PMS(pre master secret)，SSL协议并不信任每个主机生成的随机数，因此PMS也有可能被推测出来，所以需要客户端、服务端和PMS三个随机数一同生成密钥才更安全。
关于SSL和HTTPS大家可能看不懂，我建议直接回答不知道。
说一说响应式布局吧？
响应式布局是指同一个网站在不同屏幕尺寸下显示不同的布局。它跟自适应不同，自适应是同一个网站在不同设备上自适应(比如自适应不同的Android和iPhone设备)。传统的做法会针对PC、移动端各做一套项目，而响应式会同时支持PC和H5。响应式方案：
媒体查询
css媒体查询根据尺寸来定义不同样式，比如600/900/1200/1600
百分比
rem
rem是根据html的根元素来决定元素大小的，在自适应布局中应用非常广泛。
视窗(vw/vh)
c3中新增视窗，1vw代表1%的宽度，通常结合rem一起使用。
Bootstrap/Antd/ElementUI中的栅格布局，本身也是一种响应式。
响应式背后的浏览器原理你知道吗？
根据浏览器或设备的分辨率可以计算获取到相应的尺寸，通过不同的尺寸可以动态的修改html元素或者盒子在浏览器中的大小，从而实现响应式。
旋转动画css，怎么去做？
transition+transform
transition:all 1s linear;
transform:rotate(360deg);
animation
animation:rotate 5s infinite;
@keyframes rotate
{
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
dom树和cssom树原理也说一下吧
大家可以参考我这篇文章，应该能找到答案！ 从输入URL后前端的知识爆炸，你懂多少？
为什么link要在前，script标签要在后面呢？原理
link标签并不会阻塞DOM解析，只会阻塞DOM渲染，而script加载js过程会阻塞DOM渲染和CSS加载，所以为了更好的用户体验和更优的前端性能，我们通常把link放前面，script放后面。js之所以阻塞DOM渲染是因为JS本身是单线程，在执行的过程中只能从上到下依次运行，异步任务除外。
script前加async和defer也不会阻塞。
场景题：保证浏览器不受脚本的恶意攻击
主要考察前端漏洞：XSS攻击和CSRF攻击
XSS主要指跨站脚本攻击，一般会伪造网站，窃取cookie，也包括一些sql注入和html注入等；防御方法：
后端对请求数据做标签过滤和检查。
服务端可设置cookie为httponly，前端无法读取，只有服务端可读取
CSRF主要指跨站请求伪造，通过向A中注入链接，使用户跳转到B中并获取A站的cookie，通过cookie向A发送请求，以达到攻击目的。防御方法：
使用POST代替GET
设置cookie为httponly
增加token
通过Referer识别网站
EventLoop理解
此处并非一两句话能讲清楚，建议大家到掘金看完整版https://juejin.im/post/5c72307551882562e74812dc
场景题：这里有cat和animal子类和父类，如何进行es5继承，至少说出5种
原型继承
Cat.prototype = new Animal()
构造继承
function Cat(){
Animal.call(this);
}
组合继承（原型+构造）
function Cat(){
Animal.call(this);
}
Cat.prototype = new Animal()
Call/Apply继承
function Cat(name){
Animal.call(this,name);
}
function Cat(name){
Animal.apply(this,[name]);
}
说说你项目做的Vue spa首屏优化吧
Vue-Router路由懒加载（import/require）
使用CDN加速
Nginx的gzip压缩
Vue异步组件
服务端渲染SSR
如果使用了UI库，采用按需加载(babel-plugin-component/import)
线上关闭sourcemap
如果首屏为登录页，可以做成多入口
Service Worker缓存文件处理
使用link标签的rel属性设置 prefetch（这段资源将会在未来某个导航或者功能要用到，但是本资源的下载顺序权重比较低，prefetch通常用于加速下一次导航）、preload（preload将会把资源的下载顺序权重提高，使得关键数据提前下载好，优化页面打开速度）
后面还有两道暂时忽略。
以上是阿里盒马前端面试的题目和我整理出来的答案，应该对正在找工作的有帮助。
当然后面还有二面、三面、四面题目，后面有时间会继续给大家整理答案出来！
扫一扫
2527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
