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

时间  2021-08-12
标签 javascript css html 前端 vue java react css3 git github 栏目 快乐工作 繁體版
原文   原文链接

前言

本文主要给你们带来一些我面试的经历和经验，但愿对正在求职的同窗有所帮助。我先大体说下面试以前的我的状况：2017年7月正式入职海康威视数字技术股份有限公司，使用Vue.js技术栈。javascript

我写的篇幅可能有点长，若是只想当作功的面试请直接从阿里企业智能事业部（一面）开始，你们见谅哈。css

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

关于阿里

Hi，你们好，咱们是阿里巴巴新成立的BU，目前还有大量的Web前端职位空缺，机会可贵，但愿正在找工做的同窗们能够来试试：前端

  • 目前Web前端急缺P6和P7（阿里的不少BU都只招P7了）
  • 新的BU你进来便是元老😂😂😂
  • 前端技术体系大部分须要一块儿从新开拓，能够学习到更多的新内容
  • 主要负责PC端、客户端、钉钉E应用以及支付宝小程序的开发（我本人彻底不会小程序，不用担忧😂😂😂）
  • 技术栈是React（若是你是Vue技术栈彻底不用担忧，由于我也是😂😂😂）
  • 其余BU面试可能有五轮，咱们这边只有4轮面试

真的机会可贵哦，若是想更多了解咱们BU以及找我内推的同事加我钉钉或者微信（纯粹找我了解或者沟通技术也行，啊哈哈）：18768107826vue

简历

个人简历只是简单的用MD作了一份，大体包含了如下几个部分：java

  • 基本资料
  • 专业技能
  • 工做经历
  • 实习经历（可选）
  • 项目经历

小提示：在基本资料里必定要填写正确的邮箱地址，我在前期面试的时候都没有打开邮箱查看面试状况，致使一些面试的时间点和面试结果都不清楚（一直觉得会发短信通知）。react

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

对于简历这里提一点，在写本身的专业技能和项目经历时尽可能不要给本身挖坑，这里展现一下个人专业技能（我会的很少）：git

  • 熟悉嵌入式C、JavaScript、Node.js
  • 熟悉Vue.js框架

切忌写一大堆让人感受花里胡哨的技能，尤为是一些很浅显的技能（基本技能除外）。若是你有一些别人很难替代的技能，那这些技能就是亮点了，我这里就没什么亮点技能。有些技能你会可是不熟练，你能够适当的在你的项目经历中体现出来。对于项目经历尽可能挑本身以为很是有技术含量的项目进行说明（宁缺毋滥），对于本身参加过但不是特别熟悉的项目尽可能不要填写，防止给本身挖坑。github

小提示：这里附上的个人面试简历供你们参考。感谢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结构

<div class="box">
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>
复制代码

