在阿里我是如何当面试官的

时间  2021-08-12
标签 javascript css html 前端 vue java node react webpack ios 栏目 阿里巴巴 繁體版
原文   原文链接

前言

因为疫情关系，最近在掘金看到不少同窗的工做状况心里仍是蛮触动的（降薪、变相裁人、辞退等）。可能这并非当下一个广泛的现象，但仍然使我感觉到前端这碗青春饭很差混。于此同时联系我内推的同窗不少都处于待业状态，能感觉到他们心里的迷茫和焦灼。因而心里一直有声音督促我，赶忙写点面试相关的东西出来吧，哪怕对你们只有一丝丝的帮助。固然此次我会以面试官的角度出发（可能不是一个优秀的面试官），让你们更加了解阿里的面试流程、面试数据和面试场景等。接下来我会从如下几个模块来说解：javascript

  • 招聘流程
  • 内推数据
  • 面试数据
  • 面试注意点
  • 面试题解析

舒适提示：入职前以应聘者的角度写了一篇面试相关的文章《面试分享：两年工做经验成功面试阿里 P6 总结》，收到了不少同窗对个人感谢，特别高兴他们能所以找到心中理想的工做，这也给我写文章带来了极大的动力。但愿正在找工做的同窗能够看看，或许能对你产生一些帮助。css

招聘

Hi，你们好，咱们是阿里巴巴新成立的 BU 政务钉钉事业部（杭州同窗在用的健康码是我 BU 联合其余 BU 共同设计的一个项目），目前还有大量的 Web 前端职位空缺。除此以外，咱们已经开启校招通道，正在招聘优秀的实习生（今年 6 月份毕业的应届生通道已关闭）。但愿想找我内推或者想了解更多招聘信息的同窗能够加我微信：18768107826html

招聘流程

阿里的招聘流程可能相对较长，通常状况下若是走「内推」渠道，可能会经历如下几个步骤：前端

  • 简历筛选
  • 简历评估
  • 一轮技术面
  • 二轮技术面
  • 三轮技术面
  • 一轮 HR 面
  • 二轮 HR 面

若是你运气够好，可能只须要 4 面左右（没有三轮技术面、二轮 HR 面）。若是你运气很差，那么可能存在 5 ~ 6 面的状况。vue

舒适提示：咨询了一些朋友，通常的面试（小米、滴滴、新浪以及腾讯等）可能都须要经历 4 面以上，固然也有朋友经历了网易的 3 面（二轮技术面 + 一轮 HR 面）。若是有知道其余公司的招聘状况，也能够在评论中告知你们，以便更好的应对面试。java

内推数据

入职半年以来断断续续收到掘友们的内推简历。这里将内推的数据整理了一下，供你们有个体感：node

须要注意不是收到内推简历就会当即投递，会先有一个纯粹的简历筛选过程，所以上传简历和简历评估会有数量的差异。除此以外，当前尚未遇到被 HR 拒绝的状况。固然从内推数据能够看出，其中关键性的面试是简历评估和一轮技术面（一般对于应聘者而言是一面和二面）。react

舒适提示：上传简历会被录入阿里的人才库，若是简历不在面试流程中（或者简历在某部门面试后被释放），那么其余感兴趣的部门会发起新的招聘邀约。webpack

面试数据

因为进入公司不久，通常我都是做为简历评估的面试官，少数时候会做为一轮技术面的面试官，这里将我做为面试官的数据整理以下：ios

感受和内推数据中的简历评估经过率相比，我在简历评估的时候会更加谨慎......

面试注意点

在面试的过程当中，我印象最深的几点感觉必定要告知你们：

  • 一、回答问题不要过于着急，必定要耐心等待面试官把问题说完
  • 二、回答问题要有逻辑、干练简洁
  • 三、若是面试官打断你说话，此时必定要谨慎回答，由于颇有可能你回答过于繁琐且他对你当下的回答不满意
  • 四、一个问题不要纠结好久.....
  • 五、不会的面试题必须干脆利落的说不会
  • 六、面试的时间最好控制在 30 ~ 40 分钟左右，这样互相之间的体验不会不好
  • 七、面试是一个挖掘面试者能力和潜力的过程
  • 八、面试官不是全能的，面试必定是一个互相学习的过程
  • 九、必定要提早准备好本身想要问的问题，最致命的是别人把你安排的明明白白结果你对别人一无所知.....

关于第 2 点仍是要说明一下，不少面试者回答问题没有逻辑性，在回答以前能够先思考一下，而后告诉面试官将从 n 个方面进行讲解，首先第 1 个方面是...，其次第 2 个方面是...

舒适提示：面试的时候发现大部分的面试者广泛存在 1 和 2 两个问题。若是你的回答没有逻辑还繁琐且没有命中要点，一般面试官对你的印象会很是差。相反，若是你回答问题过于简洁，一般状况下面试官会以为你没 Get 到他的问题点（固然会怀疑本身的表述有没有问题），通常都会追加更详细的问题描述。

面试题解析

通常在面试开始前，我会根据应聘者的简历提早准备 8 道左右的面试题（在面试的过程当中可能会有调整），最终分析了一下笔试题数据以下：

舒适提示：这数据不包括追加的面试题，是提早为应聘者准备的面试题数据。在真正的面试中，面试题可能会由于策略和现场面试状况进行临时调整和追加。

