面试分享：两年工作经验成功面试阿里P6总结

前言
本文主要给大家带来一些我面试的经历和经验，希望对正在求职的同学有所帮助。我先大致说下面试之前的个人情况：2017年7月正式入职海康威视数字技术股份有限公司，使用Vue.js技术栈。

我写的篇幅可能有点长，如果只想看成功的面试请直接从阿里企业智能事业部（一面）开始，大家见谅哈。

这里推荐阅读之前写的文章（前面两篇实用型，后面两篇对面试应该会有帮助）：

Vue CLI 3结合Lerna进行UI框架设计
Cz工具集使用介绍 - 规范Git提交说明
你真的理解$nextTick么
基于Vue实现一个简易MVVM
关于海康
小提示：这是我自己偷偷给导师打广告，大家如果没有求职意愿的可以直接忽略。

对于离职的公司海康，我还是有非常深厚的感情的，毕竟是我入职的第一家公司。同时在这里我也要感谢我的导师兼领导，是他一点点将我培养成一个合格的Web前端开发。由于我的突然离职，造成了团队内部的人员空缺，也给团队的建设造成了一些影响。我们团队的Vue.js技术栈虽然只在两年前才起步，但是团队的技术体系建设一直在飞速发展（之前发的文章Vue CLI 3结合Lerna进行UI框架设计就是其中的一个的UI框架设计方案），如果大家正在求职，可以在Boss直聘上给他投简历（我偷偷去查了他的招聘信息），目前正在招Web前端实习和Web前端正式岗位（工作地点在杭州市滨江区阡陌路555号）：

Web前端实习
Web前端
Web前端
简历
我的简历只是简单的用MD做了一份，大致包含了以下几个部分：

基本资料
专业技能
工作经历
实习经历（可选）
项目经历
小提示：在基本资料里一定要填写正确的邮箱地址，我在前期面试的时候都没有打开邮箱查看面试情况，导致一些面试的时间点和面试结果都不清楚（一直以为会发短信通知）。

如果去现场面试，一定要记得带上笔和简历。一方面你给面试官的简历必定是最新的（在不断面试的过程中你必定会修改简历），另一方面这也会给面试官一种非常舒心的感觉。

对于简历这里提一点，在写自己的专业技能和项目经历时尽量不要给自己挖坑，这里展示一下我的专业技能（我会的不多）：

熟悉嵌入式C、JavaScript、Node.js
熟悉Vue.js框架
切忌写一大堆让人感觉花里胡哨的技能，尤其是一些很浅显的技能（基本技能除外）。如果你有一些别人很难替代的技能，那这些技能就是亮点了，我这里就没什么亮点技能。有些技能你会但是不熟练，你可以适当的在你的项目经历中体现出来。对于项目经历尽量挑自己觉得非常有技术含量的项目进行说明（宁缺毋滥），对于自己参加过但不是特别熟悉的项目尽量不要填写，防止给自己挖坑。

小提示：这里附上的我的面试简历供大家参考。感谢jsliang的文章2019 面试系列 - 简历，大家制作简历时也可以参考这篇文章。

在投递简历时大家千万不要被招聘信息中的要求吓到，记得有一次投递简历时我对招聘者说自身不太符合要求，招聘者当时说要求都是唬人的，觉得有兴趣就投，有些招聘要求可能正是你未来学习或者深入的领域。

面试
简历制作完后我大概投了四家公司：有赞、滴滴、51信用卡和阿里。其中有赞挂在二面，滴滴挂在一面，51信用卡挂在一面，阿里两个部门挂在一面，一个部门面试成功。很多面试者的经历可能都是像我这样，在一次次的面试失败中不断的总结进步，最终拿到理想的Offer。

小提示：建议大家在投递简历时可以先投递一些试水的小公司，先检验一下自己是不是可以胜任这些公司的面试。同时在每一次面试完后记得把面试官提问的问题记录下来，对于没有答上来的问题还是要好好搞懂或者实践一下，因为很有可能下一家的面试官会问同样的问题。

在面试的过程中，这里我给出几点意见：

心态放平稳，假设第一题你答不上来很正常，面试官不会因为第一题你不会就PASS你
不会的题目一定不要瞎猜，往往面试官给你挖的坑就是希望你往错的方向猜，一定要答不知道
不要说太多跟当前面试题无关的内容，问你什么问题尽量就答什么问题，除非面试官指定你发散一下思维
如果没有听懂面试题可以试着询问面试官，您要问的是关于xxx的问题么
对于某些问题一定要自己先提前精炼一下（例如作用域链、继承以及原型链等问题）
如果面试官问的某项技术自己在某些场景使用过或看到别的场景有使用，可结合这些场景进行讲解（让面试官知道你不仅仅理解它，你还会很好的使用它）
如果是Vue技术栈希望可以深入源码或者至少理解一些别人的源码分析
如果面试阿里那么面试之前一定要好好准备这样一个问题：你觉得你最擅长什么
面试一定要真诚，切勿投机取巧
面试态度一定要谦虚
接下来我会按照面试顺序给出面试题以及自己理解的一些答案：

