复盘一下，如何让他毕业2年后，收获阿里offer，(总结)未来继续努力

最新推荐文章于 2022-06-05 16:16:06 发布

@baby张

最新推荐文章于 2022-06-05 16:16:06 发布

阅读量655

点赞数 3

分类专栏：前端面试要点

本文链接：https://blog.csdn.net/weixin_43648947/article/details/115823970

版权

前端面试要点专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.前言

这篇文章，算是我一朋友年后这一个多月以来的面试总结和思考。

有的朋友看了标题可能会喷：这不有手就行？我一毕业就进来了。

对他而言实属不易，只是想记录总结下，顺便鼓舞下跟他类似的小伙伴。

2.教育工作背景

他18年毕业于河北科技师范学院，非计算机专业，这对于一些大厂的校招、社招要求来说，无论学校还是专业已经失去了资格。

他大学里拿满了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方法的本身的一个缺陷，解决方案，官方也都有提供，$set $delete 或者这个对象数组替换

4.4 你能理解 router-view 是一个组件吗？如何实现的

肯定是一个组件，原理是通过url中的路径，跟router中配置的path进行匹配，渲染出对应的Component

4.5 router中的 URL是怎么跟component匹配的

核心方法是match去匹配，后面还追问了个问题他忘了

4.6 说一说你对vuex的理解

可以看下之前发布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 的了解和实现原理

同上可以看下之前发布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，页面做出更新。

阮一峰的redux了解下

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 响应式的区别

前往之前写的Vue3 对比 vue2文章

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随机数来生成键）