因为自己对 React 熟悉还不够，所以我遇到应聘者若是是 React 技术栈会相对吃亏一些。接下来我会重点讲解一些面试题，有些简单的面试题不会出解答思路（有些面试题可从《面试分享：两年工做经验成功面试阿里 P6 总结》中找到答案），没有给出答案的面试题但愿你们在评论中给出，供别人参考。

HTML 篇

在 HTML 中如何作 SEO 优化？

建设中...

首屏和白屏时间如何计算？

参考连接

CSS 篇

了解 Flex 布局么？日常有使用 Flex 进行布局么？

解题思路

  • 首先得说出 Flex 布局概念，Flex 的结构组成（Flex Container 、Flex Item），遇到的全部面试者都没有此回答
  • 其次能够讲讲本身日常用的最多的 Flex 属性
  • 最后能够讲讲本身平时经常使用的布局（左右两列，上下两行等）

参考连接

CSS 中解决浮动中高度塌陷的方案有哪些？

解题思路

  • 能够先归纳解决高度塌陷问题的两种类型：clear 属性 和 BFC 法
  • 而后能够介绍两种类型的具体方案：
    • 追加元素并设置 clear 属性
    • 使用 CSS 样式插入伪元素
    • Bootstrap 的解决高度塌陷方案（BFC）

可能追加的面试题（详见参考连接）

  • 高度塌陷产生的缘由是什么？
  • clear 属性清除浮动的原理是什么？
  • 采用 BFC 解决高度塌陷和clear 属性清除浮动相比的优点是什么？

参考连接

Flex 如何实现上下两行，上行高度自适应，下行高度 200px？

解题思路

  • flex-direction: column
  • flex: 1

如何设计一个 4 列等宽布局，各列之间的边距是 10px（考虑浏览器的兼容性）？

解题思路

  • 浮动和清除浮动
  • margin 负值的做用（可参考 Bootstrap 3 中栅格容器.container的样式）
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style> * { margin: 0px; padding: 0px; } .container { margin-right: -10px; } .row { box-sizing: border-box; padding-right: 10px; width: 25%; height: 100px; float: left; } .container::before { display: table; content: ''; } .container::after { display: table; content: ''; clear: both; } </style>
  </head>
  <body>
    <div class="container">
      <div class="row">第一列</div>
      <div class="row">第二列</div>
      <div class="row">第三列</div>
      <div class="row">第四列</div>
    </div>
  </body>
</html>
复制代码

可能追加的面试题

  • 若是你回答的是 Table 布局，那必定会追问 Table 布局和 Div 布局有什么区别？

CSS 如何实现三列布局，左侧和右侧固定宽度，中间自适应宽度？


CSS 清除浮动的原理是什么？

解题思路

利用清除能够设置元素禁止浮动元素出如今它的左侧、右侧甚至是双侧。