大部分答案都是借鉴别人的博客
有些答案不一定合理
有些答案写的很零散
有些答案会举一反三
有些题目太基础或者重复了就没有写答案
有些题目太宏观或者不知道怎么回答合理，希望大家可以在评论中补充答案供更多的人受益
有赞（一面）
说说CSS选择器以及这些选择器的优先级
!important
内联样式（1000）
ID选择器（0100）
类选择器/属性选择器/伪类选择器（0010）
元素选择器/关系选择器/伪元素选择器（0001）
通配符选择器（0000）
你知道什么是BFC么
小提示：这个问题重点是BFC是什么，BFC触发的条件有哪些，BFC可以干什么。这里我试着讲解了一下Boostrap的清除浮动（display：table创建匿名table-cell间接触发BFC），如果有看到别的场景使用或者自身有使用的场景可以尝试讲解一下使用技巧。这样可以让面试官觉得你不仅仅知道他问的东西是什么，你还能很好的使用它。

什么是BFC
BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。可以说BFC就是一个作用范围，把它理解成是一个独立的容器，并且这个容器里box的布局与这个容器外的box毫不相干。

触发BFC的条件
根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素
弹性盒（flex或inline-flex）
display: flow-root
column-span: all
BFC的约束规则
内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）
处于同一个BFC中的元素相互影响，可能会发生外边距重叠
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
浮动盒区域不叠加到BFC上
BFC可以解决的问题
垂直外边距重叠问题
去除浮动
自适用两列布局（float + overflow）
了解盒模型么
包括内容区域、内边距区域、边框区域和外边距区域。

enter image description here
box-sizing: content-box（W3C盒子模型）：元素的宽高大小表现为内容的大小。 box-sizing: border-box（IE盒子模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。

IE5.x和IE6在怪异模式中使用非标准的盒子模型，这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

如何实现左侧宽度固定，右侧宽度自适应的布局
小提示：这个问题面试官会要求说出几种解决方法。

DOM结构

复制代码 利用float + margin实现 .box { height: 200px; }

.box > div {
height: 100%;
}

.box-left {
width: 200px;
float: left;
background-color: blue;
}

.box-right {
margin-left: 200px;
background-color: red;
}
复制代码
利用calc计算宽度
.box {
height: 200px;
}

.box > div {
height: 100%;
}

.box-left {
width: 200px;
float: left;
background-color: blue;
}

.box-right {
width: calc(100% - 200px);
float: right;
background-color: red;
}
复制代码
利用float + overflow实现
.box {
height: 200px;
}

.box > div {
height: 100%;
}

.box-left {
width: 200px;
float: left;
background-color: blue;
}

.box-right {
overflow: hidden;
background-color: red;
}
复制代码
利用flex实现
这里不是最佳答案，应该是使用flex-basis实现更合理

.box {
height: 200px;
display: flex;
}

.box > div {
height: 100%;
}

.box-left {
width: 200px;
background-color: blue;
}

.box-right {
flex: 1; // 设置flex-grow属性为1，默认为0
overflow: hidden;
background-color: red;
}
复制代码
了解跨域吗，一般什么情况下会导致跨域
小提示： 如果平常自身有使用场景可结合使用场景进行讲解，比如我在这里使用过的场景是CORS和Nginx反向代理。

跨域行为
同源策略限制、安全性考虑
协议、IP和端口不一致都是跨域行为
JSONP
小提示：如果你提到JSONP，面试官肯定会问你整个详细的实现过程，所以一定要搞懂JSONP的实现原理，如果不是很理解可以自己起一个Express服务实践一下。

Web前端事先定义一个用于获取跨域响应数据的回调函数，并通过没有同源策略限制的script标签发起一个请求（将回调函数的名称放到这个请求的query参数里），然后服务端返回这个回调函数的执行，并将需要响应的数据放到回调函数的参数里，前端的script标签请求到这个执行的回调函数后会立马执行，于是就拿到了执行的响应数据。

缺点： JSONP只能发起GET请求

如何实现一个JSONP
这里给出几个链接：

segmentfault.com/a/119000001… zhangguixu.github.io/2016/12/02/… www.cnblogs.com/iovec/p/531…

JSONP安全性问题
CSRF攻击
前端构造一个恶意页面，请求JSONP接口，收集服务端的敏感信息。如果JSONP接口还涉及一些敏感操作或信息（比如登录、删除等操作），那就更不安全了。

解决方法：验证JSONP的调用来源（Referer），服务端判断Referer是否是白名单，或者部署随机Token来防御。

