1.前言
这篇文章，算是我一朋友年后这一个多月以来的面试总结和思考。
有的朋友看了标题可能会喷：这不有手就行？我一毕业就进来了。
对他而言实属不易，只是想记录总结下，顺便鼓舞下跟他类似的小伙伴。
2.教育工作背景
一般二本，这对于一些大厂的校招、社招要求来说，无论学校还是专业已经失去了资格。
他大学里拿满了3年国家励志奖学金，一等二等奖学金，优秀团干，优秀毕业生等荣誉。
他是大三开始跟基友一起在外面深造计算机，为了抢占先机，他没毕业就来杭州，也是收到3-4个offer，
最后他选择了面朝科技。
从他刚进面朝写bug+加班改bug，到后面一个人负责多个项目游刃有余。他每月都会持续学习总结在CSDN和掘金分享，说不进步是假的，有时候变化总是潜移默化慢慢积累的。
3.契机
年后刚好他认识的朋友手里有内推名额，抱着试试看的心理（顺便帮他们完成kpi），就给了5家简历，经历了长达一个多月的面试流程，最终他幸运的拿到了3家offer，下面针对收到offer的3家公司，说说他面试流程和遇到的问题。
4.订单来了
4.1 对vue和react哪个比较熟悉，差不多，那就问下vue吧
4.2 vue整个渲染流程
直接上图，自己思考说出来的才是自己的。
4.3 对vue源码是否有了解，说一说你了解的源码某一块
他说了下Vue的几个核心源码，响应式，双向绑定，Watcher，扩展到Vue3进行对比
Vue3 对比 Vue2.x
4.3 data中 obj = { a:1 } ，obj.b=2 页面如何展示，再obj.a=2如何显示，为什么会这样原理是什么
这里其实就是Vue2版本，响应式Object.defineProperty方法的本身的一个缺陷，解决方案，官方也都有提供，delete 或者这个对象数组替换
4.4 你能理解 router-view 是一个组件吗？如何实现的
肯定是一个组件，原理是通过url中的路径，跟router中配置的path进行匹配，渲染出对应的Component
4.5 router中的 URL是怎么跟component匹配的
核心方法是match去匹配，后面还追问了个问题他忘了
4.6 说一说你对vuex的理解
4.7 能否理解vuex是个小型的vue，为什么
能理解，简单说其实是vuex的核心响应式和vue是一样的，Vuex有点类似Vue的Module层，可以展开说
4.8 提出了一个类似智能表单的场景，给出解决方案和数据结构
总结：公司主要技术栈都是围绕vue的，PC H5 小程序，面试官也挺热情，HR是我前同事他哥，都知根知底，也没就问太多，直接一遍过。
5.阿里
5.1 聊一聊vue项目重构这块，router的重构和权限配置，动态设置角色
项目这块平时怎么写就怎么说
5.2 vue中通信方式有哪些，怎么使用的
常见场景也就3种，父->子 ，子->父 ，兄弟间，props、$emit、vuex、ref、eventBus、自己写个发布订阅。。。
5.3 vuex 的了解和实现原理
5.4 redux 的中间件如何使用的，如何实现多个中间件对store的性能增强
中间件都是用 applyMiddleware包裹起来，再统一调用compose进行组合加强 ，源码是通过复合函数实现依次执行
5.5 对React.fiber这块的了解，对比原来的diff算法差异性
React.fiber是在16v发布的，跟原来diff算法最大不同就是它的切片式更新策略，高优先级更新不需要漫长等待
详细差异可前往查看
5.6 React.fiber 的调度优先级有哪几个，及实现调度原理，分片时执行的函数和可做的优化
分为5个优先级调度
立即执行 var ImmediatePriority = 1;
用户阻塞 var UserBlockingPriority = 2;
正常优先级 var NormalPriority = 3;
低优先级 var LowPriority = 4;
惰性优先级 var IdlePriority = 5;
实现原理是底层采用requestAnimationFrame 以及 模拟的requestIdleCallback来实现每一帧执行和闲置期执行的调度问题
5.7 React hook 的了解，用过哪些，使用注意点
可参考之前文章：React hook 10种 Hook （详细介绍及使用）
5.8 自己封装的自定义Hook有哪些
一个简单的计时器，核心是使用ref来存值，防止组件更新时被重置
5.9 wabpack 编译一个less 用了哪些loader 打包的文件存在哪里
style-loader、css-loader、less-loader，可以通过MiniCssExtractPlugin插件配置导出文件路径名称
5.10 如何优化项目webpack
代码的压缩、用hash name contenthash命名打包文件，include打包范围，雪碧图插件，空格 console过滤，静态资源上传。。。
5.11 原公司的规模，团队规模，做的产品有哪些，PC H5 小程序
这个就根据自己公司情况说就行
5.12 小程序和H5的本质区别在哪
最本质区别是运行环境的不同，一个基于App Webview JsCode运行，一个基于浏览器运行
5.13 promise 的源码说一下
这个还没了解过的可以去了解下
5.14 http - https 的了解
5.15 promise.catch 何时会执行
网络错误，请求失败，接口返回失败，服务器错误。。。
5.16 在团队担任的职责，给团队带来了什么改变
这个因人而异，有啥说就啥
5.17 React 16 以后的生命周期变化，新生命周期 和 即将淘汰的生命周期
常用的生命周期Constructor / Render / ComponentDidMount / ComponentDidUpdate / ComponentWillUnmount / ShouldComponentUpdate
17版本即将淘汰的：ComponentWillMount /ComponentWillReceiveProps / ComponentWillUpdate
淘汰原因就是React.fiber 第一阶段，会打断他们执行，造成重复执行。
官方说的是：这三个生命周期函数容易被误解并滥用，可能会对异步渲染造成潜在的问题
5.18 React hook 用过哪些，注意点，useContext useReducer 是否使用过
5.19 Redux 的运行流程
组件创建一个Action 通过dispatch(action) 传递给Store，Store把action 传到Reducer去匹配，找到需要替换的store，页面做出更新。
5.20 react 代码优化问题
使用PureComponent、ShouldComponentUpdate 、 Hooks手动优化渲染问题
5.21 js 寄生组合继承原理
在正常组合式继承的同时，通过父类原型创建一个原型副本，副本的构造函数为子类，将副本指向到子类的原型上。
详细了解可前往
5.22 webpack 的打包流程 ，bable 的实现原理
简单说就：分析代码，转换代码，编译代码，输出代码
webpack初始化参数后，找到入口文件，根据babel匹配对应的模块解析成ast语法树，通过loader去做相关处理过滤，执行一些plugin，最后根据出口文件进行输出。
bable的原理其实就是根据匹配的模块，解析成ast，等待处理转换。
5.23 对你来说难度最大的一个项目
这个就因人而异了，自由发挥。
5.24 针对一个项目的优化操作
css，代码，缓存，打包，负载均衡，CDN 。。。
5.25 有学习的习惯吗，平时是如何学习的，关注过哪些公众号
5.26 为什么离职
5.27 细聊了两个项目，有挑战性的点，如何解决的
5.28 对热点新技术的关注度，react17 改变的点，举例说几个
5.29 项目的首屏优化
路由的按需加载，拆分打包，图片静态资源上传CDN，压缩代码。。。
5.30 如何评价自己，擅长点和劣势
5.31 相互提问
总结：流程果然如传说中一样，不过也可以理解，面的人太多确实要筛选筛选（有些问题忘了没记下来）。
第四轮两位leader 以及 第五轮HR 面时候确实是紧张的不行，他们气场太强了，还好幸运的过了并收到offer
6.涂鸦
6.1 vue 响应式原理，深入问 vue 对 data computed 响应式的区别
6.2 一切皆为对象的理解你赞同吗
只要满足封装、继承、多态都可以称为对象。
用let num = 1 举例，类型是基本数据类型number，可是有 num.toString()方法，说明是对象的属性
背后调用了集装箱 new Number() 最后反转。。。。巴拉巴拉等一系列的探讨
6.3 数据结构的了解，数组中寻找合为0的两个数，可以继续优化嘛，这样优化的原理
堆 栈 队列 数组 链表。。。可自行根据了解拓展
6.4 数组中寻找合为0的两个数，可以继续优化嘛
const arr1 = [1,3,4,5,-6,-1]
// 首先想到简单粗暴的
fn = (data) => {
let len = data.length
for(let i = 0; i<len ;i++){
for(let k = i+1;k<len;k++){
if(data[i]+data[k] === 0){
return [data[i],data[k]]
}
}
}
}
// 优化-原数组寻找差值方法
fn = (data) => {
let len = data.length
for(let i = 0;i<len;i++){
let short = ~data[i]+1
if(data.includes(short)){
return [data[i],short]
}
}
}
// 优化- new Set
fn = (data) => {
const new_data = new Set(data)
let len = data.length
for(let i = 0;i<len;i++){
if(new_data.has(-data[i])){
return [data[i],-data[i]]
}
}
}
console.log(fn(arr1),'合为0')
6.5 说说你为什么用Set 这样优化的好处
原因是上面的for 和includes 都是遍历的过程，时间复杂度都是O(n2),而使用Set的数据格式可以复杂度降低一个维度变成O(n)。why? 因为数组是通过索引进行排序，增删改查几乎都要查询或重排过程，而Set O(1)。（面试官补充：为了保障键的唯一性，底层使用了类似hash随机数来生成键）
6.6 react 类写法和hooks 写法有什么区别，对比说说
这个就因人而异吧，有些东西自己用了才知道，还是自己实践来的总结最深刻。
6.7 hooks 的原理，useState 为例，如何做到无状态情况下保存state
hooks虽然是无状态的函数式写法，但在执行的时候，每一个hooks都会被附着到一个Json tree上，也就保证了唯一性和state状态的保存问题，我们是无感知的。
6.8 webpack 工作流程 ，用过哪些loader plugin ，写过哪些功能，优化点
这一块还是靠大家的实操和基础，去自己了解webpack一些插件用法和源码。 React hook + 完整Webpack配置详细翻译
6.9 写个函数实现flat 扁平化数组，深层处理的情况
这个其实就挺简单了
6.10 react 的生命周期，优化点
聊了常用的生命周期，和即将废除的3个will生命周期，react.fiber 的原理和部分源码，和hooks使用时候的注意点和优化点。如果你还不知道，赶紧总结总结吧。
6.11 前端工程化的理解，对项目的优化点
规范化 模块化 组件化 自动化
6.12 主管针对前公司业务的考察
介绍下自己公司的运营模式，公司的产品
业务流程，盈利手段，跟竞品公司比优势
在公司担任的职位，负责的内容
平时如何学习提升自己
说说关注的最近比较火的技术vue3 原子css react17
6.13 HR常规聊天谈薪资
6.14 总结
涂鸦是他晚上下班，7点去公司面的，一次面完了3轮到10点多了，最后主管面只能推迟到第二天视频面，流程还是挺快的。
前两轮面试官估计看他才两年多，也手下留情，没出太难的手写题目。
原谅他，好多问题睡了一觉第二天总结时候想不起来了。
最后总结
-
整个梳理下来，我总结了以下考量的几个点：基础知识 、技术维度 、技术深度 、业务感知 、团队能力 、自律性（学习）。
-
那我们该怎么做呢？想要在前端的大潮中脱颖而出，平时就要有目标性的朝着这几个方向努力。目标、 规划、 行动 、坚持， 这也是我正在做的。
-
其实有些东西听着、说着挺简单的，道理大家都懂，但为什么成功都是少部分人，最重要的还是看个人，看自己想要怎样的生活，看自我约束力。
-
我这个朋友的面试经历，也是给很多非专科的同学打打气了，人人都是有机会的，只是机会来的时候能不能牢牢抓住了。
-
我们曾无数次后悔过，当时要努力****就好了，既然知道悔不当初了，为什么现在不放手一搏，让未来少一些遗憾，人有时候不能让自己过太舒服。
鸣谢
- 因为简历没有公开，都是朋友同事帮忙内推的，在此特别感谢大家！
- 花名 ，掘友们帮起了挺多的，看好了5-6个，最终都是被人捷足先登了，可恶。
- 希望这篇文章对大家有些用处，感谢支持。