<style> div { display: inline-block; width: 40%; height: 100px; background: #d3cff7; margin-right: 10px; margin-bottom : 0; padding: 0; } .float { float: left; } .box { height: 50px; } p { border: 1px solid black; margin:0; padding:0; width: 80%; } </style>

<div class="float"></div>
<div class="box"></div>
<p>3333333333333333333333333333333333333333333</p>
复制代码

1
2

3333333333333333333333333333333333333333333


因为 div1 浮动，p 和 div1 布局重叠，为了解决这个问题，可使 p 元素左侧不容许有浮动元素，给 p 元素添加一个 clear:left 的样式以后
1
2

3333333333333333333333333333333333333333333


能够发现 p 的位置下移从而使 p 和 div1 布局不会重叠，实际上是使用清除以后，自动增长了 p 元素的上外边距，确保它落在浮动元素 div1 的下面。CSS2.1 引入了清除区域的概念，清除区域是在元素上外边距之上增长的额外间隔（确保浮动元素不会与该元素重叠），不容许浮动元素进入这个范围，意味着设置 clear 属性的 p 元素的外边距并不改变，之因此该元素会向下移动是由于清除区域形成的。div1 和 div2 的高度分别是 100px 和 50px， 所以清除区域的高度在 50px 左右（不算 border 和浏览器代理初始样式等）。若是给 p 元素一个上外边距 margin-top:30px，则 p 元素并不会向下移动 30px，而是在解析完样式以后清除区域的高度变成了 50px - 30px 左右，而 p 元素仍然位置不变，若是要使 p 元素下移，则须要使 p 元素的 margin-top 值高于最大的清除区域高度 50px，而且向下位移的距离也是 margin-top 值减去最大的清除区域高度。

BFF 的做用有哪些？

参考连接

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

CSS 中的 vertical-align 有哪些值？它在什么状况下才能生效？

解题思路

vertical-align属性值：

  • 线类：baseline、top、middle、bottom
  • 文本类：text-top、text-bottom
  • 上标下标类：sub、super
  • 数值百分比类：20px、2em、20%等（对于基线往上或往下偏移）

舒适提示：负值相对于基线往下偏移，正值往上偏移，事实上vertical-align:base-line等同于vertical-align:0。这个负值真的是 CSS 神器！

vertical-align生效前提：

  • 内联元素span、strong、em、img、button、input等
  • display值为inline、inline-block、inline-table或table-cell的元素
  • 须要注意浮动和绝对定位会让元素块状化，所以此元素绝对不会生效

CSS 中选择器有哪些？CSS 选择器优先级是怎么去匹配？

建设中...

伪元素和伪类有什么区别？

参考连接

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

CSS 中的 background 的 background-image 属性能够和 background-color 属性一块儿生效么？

可能追加的面试题

  • background-color 属性能够覆盖 background-image 属性吗？

了解 CSS 3 动画的硬件加速么？在重绘和重流方面有什么须要注意的点？

参考连接

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

CSS 能够作哪些优化工做 ?

建设中...

浮动元素和绝对定位元素的区别和应用?

建设中...

CSS 中哪些属性能够继承？

JavaScript / TypeScript 篇

JavaScript 中数组是如何存储的？

解题思路

  • 同种类型数据的数组分配连续的内存空间
  • 存在非同种类型数据的数组使用哈希映射分配内存空间

舒适提示：能够想象一下连续的内存空间只须要根据索引（指针）直接计算存储位置便可。若是是哈希映射那么首先须要计算索引值，而后若是索引值有冲突的场景下还须要进行二次查找（须要知道哈希的存储方式）。

可能追加的面试题

  • JavaScript 中的数组为何能够不须要分配固定的内存空间？
  • JavaScript 中数组的存储和 C / C++ / Java 中数组的存储有什么区别？
  • JavaScript 中数组是否能够理解为特殊的对象？
  • JavaScript 中数组和 C / C++ / Java 中数组存储在性能上有什么区别？
  • JavaScript 中的 Array 和 Node.js 中的 Buffer 有什么区别？
  • JavaScript 中的数组什么时候是连续存储的，什么时候是哈希存储的？
  • 哈希存储的键冲突（散列碰撞）能够有哪些解决方案（开链法、线性探测法、红黑树等）？

参考连接

聊聊继承以及说说 ES5 和 ES6 继承的区别？

解题思路

  • ES5 的继承使用借助构造函数实现，实质是先创造子类的实例对象this，而后再将父类的方法添加到this上面。ES6 的继承机制彻底不一样，实质是先创造父类的实例对象this（因此必须先调用super方法），而后再用子类的构造函数修改this。
  • ES6 在继承的语法上不只继承了类的原型对象，还继承了类的静态属性和静态方法
  • ...

参考连接

说说对原生 JavaScript 的理解？

解题思路

  • JavaScript 实现包含的几个部分
  • JavaScript 的语言类型特性
  • 解释性脚本语言（对标编译性脚本语言）
  • 面向对象（面向过程）
  • 事件驱动 / 异步 IO
  • 缺乏的关键性功能等（块级做用域 、模块、子类型等）
  • 自由...

谈谈你对 TypeScript 的理解？

解题思路

  • 类型批注和编译时类型检查
  • 类
  • 接口
  • 模块
  • 装饰器
  • 声明文件（相似于 C 中的头文件）
  • 对 ES 6 的支持
  • 语法提示
  • ESLint（TSLint 不推荐）
  • ...

JavaScript 中几种迭代语法在 Chrome 等现代浏览器中的性能差别？

面试题来源

应聘者简历里写了熟悉高性能 JavaScript 开发

解题思路

  • 考察 for、for...of、for...in、forEach、while、do...while等
  • 可使用 console.time 和 console.timeEnd 进行测试
  • 注意现代浏览器屡次执行的性能优化问题
  • ++ 和 -- 有没有区别
  • 遍历的时候是否存在查找原型链的过程

可能追加的面试题

  • 字面量 / 数组 / 对象存储性能有没有什么区别？
  • 条件比较多的时候 if-else 和 switch 性能哪一个高？
  • 高性能的 JavaScript 开发在语法层面你以为有哪些能够提高性能？
  • 如何在代码中减小迭代次数？
  • 如何实现一个 Duff 装置？

如何提高 JavaScript 变量的存储性能？

解题思路

  • 访问字面量和局部变量的速度最快，访问数组元素和对象成员相对较慢
  • 因为局部变量存在于做用域链的起始位置，所以访问局部变量比访问跨做用域变量更快，全局变量的访问速度最慢
  • 避免使用with和catch，除非是有必要的状况下
  • 嵌套的对象成员会明显影响性能，尽可能少用，例如window.location.href
  • 属性和方法在原型链中的位置越深，则访问它的速度也越慢
  • 一般来讲，须要访问屡次的对象成员、数组元素、跨做用域变量能够保存在局部变量中从而提高 JavaScript 执行效率

浏览器和 Node.js 的事件循环机制有什么区别？

参考连接

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

比较一下 TypeScript 和 JavaScript，在什么状况下你以为须要 TypeScript ?


在 JavaScript 中如何实现对象的私有属性?


async / await 和 Promise 的区别?

解题思路：

  • await 会等待异步代码执行，会阻塞代码（使用时要考虑性能）
  • async / await在调试方面会更加方便

在 JavaScript 能够有哪几种形式实现继承，各有什么优缺点？

解题思路

类型 优缺点
构造函数模式 能够建立不一样实例属性的副本，包括引用类型的实例属性，可是不能共享方法
原型模式 引用类型的属性对于实例对象而言共享同一个物理空间，所以能够共享方法
原型链 对父类实现方法和属性继承的过程当中，父类实例对象的引用类型属性在子类的实例中共享同一个物理空间，由于父类的实例对象指向了子类的原型对象
借用构造函数 解决了继承中的引用值类型共享物理空间的问题，可是无法实现方法的共享
组合继承 属性的继承使用借用构造函数方法，方法的继承使用原型链技术，即解决了引用值类型共享的问题，又实现了方法的共享，可是子类的原型对象中还存在父类实例对象的实例属性
寄生组合继承 组合继承已经能够解决大部分问题，可是也有缺陷，就是会调用两次父类的构造函数，一次是实现原型时使子类的原型等于父类的实例对象调用了父类构造函数（同时在子类的原型对象中还存在了父类实例对象的实例属性），一次是使用子类构造函数时调用了一次父类构造函数。寄生组合式继承能够解决在继承的过程当中子类的原型对象中还存在父类实例对象的实例属性的问题。

参考连接

React 篇

React 中的 setState 为何须要异步操做？

解题思路

  • 保持内部一致性：props 的更新是异步的，由于re-render父组件的时候，传入子组件的props才变化；为了保持数据一致，state也不直接更新，都是在flush的时候更新
  • 将state的更新延缓到最后批量合并再去渲染对于应用的性能优化是有极大好处的，若是每次的状态改变都去从新渲染真实 DONM，那么它将带来巨大的性能消耗
  • 当即更新回来视觉上的不适应，好比在页面打开时候，多个请求发布致使频繁更改Loading 状态，会致使 Loading 图标闪烁

可能追加的面试题

  • 何时setState会进行同步操做？
  • React 官方对于setState特定状况下进行同步操做的优化方案是什么？
  • React 中 setState 后想要拿到更新的state值应该怎么处理？

参考连接

React 应用如何在从新加载页面时保留数据？

解题思路

  • localStorage 结合 Redux
  • url query（注意长度限制）

使用 React Hooks 的同时为何须要使用高阶组件？

面试题来源

简历中写着使用 Hooks 结合高阶组件完成业务开发

解题思路

  • 反向入坑问题，若是是业务迁移能够说明进行部分改造迁移致使
  • 正向说明 Reat Hooks 中不须要高阶组件的写法，例如 Redux 举例
  • 自定义 Hook

可能追加的面试题

  • 彻底用 Hooks 的写法是否能够摒弃高阶组件的写法？
  • 怎么使用 Hooks 替代高阶组件？

参考连接

Ajax 请求放在 componentDidMount 里进行处理仍是放在componentWillMount 里进行处理比较合适？

解题思路

  • 服务端渲染
  • Event Loop

gaearon ：If it's an async request, it won't be fulfilled by the time the component mounts anyway, regardless of where you fire it. This is because JS is single threaded, and the network request can't "come back" and be handled while we are still rendering. So the difference between firing it earlier and later is often negligible.

You're right that it matters in some rare cases though and for those cases it might make sense to break the recommendation. But you should be extra cautious as state can update before mounting, and if your data depends on state, you might have to refetch in that case. In other words: when in doubt, do it in componentDidMount.

The specific recommendation to avoid side effects in the constructor and Will* lifecycles is related to the changes we are making to allow rendering to be asynchronous and interruptible (in part to support use cases like this better). We are still figuring out the exact semantics of how it should work, so at the moment our recommendations are more conservative. As we use async rendering more in production we will provide a more specific guidance as to where to fire the requests without sacrificing either efficiency or correctness. But for now providing a clear migration path to async rendering (and thus being more conservative in our recommendations) is more important.

JS 是单线程，Ajax 请求不会 "返回" 而且触发当咱们正在 rendering 的时候（Ajax 的执行结果会放到任务队列中，等主线程执行完后采起读取任务队列中的任务进行执行），由于理论上放在哪里结果都同样，都会执行两次 render。

这样的话，就不必在componentWillMount中调用 Ajax，以免理解不到位，对state的结果预计错误。componentDidMount的执行很明了，不会引发歧义，因此在componentDidMount中最合理了。

可能追加的面试题

  • 说说 React 官方推荐 Ajax 请求放在 componentDidMount 里进行处理，而不是放在 componentWillMount 里进行处理？
  • 若是 Ajax 请求放在 componentWillMount 里进行处理，且 Ajax 的返回结果在 render 以前，那么最终会执行几回 render ?

参考连接

React 在语法层面能够作哪些性能优化？

解题思路

  • PureComponent + Redux + immutable-js / immutability-helper
  • Redux -> Redux Toolkit
  • 组件库按需加载
  • 动态 Ployfill
  • Tree Shaking
  • 路由懒加载
  • Hooks useCallback
  • React Fragments
  • 构建函数中的事件 bind 处理
  • 避免使用内联样式属性
  • JSX 中合理控制条件渲染的范围（避免无谓的重复渲染）
  • key
  • 保持 state 中数据必响应的特性

可能追加的面试题

  • 深比较和浅比较的区别是什么？
  • 日常在 render 时有哪些须要注意的地方？

React 和 Vue 的区别？

框架 React Vue 2.x
类型 MVVM MVVM
响应式 √ √
组件化 √ √
脚手架 Create React App Vue CLI
路由 react-router vue-router
状态管理 react-redux / React Hooks / MobX vuex
总体思路 函数式、单向数据流 声明式、表单双向绑定
组件优化 PureComponent / shouldComponentUpdate 可理解为自动化 shouldComponentUpdate
HTML JSX (结构 & 表现 & 行为融合、完整的 JavaScript / TypeScript 语法支持、先进的开发工具 Lint / 编辑器 Auto 等) Template（结构 & 表现 & 行为分离、HTML 更友好、开发效率提高、文档学习成本） / JSX
CSS CSS 做用域须要额外实现，例如一些 CSS-in-JS 方案（styled-components、styled-jsx），通常须要额外的插件支持语法高亮和提示 单文件组件 Style 标签
Chrome 开发工具 react-devtools vue-devtools
优点 大规模应用程序的鲁棒性（灵活的结构和可扩展性）、适用原生 App、丰富的生态圈、丰富的工具链 一站式解决方案、更快的渲染速度和更小的体积

除此以外，在语法层面：

  • 在复用层面 React 可经过高阶函数、自定义 Hooks 实现。而 Vue 在大部分状况下使用 Mixin。
  • Vue 的组件实例有实现自定义事件，父子组件通讯能够更解耦。React 万物皆 Props 或者本身实现相似的自定义事件。
  • Vue 中可使用插槽 Slot 分发内容，React 万物皆 Props。
  • Vue 中丰富的指令（确实好用，还支持灵活的自定义指令），React 万物皆 JSX。
  • Vue 中的计算属性和侦听属性语法糖，React 可在特定的周期函数中进行处理。
  • Vue 框架对过渡动画的支持，React 原生没发现该能力。
  • Vue 提供一站式服务，React 每每在设计时须要考虑生态应用。
  • Vue 全局配置、全局 API 仍是挺好用的，好比 Vue.use 可全局在实例中注入对象。
  • Vue 中的全局组件很是好用，不须要像 React 那样一遍遍引入组件。
  • Vue 的 Template 中使用一些变量数据（例如常量）必须挂载在this上（简直蛋疼），React 中的 JSX 万物皆可 JavaScript。
  • React Hooks 新颖式概念和语法设计。
  • React Fragments 很是棒，Vue 暂时没发现相似的功能（会形成更多的元素嵌套问题）。
  • ...

舒适提示：有更好的语法对比请在评论中告知。

可能追加的面试题

  • 说说 React 和 Vue 的三个明显的区别？
  • 能说说 React 相比 Vue 的优点在哪里？
  • 能说说 Vue 相比 React 的优点在哪里？
  • 你以为在什么场景下用 Vue 或 React ?

Vue 篇

Vue CLI 3 有哪些特性？

面试题来源

简历中写着 Vue CLI 技术栈

解题思路

  • 图形化界面（vue ui）
  • 插件系统
  • CLI 服务
  • Vue CLI 无需 Eject 便可进行 Webpack 配置（针对 Create React App）
  • 可配置化 Polyfill
  • 现代模式
  • Prefetch / Preload
  • webpack-merge / webpack-chain
  • 浏览器兼容性
  • CSS 预处理器
  • 环境变量
  • 构建应用 / 库 / Web Components 组件
  • 部署（CORS / PWA）
  • ...

可能追加的面试题

  • 有没有设计过通用的 Vuc CLI 插件？
  • 有没有设计过通用的 Vue 脚手架？
  • 有研究过 Vue CLI 的源码吗？

能对比一下 Create React App 和 Vue CLI 3 吗？

面试题来源

简历上写着熟悉 React 和 Vue 技术栈

解题思路

类型 Create React App Vue CLI 3.x
可一键构建 SPA 应用 √ √
Script react-scripts（可定制化） @vue/cli-service
ESLint 插件集 react-app eslint-plugin-vue（插件化）
CSS Modules √ √
CSS 预处理器 自定义 Sass 自然支持 Sass & Less & Stylus（可配置化）
PostCSS 后处理器 √ √
HTML 和静态资源 HTML 插值 & Svg 组件化 HTML 插件 & Preload & Prefetch & 多页应用 & URL 规则
代码分割 √ √
环境变量 √ √
PWA √ 插件化
单元测试 Jest 插件化（Ject & Mock & ...）
Proxy √ （灵活，但每每须要自定义） √（这种变成配置项）
TypeScript 模板 插件化
自定义脚手架模板 Custom Templates（template.json） Preset & 插件系统（很是棒，可远程）
Webpack 配置 Eject & Webpack files Inspect & vue.config.js & 默认配置全面 & webpack-merge & webpack-chain（有学习成本）
Webpack 分析 Source map explorer vue ui（GUI 交互式）
快速原型开发 × @vue/cli-service-global
交互式开发 × vue ui
浏览器兼容性 现代浏览器（自定义 Polyfill & browserslist） browserslist & Polyfill & 现代模式
构建 应用 应用 & 库 & Web Components 组件 (异步)

舒适提示：这里指的是默认功能比较，而不是说不能进行功能自定义扩展！

Creat React App 在工程化体系上没有 Vue CLI 3.x 更加的开箱即用，除此以外，Vue CLI 3.x 中的插件体系是一个很是棒的特性，它使自定义脚手架模板变得很是灵活（很是适合企业定制化脚手架）。固然 Create React App 是有它本身的设计理念的，对于简单的应用它是一种优点（不可配置化预先约定）。

Vue.js 整个实现原理？

面试题来源

简历中写着熟悉 Vue.js 源码，或者简历中只写着 Vue.js 技术栈，或者面试的过程找不到亮点

解题思路

enter image description here

这里简单的描述一下 Vue 2.x 的运行机制（须要注意分析的是 Runtime + Compiler 的 Vue.js）。

初始化流程：

  • 建立 Vue 实例对象
  • init过程会初始化生命周期，初始化事件中心，初始化渲染、执行beforeCreate周期函数、初始化 data、props、computed、watcher、执行created周期函数等。
  • 初始化后，调用$mount方法对Vue实例进行挂载（挂载的核心过程包括模板编译、渲染以及更新三个过程）。
  • 若是没有在 Vue 实例上定义render方法而是定义了template，那么须要经历编译阶段。须要先将template 字符串编译成 render function，template 字符串编译步骤以下 ：
    • parse正则解析template字符串造成 AST（抽象语法树，是源代码的抽象语法结构的树状表现形式）
    • optimize标记静态节点跳过 DIFF 算法（DIFF 算法是逐层进行比对，只有同层级的节点进行比对，所以时间的复杂度只有 O(n)。若是对于时间复杂度不是很清晰的，能够查看我写的文章ziyi2/algorithms-javascript/渐进记号）
    • generate将 AST 转化成render function字符串
  • 编译成render function 后，调用$mount的mountComponent方法，先执行beforeMount钩子函数，而后核心是实例化一个渲染Watcher，在它的回调函数（初始化的时候执行，以及组件实例中监测到数据发生变化时执行）中调用updateComponent方法（此方法调用render方法生成虚拟 Node，最终调用update方法更新 DOM）。
  • 调用render方法将render function渲染成虚拟的Node（真正的 DOM 元素是很是庞大的，由于浏览器的标准就把 DOM 设计的很是复杂。若是频繁的去作 DOM 更新，会产生必定的性能问题，而 Virtual DOM 就是用一个原生的 JavaScript 对象去描述一个 DOM 节点，因此它比建立一个 DOM 的代价要小不少，并且修改属性也很轻松，还能够作到跨平台兼容），render方法的第一个参数是createElement(或者说是h函数)，这个在官方文档也有说明。
  • 生成虚拟 DOM 树后，须要将虚拟 DOM 树转化成真实的 DOM 节点，此时须要调用update方法，update方法又会调用pacth方法把虚拟 DOM 转换成真正的 DOM 节点。须要注意在图中忽略了新建真实 DOM 的状况（若是没有旧的虚拟 Node，那么能够直接经过createElm建立真实 DOM 节点），这里重点分析在已有虚拟 Node 的状况下，会经过sameVnode判断当前须要更新的 Node节点是否和旧的 Node 节点相同（例如咱们设置的key属性发生了变化，那么节点显然不一样），若是节点不一样那么将旧节点采用新节点替换便可，若是相同且存在子节点，须要调用patchVNode 方法执行 DIFF 算法更新 DOM，从而提高 DOM 操做的性能。

须要注意在初始化阶段，没有详细描述数据的响应式过程，这个在响应式流程里作说明。

响应式流程：

  • 在init的时候会利用Object.defineProperty方法（不兼容 IE8）监听Vue实例的响应式数据的变化从而实现数据劫持能力（利用了 JavaScript 对象的访问器属性get和set，在将来的 Vue3 中会使用 ES6 的Proxy来优化响应式原理）。在初始化流程中的编译阶段，当render function被渲染的时候，会读取Vue实例中和视图相关的响应式数据，此时会触发getter函数进行依赖收集（将观察者Watcher对象存放到当前闭包的订阅者Dep的subs中），此时的数据劫持功能和观察者模式就实现了一个 MVVM 模式中的 Binder，以后就是正常的渲染和更新流程。
  • 当数据发生变化或者视图致使的数据发生了变化时，会触发数据劫持的setter函数，setter会通知初始化依赖收集中的Dep中的和视图相应的Watcher，告知须要从新渲染视图，Wather就会再次经过update方法来更新视图。

能够发现只要视图中添加监听事件，自动变动对应的数据变化时，就能够实现数据和视图的双向绑定了。

可能追加的面试题

  • Vue.js 源码的入口主要作了些什么处理？
  • Vue.js 中的数据劫持是怎么实现的？浏览器兼容性呢？
  • Vue.js 中的依赖收集是怎么处理的？和闭包有什么关联吗？
  • Vue.js 中的模板解析须要经历哪几个阶段？
  • Vue.js 中的虚拟节点优点是什么？
  • Vue.js 中的 DIFF 算法是怎么处理的？
  • Vue.js 中 DIFF 算法的时间复杂度是多少？为何？
  • Vue.js 中 computed / watch 实现的原理是什么？
  • Vue.js 中有哪些周期函数？这些周期函数都是在什么时机执行的？
  • Vue.js 中的 $nextTick 的原理是什么？它主要经历了哪些变化？为何？
  • Vue.js 对 DOM 的更新作了哪些标记优化处理？
  • Vue.js 在语法层面能够作哪些优化处理？
  • Vue.js 2.x 中的 Proxy 代理主要作了些什么工做？
  • Vue.js 2.x 中如何支持 TypeScript ?
  • Vue 3.x 的源码相对 Vue 2.x 主要作了哪些变化？
  • Vue.js 中的 M / V / VM 分别指的是哪些？
  • Vue-loader 主要有哪些特性？
  • Vue.js 如何作 ESLint 校验？
  • Vue.js 如何作单元测试？
  • 了解过 Vue-Router / Vuex 的源码吗？（感知性问题，不会深刻问）
  • 发布 / 订阅模式和观察者模式的区别是什么？
  • 手写一个发布 / 订阅模式？
  • 简述 MVC / MVP / MVVM 的区别？
  • 若是熟悉 Nuxt 等可能会问 SSR 的实现原理？
  • 日常遇到 Vue.js 报 error / warning 的时候有深刻追踪错误栈的习惯吗？
  • Vue 2.x 中的数据劫持可否采用发布 / 订阅模式实现？采用观察者模式带来的优点和劣势有哪些？
  • Vue 的整个框架的实现原理大体可分为哪几个部分？

参考连接

Vue.js 中组件之间通讯有哪些方案？

解题思路

  • Vuex
  • Event Bus
  • Pub / Sub
  • Emit / On
  • provide / inject
  • Element UI dispatch / broadcast
  • props
  • parent / children 实例对象

可能追加的面试题

  • Element UI 中 dispatch 和 broadcast 是如何实现的？
  • 祖先和子孙之间通讯有哪些方案？
  • 任意组件之间通讯有哪些方案？

Vue 如何定制化脚手架？须要考虑哪些因素？

建设中...

$nextTick 执行的时机和 DOM 渲染的关系是什么？

可能追加的面试题

  • 什么是 Event Loop ?
  • 宏任务和微任务有什么区别？
  • 哪些是宏任务哪些是微任务？
  • $nextTick在几个版本迭代中都经历了什么变化？
  • 打开新的浏览器窗口时会从新建立一个新的 Network 进程吗？

参考连接

Vue 使用的是什么版本，如何配合 TypeScript 工做，TypeScript 有哪些特性？

建设中...

Vue 里的 keep-alive 是怎么实现的？

建设中...

面试题来源

简历中出现 keep-alive 信息

可能追加的面试题

  • 设置了 keep-alive 以后对组件渲染的生命周期有什么影响？
  • keep-alive 有哪些特性？

说说 Vue 里的数据劫持在不一样版本里是如何处理的？

建设中...

Vue 能作哪些性能优化？

解题思路

  • keep-alive
  • 路由懒加载
  • Preload / Prefetch
  • key
  • 响应式依赖扁平化
  • 减小非必要的响应式依赖
  • Object.freeze
  • DOM 滚动加载
  • v-if / v-show
  • computed / watch
  • 事件销毁（防止内存泄漏）
  • 组件按需引入
  • 预渲染
  • 按需 Polyfill
  • 模板预编译
  • 渲染函数
  • 官方风格指南 + 官方 ESLint 插件
  • ...

可能追加的面试题

  • 路由懒加载是如何实现的？
  • Coding Split 和哪些 Webpack 配置相关？
  • Polyfill 是什么？Vue 支持哪些相关的可配置化信息？
  • Vue 中可使用 JSX 吗？（竟然有人不清楚 JSX 是什么）

组件篇

React 中受控组件和非受控组件的区别？

面试题来源

简历写着抽取公共业务组件

解题思路

  • 数据由 React 组件 / DOM 节点管理

可能追加的面试题

  • 在哪些场景应该使用非受控组件？

参考连接

React 中如何实现一个 Input 组件开发？

建设中...

公司的组件库搭建、设计与维护？

面试题来源

简历写着设计和维护公司的组件库

解题思路

  • 完整引入 / 按需引入
  • 构建流程设计
  • 单元测试
  • 输出模式（umd / commonjs2 / es6）
  • 样式构建
  • 国际化 / 工具
  • ESLint / Prettier / Stylint
  • TypeScript（声明） / JavaScript
  • Webpack 配置 / Webpack 分析
  • Babel 处理
  • Polyfill 注意点
  • Markdown 演示 & CI
  • 三方库处理方式
  • 浏览器兼容性
  • Autoprefixer
  • Lerna / Single Npm / Multiple Npm
  • Single Npm & Template
  • Git 钩子处理 & Git 规范
  • 语义化版本规范
  • 团队 / 范围 / 开发规范 / 代码 Review

可能追加的面试题

  • Webpack 构建速度 / 性能优化？
  • Webpack 分析工具？
  • 组件库的框架设计？
  • 构建 Bundle 优化？
  • 按需加载功能能够有哪些实现方案？
  • 主要负责了哪些组件的设计？
  • 主动性的业务组件封装案例？
  • 看过 xxx 组件库的源码设计吗？
  • 设计组件的时候会考虑对 TypeScript 进行支持吗？
  • 业务组件的单元测试通常须要测试什么内容？

参考连接

了解 Element UI 组件的框架设计吗？

面试题来源

简历写着使用 Element UI 进行业务开发并本身设计过组件

参考连接

组件库要作按需加载，以为应该怎么作？

面试题来源

简历写着使用使用按需加载提高页面性能

解题思路

  • Single Npm
  • Lerna
  • Multi Entry Syntax

如何自动屏蔽 Input 的自动密码填充？

设计模式篇

设计模式中观察者模式和发布 / 订阅模式有哪些区别？

面试题来源

简历中写着熟悉设计模式、Redis、Vue 源码等

可能追加的面试题

  • 日常在哪些地方有使用到观察者或发布 / 订阅模式？

参考连接

了解 MVC / MVP / MVVM 的区别吗？

参考连接

工程化篇

Webpack 构建速度优化有哪些方案？

面试题来源

项目中写着使用 Webpack 进行构建速率优化

解题思路

  • speed-measure-webpack-plugin
  • 排除三方库，防止二次打包
  • thread-loader
  • cache-loader
  • HappyPack
  • parallel-webpack
  • ...

可能追加的面试题

  • 未优化前构建须要多少时间，优化后构建须要多少时间？
  • 有没有分析是什么问题致使构建速率变慢？

说说你对 cz 生态的了解？

面试题来源

项目中写着使用 cz 规范 Git 提交

参考连接

简单说说 Webpack 对于性能优化有哪些特性？

建设中...

性能优化篇

了解 SPA 的懒加载么？

建设中...

Vue 如何配合 Echarts / OpenLayers 实现性能优化？

建设中...

服务篇

有作过基于 Express 的应用框架技术选型么？

建设中...

先后端分离的历史？分离模式带来的好处和坏处有哪些？

建设中...

Node 里的事件循环机制和浏览器的事件循环机制有什么区别？

建设中...

说说怎么用纯粹的 Node.js 作一个服务端框架？谈谈 Node.js 服务端 MVC 的理解？

建设中...

熟悉 Node，谈谈服务端 MVC 的演变历史？

建设中...

跨域的解决方案有哪些？cors 是怎么处理跨域？

建设中...

框架篇

什么是 H5 ?

建设中...

AMD 、CMD 和 CommonJS 区别？

建设中...

可能追加的面试题

  • common.js 和 ES 6 中模块引入的区别？

如何设计突发大规模并发架构？

建设中...

通常公司是怎么部署前端代码？

建设中...

HTTP 篇

GET 和 POST 的区别？

可能追加的面试题

  • GET 和 POST 在安全性上有什么区别？
  • GET 在哪些状况下会有安全性问题？

随便聊聊 Ajax，聊聊 axios？

建设中...

axios 库有什么能力？axios 库发请求的以前能作拦截么？

建设中...

可能追加的面试题

  • axios 库发请求的以前能作拦截么？
  • axios 库发请求的时候能取消请求么？

硬件层和前端是如何作通信的？

可能追加的面试题

  • WebSocket 的浏览器兼容性如何处理？

谈谈你对缓存的理解，举一个和你最相关的缓存的使用案例。

建设中...

服务端推送主要用到什么技术？

建设中...

HTTP 2 相对于 HTTP 1 有什么区别？

建设中...

WebSokect 本质上是基于什么协议进行通讯的（TCP / UDP）？

可能追加的面试题

  • 在不兼容 WebSockect 的状况下如何作降级兼容处理？

简单介绍一下 Graphql，说说为何要在你的项目中使用 Graphql？

建设中...

了解跨域么，通常什么状况下会致使跨域？

建设中...

cookie 和 session 的区别？

建设中...

测试篇

日常开发的过程当中有写过单元测试或者 e2e 测试么？

建设中...

自动化测试主要是作什么？

建设中...

优化篇

SEO 有哪些优化方案？

建设中...

可能追加的面试题

  • 预渲染的原理是什么？

说说任何前端优化处理？

建设中...

业务篇

规范代码书写的适用范围有多大？

版权信息小工具是干什么的，能具体介绍一下么？

介绍一下 dtd 组件，组件是如何维护的，版本是怎么控制的？

在业务的开发中有没有发现什么痛点并对其进行改进？

有没有以为交互设计不合理而后本身想出方案推进交互更改的案例？

前端广告投放如何？Chrome 如何劫持广告？

简化业务设计的复杂度案例有么？

有没有作过什么工具简化业务开发？

Moxtra 是你主推的么？讲讲RxJS?

有没有主动 own 过业务，并高效排除业务风险的案例？

说说如何衡量提高产品的体验？

舒适提示：有些业务问题主要针对的是简历中的项目，在这里不适合展现。不过有一点须要注意，面试官可能会对业务的数据很是感兴趣，因此在业务上有比较 NB 的数据能够体现的最好能够提早准备好。业务这一块可能会考量的点：业务数据 / 业务难点 / 业务成果 / 业务贡献 / 业务主动性 / 业务 own 能力 / 技术栈选型考量 / 业务影响范围 / 业务通用性 / 业务思考 ......

名词解析篇

什么是渐进加强和优雅降级？

建设中...

笔试篇

0 1 1 2 3 5 8，假设第 0 个是 0，第 1 个是 1，求第 n 个数的实现方式？

简单实现一个发布订阅机制？

简单实现带当即执行参数的消抖函数：function debounceImmediate (fn: Function, wait: number, immediate: boolean)）？

实现一个扑克牌式的插入排序（咱们老是喜欢将某张扑克牌插入到已排序的扑克中），输入：[5,6,1,8,7,2,4,3]，输出：[1,2,3,4,5,6,7]，并提供单元测试思路（如何测试你的代码是稳定正确的）？

实现一个简易的模板引擎

let template = '嗨，{{name}}您好，今天是星期 {day}';
let data = {
  name: '张三',
  day: '三'
}
render(template, data); // 嗨，张三您好，今天是星期三
复制代码

混沌篇

你以为你最擅长什么？

假设某个组织下面挂了 10 w 个节点，如何作优化处理？

用 Vue 的时候有没有遇到过难以解决的问题？

说说你业务中以为性能优化最大的一个场景？

说说你业务中至今没有解决的问题？

说说你业务中遇到最难解决的问题？

八卦篇

高效的自学能力，能举个例子体现一下高效么？

除了业务上的开发，日常会有什么学习计划么？

日常有什么兴趣爱好？

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