XSS漏洞
不严谨的 content-type导致的 XSS 漏洞，想象一下 JSONP 就是你请求 http://youdomain.com?callback=douniwan, 然后返回 douniwan({ data })，那假如请求 http://youdomain.com?callback=({ data })了吗，如果没有严格定义好 Content-Type（ Content-Type: application/json ），再加上没有过滤 callback 参数，直接当 html 解析了，就是一个赤裸裸的 XSS 了。

解决方法：严格定义 Content-Type: application/json，然后严格过滤 callback 后的参数并且限制长度（进行字符转义，例如<换成&lt，>换成&gt）等，这样返回的脚本内容会变成文本格式，脚本将不会执行。

服务器被黑，返回一串恶意执行的代码
可以将执行的代码转发到服务端进行校验JSONP内容校验，再返回校验结果。

CORS（跨域资款共享）
小提示：如果你回答跨域解决方案CORS，那么面试官一定会问你实现CORS的响应头信息Access-Control-Allow-Origin。

什么是CORS
CORS（跨域资源共享 Cross-origin resource sharing）允许浏览器向跨域服务器发出XMLHttpRequest请求，从而克服跨域问题，它需要浏览器和服务器的同时支持。

浏览器端会自动向请求头添加origin字段，表明当前请求来源。
服务器端需要设置响应头的Access-Control-Allow-Methods，Access-Control-Allow-Headers，Access-Control-Allow-Origin等字段，指定允许的方法，头部，源等信息。
请求分为简单请求和非简单请求，非简单请求会先进行一次OPTION方法进行预检，看是否允许当前跨域请求。
简单请求
请求方法是以下三种方法之一：

HEAD
GET
POST
HTTP的请求头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
后端的响应头信息：

Access-Control-Allow-Origin：该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
Access-Control-Allow-Credentials：该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。
Access-Control-Expose-Headers：该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。
非简单请求
非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

Access-Control-Request-Method：该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。

如果浏览器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。

JSONP和CORS的对比
JSONP只支持GET请求，CORS支持所有类型的HTTP请求
JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据
其他跨域解决方案
Nginx反向代理
postMessage
document.domain
HTTP2和HTTP1有什么区别
相对于HTTP1.0，HTTP1.1的优化：

缓存处理：多了Entity tag，If-Unmodified-Since, If-Match, If-None-Match等缓存信息（HTTTP1.0 If-Modified-Since,Expires）
带宽优化及网络连接的使用
错误通知的管理
Host头处理
长连接： HTTP1.1中默认开启Connection： keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。
相对于HTTP1.1，HTTP2的优化：

HTTP2支持二进制传送（实现方便且健壮），HTTP1.x是字符串传送
HTTP2支持多路复用
HTTP2采用HPACK压缩算法压缩头部，减小了传输的体积
HTTP2支持服务端推送
你能说说缓存么
小提示：如果平常有遇到过缓存的坑或者很好的利用缓存，可以讲解一下自己的使用场景。如果没有使用注意过缓存问题你也可以尝试讲解一下和我们息息相关的Webpack构建（每一次构建静态资源名称的hash值都会变化），它其实就跟缓存相关。有兴趣的同学可以查看张云龙的博客大公司里怎样开发和部署前端代码？。

缓存分为强缓存和协商缓存。强缓存不过服务器，协商缓存需要过服务器，协商缓存返回的状态码是304。两类缓存机制可以同时存在，强缓存的优先级高于协商缓存。当执行强缓存时，如若缓存命中，则直接使用缓存数据库中的数据，不再进行缓存协商。

强缓存
Expires(HTTP1.0)：Exprires的值为服务端返回的数据到期时间。当再次请求时的请求时间小于返回的此时间，则直接使用缓存数据。但由于服务端时间和客户端时间可能有误差，这也将导致缓存命中的误差。另一方面，Expires是HTTP1.0的产物，故现在大多数使用Cache-Control替代。

缺点：使用的是绝对时间，如果服务端和客户端的时间产生偏差，那么会导致命中缓存产生偏差。

Pragma(HTTP1.0)：HTTP1.0时的遗留字段，当值为"no-cache"时强制验证缓存，Pragma禁用缓存，如果又给Expires定义一个还未到期的时间，那么Pragma字段的优先级会更高。服务端响应添加’Pragma’: ‘no-cache’，浏览器表现行为和刷新(F5)类似。

Cache-Control(HTTP1.1)：有很多属性，不同的属性代表的意义也不同：

private：客户端可以缓存
public：客户端和代理服务器都可以缓存
max-age=t：缓存内容将在t秒后失效
no-cache：需要使用协商缓存来验证缓存数据
no-store：所有内容都不会缓存
请注意no-cache指令很多人误以为是不缓存，这是不准确的，no-cache的意思是可以缓存，但每次用应该去想服务器验证缓存是否可用。no-store才是不