利用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=<script>alert(1)</script> 不就返回 <script>alert(1)</script>({ 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才是不缓存内容。当在首部字段Cache-Control 有指定 max-age 指令时，比起首部字段 Expires，会优先处理 max-age 指令。命中强缓存的表现形式：Firefox浏览器表现为一个灰色的200状态码。Chrome浏览器状态码表现为200 (from disk cache)或是200 OK (from memory cache)。

协商缓存

协商缓存须要进行对比判断是否能够使用缓存。浏览器第一次请求数据时，服务器会将缓存标识与数据一块儿响应给客户端，客户端将它们备份至缓存中。再次请求时，客户端会将缓存中的标识发送给服务器，服务器根据此标识判断。若未失效，返回304状态码，浏览器拿到此状态码就能够直接使用缓存数据了。

Last-Modified：服务器在响应请求时，会告诉浏览器资源的最后修改时间。

if-Modified-Since：浏览器再次请求服务器的时候，请求头会包含此字段，后面跟着在缓存中得到的最后修改时间。服务端收到此请求头发现有if-Modified-Since，则与被请求资源的最后修改时间进行对比，若是一致则返回304和响应报文头，浏览器只须要从缓存中获取信息便可。

  • 若是真的被修改：那么开始传输响应一个总体，服务器返回：200 OK
  • 若是没有被修改：那么只需传输响应header，服务器返回：304 Not Modified

if-Unmodified-Since: 从某个时间点算起, 是否文件没有被修改，使用的是相对时间，不须要关心客户端和服务端的时间误差。

  • 若是没有被修改：则开始`继续'传送文件，服务器返回: 200 OK
  • 若是文件被修改：则不传输，服务器返回: 412 Precondition failed (预处理错误)

这两个的区别是一个是修改了才下载一个是没修改才下载。若是在服务器上，一个资源被修改了，但其实际内容根本没发生改变，会由于Last-Modified时间匹配不上而返回了整个实体给客户端（即便客户端缓存里有个如出一辙的资源）。为了解决这个问题，HTTP1.1推出了Etag。

Etag：服务器响应请求时，经过此字段告诉浏览器当前资源在服务器生成的惟一标识（生成规则由服务器决定）

If-Match：条件请求，携带上一次请求中资源的ETag，服务器根据这个字段判断文件是否有新的修改

If-None-Match： 再次请求服务器时，浏览器的请求报文头部会包含此字段，后面的值为在缓存中获取的标识。服务器接收到次报文后发现If-None-Match则与被请求资源的惟一标识进行对比。

  • 不一样，说明资源被改动过，则响应整个资源内容，返回状态码200。
  • 相同，说明资源无意修改，则响应header，浏览器直接从缓存中获取数据信息。返回状态码304.

可是实际应用中因为Etag的计算是使用算法来得出的，而算法会占用服务端计算的资源，全部服务端的资源都是宝贵的，因此就不多使用Etag了。

  • 浏览器地址栏中写入URL，回车浏览器发现缓存中有这个文件了，不用继续请求了，直接去缓存拿（最快）
  • F5就是告诉浏览器，别偷懒，好歹去服务器看看这个文件是否有过时了。因而浏览器就胆胆襟襟的发送一个请求带上If-Modify-since
  • Ctrl+F5告诉浏览器，你先把你缓存中的这个文件给我删了，而后再去服务器请求个完整的资源文件下来。因而客户端就完成了强行更新的操做

缓存场景

对于大部分的场景均可以使用强缓存配合协商缓存解决，可是在一些特殊的地方可能须要选择特殊的缓存策略

  • 对于某些不须要缓存的资源，能够使用 Cache-control: no-store ，表示该资源不须要缓存
  • 对于频繁变更的资源，能够使用 Cache-Control: no-cache 并配合 ETag 使用，表示该资源已被缓存，可是每次都会发送请求询问资源是否更新
  • 对于代码文件来讲，一般使用 Cache-Control: max-age=31536000 并配合策略缓存使用，而后对文件进行指纹处理，一旦文件名变更就会马上下载新的文件

能说说首屏加载优化有哪些方案么

小提示：若是作过相似优化的同窗，可能就比较好回答，没有作过相似优化的同窗能够重点讲解一下懒加载（固然我这里被面试官追问过懒加载的Webpack配置问题）。同时不知道使用Vue技术栈的同窗们有没有仔细观察过Vue CLI 3构建的html文件中的link标签的rel属性。

  • Vue-Router路由懒加载（利用Webpack的代码切割）
  • 使用CDN加速，将通用的库从vendor进行抽离
  • Nginx的gzip压缩
  • Vue异步组件
  • 服务端渲染SSR
  • 若是使用了一些UI库，采用按需加载
  • Webpack开启gzip压缩
  • 若是首屏为登陆页，能够作成多入口
  • Service Worker缓存文件处理
  • 使用link标签的rel属性设置 prefetch（这段资源将会在将来某个导航或者功能要用到，可是本资源的下载顺序权重比较低，prefetch一般用于加速下一次导航）、preload（preload将会把资源得下载顺序权重提升，使得关键数据提早下载好，优化页面打开速度）

如何在Node端配置路径别名（相似于Webpack中的alias配置）

  • 全局变量
  • 环境变量
  • 本身HACK一个@符号，指向特定的路径
  • HACK require方法

参考

这种问题仍是附上参考连接

segmentfault.com/a/119000001…

chashaobao.net/2017/09/03/…

www.zhihu.com/question/26…

谈谈你对做用域链的理解

小提示：同类型的问题还能够是原型链、继承、闭包等，这种概念性的问题你确定不是一句两句能说清楚的，建议在理解以后本身尝试总结一下，如何把重要的知识点用简短的话语说明白。

了解做用域链以前咱们要知道一下几个概念：

  • 函数的生命周期
  • 变量和函数的声明
  • Activetion Object（AO）、Variable Object（VO）

函数的生命周期：

  • 建立：JS解析引擎进行预解析，会将函数声明提早，同时将该函数放到全局做用域中或当前函数的上一级函数的局部做用域中。

  • 执行：JS引擎会将当前函数的局部变量和内部函数进行声明提早，而后再执行业务代码，当函数执行完退出时，释放该函数的执行上下文，并注销该函数的局部变量。

变量和函数的声明：若是变量名和函数名声明时相同，函数优先声明。

Activetion Object（AO）、Variable Object（VO）：

  • AO：Activetion Object（活动对象）
  • VO：Variable Object（变量对象）

VO对应的是函数建立阶段，JS解析引擎进行预解析时，全部的变量和函数的声明，统称为Variable Object。该变量与执行上下文相关，知道本身的数据存储在哪里，而且知道如何访问。VO是一个与执行上下文相关的特殊对象，它存储着在上下文中声明的如下内容：

  • 变量 (var, 变量声明);
  • 函数声明 (FunctionDeclaration, 缩写为FD);
  • 函数的形参

AO对应的是函数执行阶段，当函数被调用执行时，会创建一个执行上下文，该执行上下文包含了函数所需的全部变量，该变量共同组成了一个新的对象就是Activetion Object。该对象包含了：

  • 函数的全部局部变量
  • 函数的全部命名参数
  • 函数的参数集合
  • 函数的this指向

做用域链：

当代码在一个环境中建立时，会建立变量对象的一个做用域链（scope chain）来保证对执行环境有权访问的变量和函数。做用域第一个对象始终是当前执行代码所在环境的变量对象（VO）。若是是函数执行阶段，那么将其activation object（AO）做为做用域链第一个对象，第二个对象是上级函数的执行上下文AO，下一个对象依次类推。

在《JavaScript深刻之变量对象》中讲到，当查找变量的时候，会先从当前上下文的变量对象中查找，若是没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫作做用域链。

你知道null和undefined有什么区别么

闭包有什么做用

Vue响应式原理

小提示：若是面试者使用的是Vue技术栈，那么响应式原理是一个必问的问题，同时面试官常常也会问Vue 3.0在响应式原理上的优化方案。

若是对于响应式原理不是很清楚能够查看我以前写的文章基于Vue实现一个简易MVVM/数据劫持的实现。

了解Event Loop么

小提示：这个题目问到的几率仍是蛮大的，这里面试官询问了我浏览器端和Node端的Event Loop有什么不一样点。若是想要知道更多浏览器端的Event Loop机制能够查看我以前写的文章你真的理解$nextTick么/JS引擎线程和事件触发线程/事件循环机制。

事件触发线程管理的任务队列是如何产生的呢？事实上这些任务就是从JS引擎线程自己产生的，主线程在运行时会产生执行栈，栈中的代码调用某些异步API时会在任务队列中添加事件，栈中的代码执行完毕后，就会读取任务队列中的事件，去执行事件对应的回调函数，如此循环往复，造成事件循环机制。JS中有两种任务类型：微任务（microtask）和宏任务（macrotask），在ES6中，microtask称为 jobs，macrotask称为 task：

  • 宏任务： script （主代码块）、setTimeout 、setInterval 、setImmediate 、I/O 、UI rendering
  • 微任务：process.nextTick（Nodejs） 、Promise 、Object.observe 、MutationObserver

Node.js中Event Loop和浏览器中Event Loop有什么区别

┌───────────────────────┐
┌─>│        timers         │<————— 执行 setTimeout()、setInterval() 的回调
│  └──────────┬────────────┘
|             |<-- 执行全部 Next Tick Queue 以及 MicroTask Queue 的回调 │ ┌──────────┴────────────┐ │ │ pending callbacks │<————— 执行由上一个 Tick 延迟下来的 I/O 回调（待完善，可忽略） │ └──────────┬────────────┘ | |<-- 执行全部 Next Tick Queue 以及 MicroTask Queue 的回调 │ ┌──────────┴────────────┐ │ │ idle, prepare │<————— 内部调用（可忽略） │ └──────────┬────────────┘ | |<-- 执行全部 Next Tick Queue 以及 MicroTask Queue 的回调 | | ┌───────────────┐ │ ┌──────────┴────────────┐ │ incoming: │ - (执行几乎全部的回调，除了 close callbacks、timers、setImmediate) │ │ poll │<─────┤ connections, │ │ └──────────┬────────────┘ │ data, etc. │ │ | | | | | └───────────────┘ | |<-- 执行全部 Next Tick Queue 以及 MicroTask Queue 的回调 | ┌──────────┴────────────┐ │ │ check │<————— setImmediate() 的回调将会在这个阶段执行 │ └──────────┬────────────┘ | |<-- 执行全部 Next Tick Queue 以及 MicroTask Queue 的回调 │ ┌──────────┴────────────┐ └──┤ close callbacks │<————— socket.on('close', ...) └───────────────────────┘ 复制代码

Node.js中宏任务分红了几种类型，而且放在了不一样的task queue里。不一样的task queue在执行顺序上也有区别，微任务放在了每一个task queue的末尾：

  • setTimeout/setInterval 属于 timers 类型；
  • setImmediate 属于 check 类型；
  • socket 的 close 事件属于 close callbacks 类型；
  • 其余 MacroTask 都属于 poll 类型。
  • process.nextTick 本质上属于 MicroTask，可是它先于全部其余 MicroTask 执行；
  • 全部 MicroTask 的执行时机在不一样类型的 MacroTask 切换后。
  • idle/prepare 仅供内部调用，咱们能够忽略。
  • pending callbacks 不太常见，咱们也能够忽略。

如何避免回流和重绘

浏览器渲染过程

enter image description here

  • 浏览器使用流式布局模型 (Flow Based Layout)
  • 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree
  • 有了RenderTree就能知道全部节点的样式，计算节点在页面上的大小和位置，把节点绘制到页面上
  • 因为浏览器使用流式布局，对Render Tree的计算一般只须要遍历一次就能够完成，但table及其内部元素除外，一般须要屡次计算且要花费3倍于同等元素的时间，这也是为何要避免使用table布局的缘由之一

浏览器渲染过程以下：

  • 解析HTML，生成DOM树
  • 解析CSS，生成CSSOM树
  • 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
  • Layout(回流)：根据生成的渲染树，进行回流(Layout)，获得节点的几何信息（位置，大小）
  • Painting(重绘)：根据渲染树以及回流获得的几何信息，获得节点的绝对像素
  • Display：将像素发送给GPU，展现在页面上。（这一步其实还有不少内容，好比会在GPU将多个合成层合并为同一个层，并展现在页面中。而css3硬件加速的原理则是新建合成层，这里咱们不展开，以后有机会会写一篇博客）

什么时候触发回流和重绘

什么时候发生回流：

  • 添加或删除可见的DOM元素
  • 元素的位置发生变化
  • 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
  • 内容发生变化，好比文本变化或图片被另外一个不一样尺寸的图片所替代。
  • 页面一开始渲染的时候（这确定避免不了）
  • 浏览器的窗口尺寸变化（由于回流是根据视口的大小来计算元素的位置和大小的）

什么时候发生重绘（回流必定会触发重绘）：

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并从新绘制它，这个过程称为重绘。

有时即便仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。现代浏览器会对频繁的回流或重绘操做进行优化，浏览器会维护一个队列，把全部引发回流和重绘的操做放入队列中，若是队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样能够把屡次回流和重绘变成一次。你访问如下属性或方法时，浏览器会马上清空队列：

  • clientWidth、clientHeight、clientTop、clientLeft
  • offsetWidth、offsetHeight、offsetTop、offsetLeft
  • scrollWidth、scrollHeight、scrollTop、scrollLeft
  • width、height
  • getComputedStyle()
  • getBoundingClientRect()

以上属性和方法都须要返回最新的布局信息，所以浏览器不得不清空队列，触发回流重绘来返回正确的值。所以，咱们在修改样式的时候，**最好避免使用上面列出的属性，他们都会刷新渲染队列。**若是要使用它们，最好将值缓存起来。

如何避免触发回流和重绘

CSS：

  • 避免使用table布局。
  • 尽量在DOM树的最末端改变class。
  • 避免设置多层内联样式。
  • 将动画效果应用到position属性为absolute或fixed的元素上
  • 避免使用CSS表达式（例如：calc()）
  • CSS3硬件加速（GPU加速）

JavaScript：

  • 避免频繁操做样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性
  • 避免频繁操做DOM，建立一个documentFragment，在它上面应用全部DOM操做，最后再把它添加到文档中
  • 也能够先为元素设置display: none，操做结束后再把它显示出来。由于在display属性为none的元素上进行的DOM操做不会引起回流和重绘
  • 避免频繁读取会引起回流/重绘的属性，若是确实须要屡次使用，就用一个变量缓存起来
  • 对具备复杂动画的元素使用绝对定位，使它脱离文档流，不然会引发父元素及后续元素频繁回流

有赞（二面）

小提示：进入现场面试须要注意好好准备本身的简历，面试官通常会根据项目进行问答。

笔试题环节

一开始面试官就发了两张笔试题试卷，总共四道题目，大体考了如下知识点：

  • 做用域
  • 原型链（例如实例属性和原型属性同样，删除实例属性后能够继续访问原型属性问题）
  • 宏任务和微任务的打印顺序
  • Array.prototype.map的第二个参数

项目问答环节

答完试卷面试官就开始问简历上的一些项目，我记得其中几个问题以下（事实上他问的一些问题和简历不是很相关）：

  • 大家产品的服务器部署在哪里
  • 你是如何实现一个Tooltip组件的，能写一下怎么使用这个组件么（这算什么问题...）
  • 我认识大家海康的一些开发，我知道大家的产品按套数卖的...

我当场就感觉到了面试官问的问题很敷衍，可能他以为个人简历不够好，又或者以为我能力不行，接下来面试官又让我作了一道算法题...

算法题环节

  • 1块、4块、5块，求总数n块的最小硬币数

当时没作出来，非科班出身可能作这些确实有些困难，也没有系统的学习，面试官看我很困难的样子，就换了一道题。

  • 一、一、二、三、五、8...计算第n个数的值（斐波那契数列）

这道题仍是作出来了，毕竟比较简单，而后面试官说今天先到这里，面试结果会在一星期内通知，而后回来的那天晚上就收到了面试没过的通知。

小结

仍是蛮感谢此次现场面试的经历，让我知道若是自身不够硬，到哪里都会很被动。面试的好处不只仅在于检验本身到底有多少能力，更应该发现自身的不足，同时不断的去弥补这些不足。因而我再次捧起以前搁置的《算法导论》，而且建立了一个算法学习演示文档I-Algorithms，但愿能够简化《算法导论》的一些理论知识，使你们对于算法的学习能够变得更加系统全面和简单，也但愿经过这个学习使得算法面试会变得更加驾轻就熟，但愿感兴趣的同窗能够star一下。

enter image description here

滴滴（一面）

你知道哪些安全问题，如何避免

小提示：这里我简单讲解了一下Vue中的v-html防范XSS攻击。

XSS（跨站脚本攻击）

XSS，即 Cross Site Script，中译是跨站脚本攻击；其本来缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，于是在安全领域叫作 XSS。

XSS 攻击是指攻击者在网站上注入恶意的客户端代码，经过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。

攻击者对客户端网页注入的恶意脚本通常包括 JavaScript，有时也会包含 HTML 和 Flash。有不少种方式进行 XSS 攻击，但它们的共同点为：将一些隐私数据像 cookie、session 发送给攻击者，将受害者重定向到一个由攻击者控制的网站，在受害者的机器上进行一些恶意操做。

XSS攻击能够分为3类：反射型（非持久型）、存储型（持久型）、基于DOM。

反射型

反射型 XSS 只是简单地把用户输入的数据 “反射” 给浏览器，这种攻击方式每每须要攻击者诱使用户点击一个恶意连接（攻击者能够将恶意连接直接发送给受信任用户，发送的方式有不少种，好比 email, 网站的私信、评论等，攻击者能够购买存在漏洞网站的广告，将恶意连接插入在广告的连接中），或者提交一个表单，或者进入一个恶意网站时，注入脚本进入被攻击者的网站。最简单的示例是访问一个连接，服务端返回一个可执行脚本：

const http = require('http');
function handleReequest(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
    res.write('<script>alert("反射型 XSS 攻击")</script>');
    res.end();
}

const server = new http.Server();
server.listen(8001, '127.0.0.1');
server.on('request', handleReequest);
复制代码
存储型

存储型 XSS 会把用户输入的数据 "存储" 在服务器端，当浏览器请求数据时，脚本从服务器上传回并执行。这种 XSS 攻击具备很强的稳定性。比较常见的一个场景是攻击者在社区或论坛上写下一篇包含恶意 JavaScript 代码的文章或评论，文章或评论发表后，全部访问该文章或评论的用户，都会在他们的浏览器中执行这段恶意的 JavaScript 代码：

// 例如在评论中输入如下留言
// 若是请求这段留言的时候服务端不作转义处理，请求以后页面会执行这段恶意代码
<script>alert('xss 攻击')</script>
复制代码
基于DOM

基于 DOM 的 XSS 攻击是指经过恶意脚本修改页面的 DOM 结构，是纯粹发生在客户端的攻击：

<h2>XSS: </h2>
<input type="text" id="input">
<button id="btn">Submit</button>
<div id="div"></div>
<script>
    const input = document.getElementById('input');
    const btn = document.getElementById('btn');
    const div = document.getElementById('div');

    let val;
     
    input.addEventListener('change', (e) => {
        val = e.target.value;
    }, false);

    btn.addEventListener('click', () => {
        div.innerHTML = `<a href=${val}>testLink</a>`
    }, false);
</script>
复制代码

点击 Submit 按钮后，会在当前页面插入一个连接，其地址为用户的输入内容。若是用户在输入时构造了以下内容：

'' onclick=alert(/xss/)
复制代码

用户提交以后，页面代码就变成了：

<a href onlick="alert(/xss/)">testLink</a>
复制代码

此时，用户点击生成的连接，就会执行对应的脚本。

XSS攻击防范

HttpOnly 防止劫取 Cookie：HttpOnly 最先由微软提出，至今已经成为一个标准。浏览器将禁止页面的Javascript 访问带有 HttpOnly 属性的Cookie。上文有说到，攻击者能够经过注入恶意脚本获取用户的 Cookie 信息。一般 Cookie 中都包含了用户的登陆凭证信息，攻击者在获取到 Cookie 以后，则能够发起 Cookie 劫持攻击。因此，严格来讲，HttpOnly 并不是阻止 XSS 攻击，而是能阻止 XSS 攻击后的 Cookie 劫持攻击。

输入检查：不要相信用户的任何输入。 对于用户的任何输入要进行检查、过滤和转义。创建可信任的字符和 HTML 标签白名单，对于不在白名单之列的字符或者标签进行过滤或编码。在 XSS 防护中，输入检查通常是检查用户输入的数据中是否包含 <，> 等特殊字符，若是存在，则对特殊字符进行过滤或编码，这种方式也称为 XSS Filter。而在一些前端框架中，都会有一份 decodingMap， 用于对用户输入所包含的特殊字符或标签进行编码或过滤，如 <，>，script，防止 XSS 攻击：

// vuejs 中的 decodingMap
// 在 vuejs 中，若是输入带 script 标签的内容，会直接过滤掉
const decodingMap = {
  '&lt;': '<',
  '&gt;': '>',
  '&quot;': '"',
  '&amp;': '&',
  '&#10;': '\n'
}
复制代码

输出检查：用户的输入会存在问题，服务端的输出也会存在问题。通常来讲，除富文本的输出外，在变量输出到 HTML 页面时，能够使用编码或转义的方式来防护 XSS 攻击。例如利用 sanitize-html 对输出内容进行有规则的过滤以后再输出到页面中。

CSRF/XSRF（跨站请求伪造）

CSRF，即 Cross Site Request Forgery，中译是跨站请求伪造，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。一般状况下，CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，能够在受害者绝不知情的状况下以受害者名义伪造请求发送给受攻击服务器，从而在并未受权的状况下执行在权限保护之下的操做。

Cookie

Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。Cookie 主要用于如下三个方面：

  • 会话状态管理（如用户登陆状态、购物车、游戏分数或其它须要记录的信息）
  • 个性化设置（如用户自定义设置、主题等）
  • 浏览器行为跟踪（如跟踪分析用户行为等）

而浏览器所持有的 Cookie 分为两种：

  • Session Cookie(会话期 Cookie)：会话期 Cookie 是最简单的Cookie，它不须要指定过时时间（Expires）或者有效期（Max-Age），它仅在会话期内有效，浏览器关闭以后它会被自动删除。
  • Permanent Cookie(持久性 Cookie)：与会话期 Cookie 不一样的是，持久性 Cookie 能够指定一个特定的过时时间（Expires）或有效期（Max-Age）。
res.setHeader('Set-Cookie', ['mycookie=222', 'test=3333; expires=Sat, 21 Jul 2018 00:00:00 GMT;']);
复制代码

上述代码建立了两个 Cookie：mycookie 和 test，前者属于会话期 Cookie，后者则属于持久性 Cookie。

CSRF攻击

使登陆用户访问攻击者的网站，发起一个请求，因为 Cookie 中包含了用户的认证信息，当用户访问攻击者准备的攻击环境时，攻击者就能够对服务器发起 CSRF 攻击。

在这个攻击过程当中，攻击者借助受害者的 Cookie 骗取服务器的信任，但并不能拿到 Cookie，也看不到 Cookie 的内容。而对于服务器返回的结果，因为浏览器同源策略的限制，攻击者也没法进行解析。（攻击者的网站虽然是跨域的，可是他构造的连接是源网站的，跟源网站是同源的，因此可以携带cookie发起访问）。

可是攻击者没法从返回的结果中获得任何东西，他所能作的就是给服务器发送请求，以执行请求中所描述的命令，在服务器端直接改变数据的值，而非窃取服务器中的数据。例如删除数据、修改数据，新增数据等，没法获取数据。

CSRF攻击防范

验证码：验证码被认为是对抗 CSRF 攻击最简洁而有效的防护方法。从上述示例中能够看出，CSRF 攻击每每是在用户不知情的状况下构造了网络请求。而验证码会强制用户必须与应用进行交互，才能完成最终请求。由于一般状况下，验证码可以很好地遏制 CSRF 攻击。但验证码并非万能的，由于出于用户考虑，不能给网站全部的操做都加上验证码。所以，验证码只能做为防护 CSRF 的一种辅助手段，而不能做为最主要的解决方案。

Referer Check：根据 HTTP 协议，在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址。经过 Referer Check，能够检查请求是否来自合法的"源"。

添加token验证：要抵御 CSRF，关键在于在请求中放入攻击者所不能伪造的信息，而且该信息不存在于 Cookie 之中。能够在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端创建一个拦截器来验证这个 token，若是请求中没有 token 或者 token 内容不正确，则认为多是 CSRF 攻击而拒绝该请求。

介绍一下Graphql

小提示：这道题是给本身挖了一个坑，抱着学习的心态尝试使用Graphql技术，却没有好好理解是在什么场景下为了解决什么问题才应该使用，也没有好好准备如何描述新技术，每每这种不熟悉的技术本身在简历中应该留存一些心眼，尽可能不要提，不然答不上来会很尴尬，让面试官怀疑你的项目成分。

什么是Graphql

GraphQL是一种API查询语言。API接口的返回值能够从静态变为动态，即调用者来声明接口返回什么数据，能够进一步解耦先后端。在Graphal中，预先定义Schema和声明Type来达到动态获取接口数据的目的：

  • 对于数据模型的抽象是经过Type来描述的
  • 对于接口获取数据的逻辑是经过Schema来描述的

为何要使用Graphql：

  • 接口数量众多维护成本高
  • 接口扩展成本高
  • 接口响应的数据格式没法预知
  • 减小无用数据的请求， 按需获取
  • 强类型约束（API的数据格式让前端来定义，而不是后端定义）

Type（数据模型的抽象）

Type简单能够分为两种，一种叫作Scalar Type(标量类型)，另外一种叫作Object Type(对象类型)：

  • Scalar Type（标量类型）：内建的标量包含，String、Int、Float、Boolean、Enum

  • Object Type（对象类型）：感受相似于TypeScript的接口类型

  • Type Modifier（类型修饰符）：用于代表是否必填等

Schema（模式）

定义了字段的类型、数据的结构，描述了接口数据请求的规则

Query（查询、操做类型）

查询类型： query（查询）、mutation（更改）和subscription（订阅）

  • query（查询）：当获取数据时，应当选取Query类型
  • mutation（更改）：当尝试修改数据时，应当使用mutation类型
  • subscription（订阅）：当但愿数据更改时，能够进行消息推送，使用subscription类型
Resolver（解析函数）

提供相关Query所返回数据的逻辑。Query和与之对应的Resolver是同名的，这样在GraphQL才能把它们对应起来。解析的过程多是递归的，只要遇到非标量类型，会尝试继续解析，若是遇到标量类型，那么解析完成，这个过程叫作解析链。

说说Vue中$nextTick的实现原理

小提示：若是面试者使用的是Vue技术栈，那么$nextTick的原理是一个高频问题，面试者借此能够追问的东西较多，例如浏览器的Event Loop、微任务和宏任务、Node.js的Event Loop、异步更新DOM（响应式的数据for循环改变了1000次为何视图只更新了一次）、$nextTick历史版本问题等等。

这个若是不是很清楚的具体可查看我以前写的文章你真的理解$nextTick么。

Vue响应式原理

谈谈对闭包的理解

JSONP的实现原理

CSS中的BFC

如何实现居中

水平居中

  • 如果行内元素，给其父元素设置text-align:center便可实现行内元素水平居中
  • 如果块级元素，该元素设置margin:0 auto便可（元素须要定宽）
  • 如果块级元素，设置父元素为flex布局，子元素设置margin:0 auto便可（子元素不须要定宽）
  • 使用flex 2012年版本布局，能够轻松的实现水平居中，子元素设置以下:
// flex容器
<div class="box"> 
 // flex项目
 <div class="box-center">
 </div>
</div>


.box {
  width: 200px;
  height: 200px;
  display: flex;
  // 使内部的flex项目水平居中
  justify-content: center;
  background-color: pink;
}

/* .box-center {
  width: 50%;
  background-color: greenyellow;
} */


复制代码
  • 使用绝对定位和CSS3新增的属性transform（这个属性还和GPU硬件加速、固定定位相关）
.box {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: pink;
}

.box-center {
  position: absolute;
  left:50%;
  // width: 50%;
  height: 100%;
  // 经过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
  // translate(x,y)	定义 2D 转换。
  // translateX(x)	定义转换，只是用 X 轴的值。
  // translateY(y)	定义转换，只是用 Y 轴的值。
  // left: 50% 先总体向父容器的左侧偏移50%，此时是不能居中的，由于元素自己有大小
  // 接着使用transform使用百分比向左偏移自己的宽度的一半实现水平居中（这里的百分比以元素自己的宽高为基准）
  transform:translate(-50%,0);
  background-color: greenyellow;
}
复制代码
  • 使用绝对定位和margin-left（元素定宽）
.box {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: pink;
}

.box-center {
  position: absolute;
  left:50%;
  height: 100%;
  // 相似于transform
  // width: 50%;
  // margin-left: -25%;
  width: 100px;
  margin-left: -50px;
  background-color: greenyellow;
}
复制代码

垂直居中

  • 若元素是单行文本, 则可设置line-height等于父元素高度
  • 如果块级元素，设置父元素为flex布局，子元素设置margin: auto 0便可（子元素不须要定宽）
  • 若元素是行内块级元素，基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央：
.box {
  height: 100px;
}

.box::after, .box-center{
  display:inline-block;
  vertical-align:middle;
}
.box::after{
  content:'';
  height:100%;
}
复制代码
居中元素高度不定
  • 可用 vertical-align 属性（vertical-align只有在父层为 td 或者 th 时才会生效,，对于其余块级元素，例如 div、p 等，默认状况是不支持的），为了使用vertical-align，咱们须要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle：
.box {
  height: 100px;
  display: table;
}

 .box-center{
    display: table-cell;
    vertical-align:middle;
}
复制代码
  • 可用 Flex 2012版, 这是CSS布局将来的趋势。Flexbox是CSS3新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题：
.box {
  height: 100px;
  display: flex;
  align-items: center;
}
复制代码

优势：内容块的宽高任意, 优雅的溢出. 可用于更复杂高级的布局技术中. 缺点：IE8/IE9不支持、须要浏览器厂商前缀、渲染上可能会有一些问题。

  • 可用 transform ，设置父元素相对定位：
.box {
  height: 100px;
  position: relative;
  background-color: pink;
}

.box-center {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  background-color: greenyellow;
}
复制代码

缺点：IE8不支持, 属性须要追加浏览器厂商前缀，可能干扰其余 transform 效果，某些情形下会出现文本或元素边界渲染模糊的现象。

居中元素高度固定
  • 设置父元素相对定位，子元素以下css样式:
.box {
  position:relative;
  height: 100px;
  background-color: pink;
}

.box-center{
  position:absolute;
  top:50%;
  // 注意不能使用百分比
  // margin的百分比计算是相对于父容器的width来计算的，甚至包括margin-top和margin-bottom
  height: 50px;
  margin-top: -25px;
}
复制代码
  • 设置父元素相对定位, 子元素以下css样式:
.box {
  position:relative;
  width: 200px;
  height: 200px;
  background-color: pink;
}

.box-center{
  position:absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 100px;
  background-color: greenyellow;
}
复制代码

水平垂直居中

  • Flex布局（子元素是块级元素）
.box {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: pink;
}

.box-center{
  margin: auto;
  background-color: greenyellow;
}
复制代码
  • Flex布局
.box {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: pink;
  justify-content: center;
  align-items: center;
}

.box-center{
  background-color: greenyellow;
}
复制代码
  • 绝对定位实现(定位元素定宽定高)
.box {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: pink;
}

.box-center{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background-color: greenyellow;
}
复制代码

用过Flex么，能简单介绍一下么

小提示：若是在项目中使用过，可简单介绍一下本身使用Flex解决过什么问题，这里我在项目中印象比较深入的是使用Flex解决上面内容高度不固定，下面内容高度自动撑满父容器剩余高度的问题。

若是不是很清楚Flex，能够查看阮一峰的文章Flex 布局教程：语法篇。面试官追问，那么除了Flex，你还知道Grid么？这个因为兼容性问题，我一直没有好好研究过，这里可查看阮一峰的文章CSS Grid网格布局教程。

bind的源码实现

小提示：这里我回答使用函数柯里化加上apply或者call可实现bind，面试官追问了一些具体的实现细节。

后来我本身粗糙的实现了一下，仅供参考：

Function.prototype.myCall = function (obj) {
  obj.fn = this
  let args = [...arguments].splice(1)
  let result = obj.fn(...args)
  delete obj.fn
  return result
}

Function.prototype.myApply = function (obj) {
  obj.fn = this
  let args = arguments[1]
  let result
  if (args) {
    result = obj.fn(...args)
  } else {
    result = obj.fn()
  }

  delete obj.fn

  return result
}

Function.prototype.myBind = function (obj) {
  let context = obj || window
  let _this = this
  let _args = [...arguments].splice(1)

  return function () {
    let args = arguments
    // 产生反作用
    // return obj.fn(..._args, ...args)
    return _this.apply(context, [..._args, ...args])
  }
}

function myFun (argumentA, argumentB) {
  console.log(this.value)
  console.log(argumentA)
  console.log(argumentB)
  return this.value
}

let obj = {
  value: 'ziyi2'
}
console.log(myFun.myCall(obj, 11, 22))
console.log(myFun.myApply(obj, [11, 22]))
console.log(myFun.myBind(obj, 33)(11, 22))
复制代码

伪类和伪元素的区别

小提示：这个问题我当时懵了一下，一会儿没反应过来面试官想要问什么，就答了这二者在CSS优先级上有区别，而后因为遇到不会的问题有些紧张就多说了一些废话，但显然这不是面试官想要的答案而且消耗了面试官面试的耐心，说他问的不是这个。这里再次提示你们，若是你感受你说不清楚，可是你又知道一点，我建议你说不知道，不要纠结，面试官不会由于你不知道一个问题就PASS你，相反你说了一些可有可无的废话，反而在消耗面试官的耐性，增长负面印象。

伪类和伪元素是用来修饰不在文档树中的部分，好比，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释：

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。好比说，当用户悬停在指定的元素时，咱们能够经过:hover来描述这个元素的状态。虽然它和普通的css类类似，能够为已有的元素添加样式，可是它只有处于dom树没法描述的状态下才能为元素添加样式，因此将其称为伪类。

伪元素用于建立一些不在文档树中的元素，并为其添加样式。好比说，咱们能够经过:before来在一个元素前增长一些文本，并为这些文本添加样式。虽然用户能够看到这些文本，可是这些文本实际上不在文档树中。

区别

伪类的操做对象是文档树中已有的元素，而伪元素则建立了一个文档树外的元素。所以，伪类与伪元素的区别在于：有没有建立一个文档树以外的元素。

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，好比::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。

小结

对于滴滴的此次面试，我感受到本身准备的不是很充分，尤为是本身简历上的项目技术Graphql。同时对于本身不会的题目强行作了一些解释说明，其实应该简洁明了的告诉面试官不会。

51信用卡（一面）

说说DOM事件流

在ES5中如何实现继承

小提示：这里我说了不少，从借用构造函数到组合继承到寄生组合继承，但面试官其实最想听到的是寄生组合继承。面试官还追问我具体要如何实现寄生组合继承。固然这里其实问的问题还能够不少，好比ES6的类继承和ES5中的继承有什么区别。

若是对于继承以及继承的区别不是很清楚的，能够随便看看我以前写的大笔记js类和继承。

绝对定位

小提示：这个建议你们好好回忆一下，例如子元素是相对父元素的padding、border仍是content进行定位之类的，当时面试官问的就这么细。

消抖和节流

小提示：面试官只是问了一下具体的使用场景，没有问实现原理。

简单消抖

function debounce (fn, wait = 1000) {
  let timeOutId

  return function () {
    let context = this

    if (timeOutId) {
      clearTimeout(timeOutId)
    }

    timeOutId = setTimeout(() => {
      fn.apply(context, arguments)
    }, wait)
  }
}
复制代码

带当即执行参数的消抖

function debounceImmediate (fn, wait = 1000, immediate) {
  let timeOutId, context, args

  const later = (immediate) => setTimeout(() => {
    if (!immediate) {
      fn.apply(context, args)
      timeOutId = context = args = null
    }
  }, wait)

  return function () {
    if (!timeOutId) {
      timeOutId = later(true)

      if (immediate) {
        fn.apply(this, arguments)
      }

      context = this
      args = arguments
    } else {
      clearTimeout(timeOutId)
      timeOutId = later(false)
    }
  }
}
复制代码

节流

function throttle (fn, wait) {
  let timeoutId = null
  return function () {
    let context = this
    if (!timeoutId) {
      timeoutId = setTimeout(() => {
        fn.apply(context, arguments)
        timeoutId = null
      }, wait)
    }
  }
}
复制代码

Vue中的computed实现原理

小提示：这个问题面试官问的很细，绝对是想问你是否阅读过源码。他首先问computed的实现原理，其次问了这样一个问题：如今有两个computed计算值，其中一个computed计算值为何能够依赖另一个computed计算值。这里顺便将watch的实现原理也贴上。

watch的实现原理

watch的分类：

  • deep watch（深层次监听）
  • user watch（用户监听）
  • computed watcher（计算属性）
  • sync watcher（同步监听）

watch实现过程：

  • watch的初始化在data初始化以后（此时的data已经经过Object.defineProperty的设置成响应式）
  • watch的key会在Watcher里进行值的读取，也就是立马执行get获取value（从而实现data对应的key执行getter实现对于watch的依赖收集），此时若是有immediate属性那么立马执行watch对应的回调函数
  • 当data对应的key发生变化时，触发user watch实现watch回调函数的执行

computed运行原理

  • computed的属性是动态挂载到vm实例上的，和普通的响应式数据在data里声明不一样
  • 设置computed的getter，若是执行了computed对应的函数，因为函数会读取data属性值，所以又会触发data属性值的getter函数，在这个执行过程当中就能够处理computed相对于data的依赖收集关系了
  • 首次计算computed的值时，会执行vm.computed属性对应的getter函数（用户指定的computed函数，若是没有设置getter，那么将当前指定的函数赋值computed属性的getter），进行上述的依赖收集
  • 若是computed的属性值又依赖了其余computed计算属性值，那么会将当前target暂存到栈中，先进行其余computed计算属性值的依赖收集，等其余计算属性依赖收集完成后，在从栈中pop出来，继续进行当前computed的依赖收集
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})
复制代码

因为 this.firstName 和 this.lastName （上面是Vue官方示例）都是响应式变量，所以会触发它们的 getter，根据咱们以前的分析，它们会把自身持有的 dep 添加到当前正在计算的 watcher 中，这个时候Dep.target就是这个 computed watcher，具体步骤以下：

  • data 属性初始化 getter setter
  • computed 计算属性初始化，提供的函数将用做属性 vm.fullName 的 getter
  • 当首次获取 fullName 计算属性的值时，Dep 开始依赖收集
  • 在执行 message getter 方法时，若是 Dep 处于依赖收集状态，则断定firstName和lastName为fullName 的依赖，并创建依赖关系
  • 当firstName或lastName 发生变化时，根据依赖关系，触发 fullName 的从新计算
  • 若是计算值没有发生变化，不会触发视图更新

经过以上的分析，咱们知道计算属性本质上就是一个 computed watcher，也了解了它的建立过程和被访问触发 getter 以及依赖更新的过程，其实这是最新的计算属性的实现，之因此这么设计是由于 Vue 想确保不只仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化才会触发渲染 watcher 从新渲染，本质上是一种优化。

computed计算值为何还能够依赖另一个computed计算值

小提示：这个问题当时彻底不知道，哎，官方源码的套路太深了......

这里但愿有大神能够补充说明一下。

周期函数有哪些（beforeCreated和created中间都作了什么

）

初始化 data、props、computed、watcher、provide。官方源码具体位置src/core/instance/init.js：

callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
复制代码

小结

51信用卡的此次面试其实面试官考察的点仍是蛮深刻的，问了一些Vue底层源码的实现，整体感受本身回答的还能够，可是面试官说：你应该去阿里...

阿里部门未知（一面）

说说Webpack的实现原理

小提示：这个直接回答不知道，问题较大，我这里猜想一下是相似Babel和AST抽象语法树相关，有空去看下源码。

这个问题但愿同窗能够补充一下。

首屏优化有哪些解决方案

小提示：这个问题在回答懒加载的过程当中，面试官追问懒加载的Webpack配置，我说了和代码切割相关。

关于懒加载，这里推荐一篇很是好的文章：Webpack 大法之 Code Splitting。

Node.js的加载机制（require和module.exports）

小提示：这个问题实际上是很是常见的问题，建议你们阅读一下源码，有些也可能会问一下比较简单的问题，例如module.exports和exports的区别，或者也可能问CommonJS引入和ES6引入的区别。

你以为你最擅长什么

小提示：这个问题是个大坑阿，我这里直接回答我什么都不擅长，这样回答显然面试官是不会不满意的，建议你们在面试前好好想一想本身到底擅长啥。

React和Vue的区别

小提示：这里React真的很久没用了，几乎忘记了，大体说了下单向数据流、双向数据绑定、数据监听方式、JSX以及Vue的单文件组件、函数式编程、Vue的指令之类的。

这个问题但愿同时熟悉React和Vue的同窗能够补充一下。

React、Vue和JQuery在什么场景下怎么选型

这个问题但愿同窗能够补充一下。

Vue的响应式原理

什么状况下会阻塞DOM渲染

小提示：面试官这里应该想问DOM渲染的过程当中可能有哪些状况会阻塞渲染。我当时回答不知道。

这个问题但愿同窗能够补充一下。

有哪些异步函数

小提示：回答了宏任务和微任务。

讲讲MVVM，说说与MVC有什么区别

小提示：这个问题我专门发了一篇掘金文章，可是不少人好像都不是很感兴趣的样子，可是面试官真的就问了这样一个问题。

这里推荐我以前写的掘金文章基于Vue实现一个简易MVVM/MV*设计模式的演变历史，一开始重点讲解了MVC、MVP以及MVVM的演变过程和区别。

阿里CBU技术部（一面）

说说z-index有什么须要注意的地方

小提示：真的忘记的差很少了，就简单说了只能在同一层叠上下文中进行z-index值比较、和绝对定位的关系，z-index值不须要设置过大，只须要理清楚层级关系便可。面试官追问了z-index值和background的覆盖关系，还追问了绝对定位元素以及后来居上的准则。面试官还问了z-index默认值是什么，0和auto有没有区别？真的对于CSS可能日常就用的很少，因此这个问题答的不是很好。

可能面试官最想知道的是下面这张图：

enter image description here

这里附上张鑫旭的文章深刻理解CSS中的层叠上下文和层叠顺序。

这里因为回答了定位，面试官追问固定定位的元素是相对于什么进行定位？相对定位会脱离正常文档流么？绝对定位是相对于什么元素进行定位？

熟悉CSS3动画么

小提示：CSS3动画硬件加速？CSS3动画的性能问题（重绘和重流，是否须要脱离正常文档流）？这个我当时答不知道，确实日常用的不多，若是熟悉Vue过渡动画的同窗能够讲讲过渡动画？

有没有作过什么可视化的项目

小提示：个人回答：地图算么？基于OpenLayers设计过地图的Vue组件库。

对于可视化但愿同窗能够补充一下。

你以为你最擅长的是什么

小提示：这个问题简直就是给人挖坑。

Flex实现两列布局

这里简单实现一下（其实应该使用flex-basis属性）：

<div class="box">
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>
复制代码
.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;
}
复制代码

ES6/ES7/ES8的特性

说说DOM事件流

小提示：面试官追问事件委托有什么优势（起码两个以上）、target/currentTarget/relateTarget具体指向什么目标。

你以为你有作过推进流程或者改善流程的事件么，举例说明

小提示：这个若是作过什么规范或者开发工具之类的，应该比较好回答。

小结

整体来讲此次面试面得很细，有些知识点已经忘记，建议你们面试前把一些感受不是很熟悉的原生知识点回忆起来，尤为是在开发中都不怎么会使用一些CSS样式设计的童鞋（如今不少都是组件库的设计方案，样式早已经封装掉了）。

阿里企业智能事业部（一面）

Event Loop

Webpack的loader和plugins的区别

小提示：当时直接回答不知道，确实Webpack我只会用，还没了解过内部的实现原理和构成。这个后续不管如何都要好好理解一下原理。

这个问题但愿同窗能够补充一下。

HTTP状态码206是干什么的

小提示：工做中没有遇到过须要上传下载大型文件，因此这个问题当时老老实实回答不知道。具体应该和断点续传相关，可能也须要回答一些range的头部信息等。

React高阶组件的做用有哪些

小提示：很久没用过React了，大体只知道Racct是单向数据流的，利用高阶组件能够实现相似于Vue的双向数据绑定。

这个问题但愿同窗能够补充一下。

React和Vue的区别

Service Worker有哪些做用

小提示：当时怕说错，老老实实回答不知道。后来查了一下应该和缓存以及HTTP请求拦截相关。

这个问题但愿同窗能够补充一下。

跨域

文件上传的二进制具体是怎么处理的

小提示：只知道上传的头信息是application/x-www-form-urlencoded，也能够对上传的文件的数据进行拦截处理，例如对上传文件的信息进行加密处理。

这个问题但愿同窗能够补充一下。

Vue响应式原理

首屏加载性能优化

小结

其实这一次面试本身感受面试的不是很好（尽管面试官问的确实比我上面列出的问题多），由于有好几个问题本身确实不清楚。这里再次建议你们不知道就是回答不知道，这样不会对面试官形成一些负面印象。这一次面试可以经过运气占了很大一部分。

阿里企业智能事业部（二面）

computed的实现原理

Vue的整个实现原理

小提示：当时面试官问的蛮好玩的，他问从开始写一个.vue文件开始到DOM渲染到页面上，Vue作了哪些工做。而后我当时没理解面试官是要问vue-loader？DOM树的渲染过程？来来回回试探性的问了面试官几回，才理解原来面试官想知道Vue源码的整个实现过程。

你们若是想了解Vue源码实现的整个粗略过程，能够看下以前写的文章基于Vue实现一个简易MVVM/Vue的运行机制简述。

通信

小提示：因为这边涉及到一些海康的设备（上下位机通讯），面试官问我如何知道上位机软件给下位机设备发送了5次信息。这个其实大部分Web前端开发在工做上很难遇到相似的问题，辛亏我之前毕业设计中作过上下位机的TCP通信。后来我从Leader面那里了解到二面面试官应该是作iot物联网开发这一块的。

请求帧数据结构以下：

帧头 帧序号 帧负载 帧校验 帧尾
2 Byte 1 Byte N Byte 1 Byte 1 Byte

这里帧头使用2字节识别，校验能够采用CRC校验，帧序号用来识别发送了几回信息。

Chrome插件如何屏蔽广告

小提示：这个问题当时回答不知道，其实后面想一想最简单的办法是先找出广告元素的一些通用特性，而后在Chrome插件中经过注入脚本的形式将这些广告元素隐藏掉。

这里不知道有没有更好的其余方式，例如不知道Service Work对请求拦截处理是否能够有效屏蔽广告等，这个问题但愿同窗能够补充一下。

如何判断两个变量相等

小提示：这里须要分基本类型和引用类型，面试官在这里具体想问的是Object.is的实现原理。这是面试官问个人第一个问题，当时直接回答不知道，心里都以为接下来要凉凉了。

Watch的运行原理

Vue的数据为何频繁变化但只会更新一次

小提示：这里问的是Vue源码对于视图更新的优化。我这里的回答是乱糟糟的，但愿有同窗可以给出一个精准而且简短的回答。

Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的全部数据改变。若是同一个 watcher 被屡次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免没必要要的计算和 DOM 操做上很是重要。而后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工做。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel，若是执行环境不支持，会采用 setTimeout(fn, 0) 代替。

另外，关于waiting变量，这是很重要的一个标志位，它保证flushSchedulerQueue回调（$nextTick中执行）容许被置入callbacks一次。

由于Vue的事件机制是经过事件队列来调度执行，会等主进程执行空闲后进行调度，因此先会去等待全部的同步代码执行完成以后再去一次更新。这样的性能优点很明显，好比：

如今有这样的一种状况，mounted的时候test的值会被循环执行++1000次。 每次++时，都会根据响应式触发setter->Dep->Watcher->update->run。 若是这时候没有异步更新视图，那么每次++都会直接操做DOM更新视图，这是很是消耗性能的。 因此Vue实现了一个queue队列，在下一个tick（或者是当前tick的微任务阶段）统一执行queue中Watcher的run。同时，拥有相同id的Watcher不会被重复加入到该queue中去，因此不会执行1000次Watcher的run。最终更新视图只会直接将test对的DOM的0变成1000。 保证更新视图操做DOM的动做是在当前栈执行完之后下一个tick（或者是当前tick的微任务阶段）的时候调用，大大优化了性能。

执行顺序update -> queueWatcher -> 维护观察者队列（重复id的Watcher处理） -> waiting标志位处理（保证须要更新DOM或者Watcher视图更新的方法flushSchedulerQueue只会被推入异步执行的$nextTick回调数组一次） -> 处理$nextTick（在为微任务或者宏任务中异步更新DOM）->

  • Vue是异步更新Dom的，Dom的更新放在下一个宏任务或者当前宏任务的末尾（微任务）中进行执行

因为VUE的数据驱动视图更新是异步的，即修改数据的当下，视图不会马上更新，而是等同一事件循环中的全部数据变化完成以后，再统一进行视图更新。在同一事件循环中的数据变化后，DOM完成更新，当即执行nextTick(callback)内的回调。

vue和react同样，对dom的修改都是异步的。它会在队列里记录你对dom的操做并进行diff操做，后一个操做会覆盖前一个，而后更新dom。

Event Loop

除了Flex还能够用什么进行布局

小提示：我猜这里面试官想问的是Grid，当时说不知道。

绝对定位、固定定位和z-index

小提示：感谢CBU技术部的面试官。

绝对定位

  • 一旦给元素加上absolute或float就至关于给元素加上了display:block
  • absolute元素覆盖正常文档流内元素（不用设z-index，天然覆盖）
  • 能够减小重绘和回流的开销（如absolute+ top:-9999em，或absolute + visibility:hidden，将动画效果放到absolute元素中）

属性介绍

  • static，默认值。位置设置为static的元素，它始终会处于文档流给予的位置。
  • inherit，规定应该从父元素继承 position 属性的值。可是任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
  • fixed，生成绝对定位的元素。默认状况下，可定位于相对于浏览器窗口的指定坐标。元素的位置经过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。不论窗口滚动与否，元素都会留在那个位置。但当祖先元素具备transform属性且不为none时，就会相对于祖先元素指定坐标，而不是浏览器窗口。
  • absolute，生成绝对定位的元素，相对于距该元素最近的已定位的祖先元素进行定位。此元素的位置可经过 “left”、”top”、”right” 以及 “bottom” 属性来规定。
  • relative，生成相对定位的元素，相对于该元素在文档中的初始位置进行定位。经过 “left”、”top”、”right” 以及 “bottom” 属性来设置此元素相对于自身位置的偏移。

浮动、绝对定位和固定定位会脱离文档流，相对定位不会脱离文档流，绝对定位相对于该元素最近的已定位的祖先元素，若是没有一个祖先元素设置定位，那么参照物是body层。

绝对定位相对于包含块的起始位置：

  • 若是祖先元素是块级元素，包含块则设置为该元素的内边距边界。
  • 若是祖先元素是行内元素，包含块则设置为该祖先元素的内容边界。

问答题：

  • 定位的元素的起始位置为父包含块的内边距（不会在border里，除非使用负值，会在padding里）
  • 定位的元素的margin仍是能起做用的
  • background属性是会显示在border里的
  • z-index是有层叠层级的，须要考虑同一个层叠上下文的层叠优先级
  • z-index是负值不会覆盖包含块的背景色（可是若是有内容，会被包含块的内容覆盖）
  • z-index的值影响的元素是定位元素以及flex盒子
  • 上面一个定位元素，下面一个正常流的元素，定位元素会覆盖在正常流元素之上，除非给z-index是负值
  • 页面根元素html天生具备层叠上下文，称之为“根层叠上下文”

小结

这一次面试官问个人第一个问题Object.is就没答上来，不过面试官显然没有由于开头答的很差就否认面试者。你们若是在面试时第一个问题就答不上来，不要慌，要保持良好的心态，把接下来能答的问题好好答上来。可能不少同窗会疑问，好像还有好几个问题感受没答上来，可是可能只要有一个问题答的很是出彩，仍然能够弥补那些没答上来的问题（这里面试官当时说Vue源码的实现过程我说的比较清楚，尚未一个面试者答的比我更清楚的）。

阿里企业智能事业部（Leader面）

三面是Leader现场面，我当时特别担忧有赞二面的状况发生，冷不丁又给你来一道算法题，这些真是我最不擅长的点。由于有点心虚我就问了下在阿里的师兄（师兄可能也作招聘工做，当时还怪我没有找他内推...），他说现场面其实最主要的是好好准备简历上的内容，面试官通常都会根据简历进行问答，还说他当时面试阿里时会让他画一些框架层次图（这个我当时没在乎，结果面试官确实让我根据其中某个项目画一个框架层次图）。Leader面的时候在场的有两个面试官和一个HR。

Leader（一）面试

先是进来一个气场很足的Leader，看起来很权威，可是问问题还蛮随意的，就简单的让我介绍一下本身作的项目，而后翻看了我作的一些东西。感受他好像有点心不在焉，翻看的很随意，我在回答问题的时候用余光关注了一下大佬的表情，感受他在我项目经历那一块停留了很是长的时间。

Leader（二）面试

我正回答着本身的项目经历，Leader二和HR进来了，等我回答完Leader一就让Leader二开始面我。Leader二就问了我其中的两个项目。问个人第一个项目是本身作的公司内部的工具，他问这个平台有什么能够衡量的数据代表公司内部人员的使用状况。我回答当时由于领导以为不必作，就没有作数据统计这一块，告诉了他数据库里的一些真实数据状况。而后他问PV、UV应该怎么统计（我当时还厚脸皮的问他PV和UV是什么）？若是访问的页面出不来PV怎么统计？页面有没有作什么行为监测？页面访问量过大怎么处理？我大体讲了一些个人思路。

接着问我第二个项目（Low Code相关），我就回答了这个项目的技术体系，从之前作了什么到如今作到什么程度，到将来须要作成什么样，通通仔细的说了一遍。Leader二就问我将来作成什么样能不能思考一下怎么作，给了我5分钟的时间（这期间他一直反复的在翻阅个人简历）。而后我就伪装思考了5分钟左右，其实脑子里一片空白，当时对于将来要作成什么样还只是个构思。而后Leader二仍是很体贴的，他说你能够在墙上画一画（墙上能够写字），我就大体画了画，Leader二问我能不能画一画这个项目的框架层次图，我就简单的画了画...最后Leader二直接说大家作的太Low了，这个（Low Code）在咱们这里已是两年前的技术了...（这个我仍是要解释下，我所在的部门从开始用Vue到目前只有短短的两年时间，在这两年时间里技术体系仍是飞速的在沉淀和发展，我离开以前已经构思并实现了部分Vue技术栈的Low Code解决方案，若是这方面感兴趣的同窗也能够找我沟通）。

Leader二还蛮好玩的，他说Low Code若是真的作出来了，都没前端什么事情了，那你干吗去？顺着这个问题他还问我将来的前端应该怎么发展？将来前端有哪些能够挖掘的点？我回答了一些Graphql、可视化等，我还说了一个特别搞笑的回答，我说从以往的发展来看，前端应该抢占后端的资源，把后端限制咱们的事情让前端也能作，让前端更加解放。Leader二当场就进行了反驳，说是要有价值才作，而不是为了能作而作，吓得我不轻...而后Leader二还详细的跟我解释了将来发展这个问题他但愿获得什么回答，当时仍是以为Leader二蛮亲切的。

HR面试

Leader二问完之后HR就接着问我了如下几个问题：

  • 为何要离开如今的公司
  • 之前公司的岗位制度是什么样
  • 你是校招进去的么
  • 你如今的岗位等级状况
  • 你的绩效状况
  • 你领导对你的评价是怎么样的
  • 领导是否是常常找你沟通

而后Leader一顺着HR问了一个小问题：

  • 你将来对于你的职业有什么规划

最后问我还有什么想问的，我当时已经被三我的问的有点迷迷糊糊了，而后想了想说没有。

小结

此次现场面其实我感受本身面得不是很好，总感受本身要挂了。总共面了将近1个半小时左右，尤为是Leader二的问题不少不是他想要的答案，可是最终竟然过了。

阿里企业智能事业部（HR面）

企业智能事业部Leader面后又收到了HR面的面试通知，这一轮面试大体问了如下问题：

  • 你为何要离开如今的公司
  • 大家公司的岗位等级是怎么评定的，你如今是什么岗位等级
  • 谈谈你在公司的绩效状况
  • 你以为你作的最有成就感的一件事
  • 你通常解决问题的方法有哪些
  • 你是由于什么契机选择作前端
  • 你有对你所在的公司作过什么流程或制度规范上的改进么
  • 你最近在看什么书，和工做相关么，你为何要看这些书
  • 看到你以前还面试了其余两个部门都挂在了一面，你感受是什么缘由
  • 你指望的薪资待遇是多少

小提示：这里HR会问的其实不止这些问题，例如你为何喜欢Web前端这个岗位、你将来的职业规划、你以为你的优势和缺点有哪些、为何选择阿里巴巴、对以前几个面试官作下评价、你用过阿里的哪些产品顺便谈谈这些产品的优缺点、你对于互联网是怎么理解的...

小结

对于HR面仍是要好好准备的，尤为是有些问题仍是很容易挖坑的，例如你为何离开如今的公司（你固然不该该抱怨如今的公司有哪些很差的地方，更多的应该代表本身想要寻找更好的发展机会，本身的一些现实因素，好比对于我而言是如今应聘的公司离本身的家更近，又或者是本身工做到达了迷茫期，想跳出迷茫期等等），你以为你作的最有成就感的一件事（你要是说个简单的，HR会以为你工做能力不强），你通常解决问题的方法有哪些（HR固然也想考察你解决问题的能力，你要是说什么百度啊之类的HR固然会以为你解决问题的能力不强），你指望的薪资待遇是多少（你要是不喜欢这家公司，能够指望高一些，你要是很喜欢这家公司面试过程很愉快上浮个30%左右，面试过程通常上浮个20%左右）。

友情连接

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程