【无标题】

最新推荐文章于 2023-11-15 15:23:14 发布

Jeff在写代码

最新推荐文章于 2023-11-15 15:23:14 发布

阅读量3.2k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_45906729/article/details/125631611

版权

这里写自定义目录标题

@[TOC](这里写自定义目录标题)

刷面筋 - 11 阿里面经
1
阿里巴巴]()：[阿里云-广州（Web前端/Node.js）
一面（2.28）：
二面（3.6）：
三面（3.16）：

2
一面 (2h)
1.1 手写深拷贝（30min手撕代码）
1.2 自我介绍
1.3 简历问答
1.3.1 工作经历
1.3.2 绩效情况
1.3.3 为何在 Vue 和 Angular 和 React 中选了 Vue？
1.3.4 JavaScript 和 TypeScript 有什么区别？在技术选型的时候什么因素使你考虑用？
1.3.5 关于桌面端 UI 框架选型的思考：为何在 Element 和 iView 中选了 Element？
1.3.6 关于移动端 UI 框架选型的思考：为何在 Vant 和 Cube 中选了 Vant？
1.3.7 互联网公司和金融科技公司在开发流程上的区别

1.4 工作方式：当需求方在开发周期内临时改动需求时怎么办？
1.5 vue2 双向绑定原理
1.6 Vue2 数据劫持的原理
1.7 Vue2 数据劫持的缺陷
1.8 Vue3 数据劫持的优势
1.9 Vue3 有什么新特性
1.10 面试官建议

二面 (45min)
2.1 假设团队内从 Vue 转为 React，你认为要做什么准备？
2.2 微前端解决方案 qiankun？JS沙箱的原理？样式隔离的原理？
2.3 长列表渲染底层原理？业内有哪些解决方案？

三面 (20min)
四面 HR 面 (30min)
4.1 你觉得前端在整个产品里面扮演什么样的角色？
4.2 一个好的前端工程师具备什么样的品质？
4.3 女性工程师数量比较少，作为女性，在这一方面有什么感悟吗？
4.4 假设能进入阿里，你想在这里收获什么？有什么方向规划吗？
4.5 你目前薪资总包是多少？

总结
3
4
5
6
8
个人情况：
盒马
淘宝特价版
蚂蚁金服
9
前言
一面
二面
三面&四面
五面
HR面
总结&未来前端展望
10
一、基本情况
二、流程
三、题目
开局：
技术：

四、总结
11
阿里云-云网络
钉钉
阿里云-ECS弹性计算

12

一面
二面
hr面
13
2021/12/7 一面（40min）
2021/12/9 二面（50min）
2021/12/13 三面（25min）
2021/12/14 HR 面（25min）
14
前言
投递（8月21日）
一面（8月29日）电话面1h
15分钟八股+15分钟反问聊天+30分钟笔试。
笔试题
不定项选择题
编程题

二面（9月1日）视频面50min
25分钟经历+项目，15分钟技术问题，10分钟反问

三面（9月7日）视频面25min
总结
意向书（9月19日）
15
16
17
开始面试（电话面）
18
19
一面 2022.04.10
二面 2022.04.13
笔试 2022.04.11

20

笔试阿里伯乐系统 60min
第一题、根据表达式计算字母数量
第二题、手写节流
第三题、对象扁平化
吐槽一下

面试全程电话面 30min
刷面筋 - 11 阿里面经
1
阿里巴巴]()：[阿里云-广州（Web前端/Node.js）
一面（2.28）：
二面（3.6）：
三面（3.16）：

2
一面 (2h)
1.1 手写深拷贝（30min手撕代码）
1.2 自我介绍
1.3 简历问答
1.3.1 工作经历
1.3.2 绩效情况
1.3.3 为何在 Vue 和 Angular 和 React 中选了 Vue？
1.3.4 JavaScript 和 TypeScript 有什么区别？在技术选型的时候什么因素使你考虑用？
1.3.5 关于桌面端 UI 框架选型的思考：为何在 Element 和 iView 中选了 Element？
1.3.6 关于移动端 UI 框架选型的思考：为何在 Vant 和 Cube 中选了 Vant？
1.3.7 互联网公司和金融科技公司在开发流程上的区别

1.4 工作方式：当需求方在开发周期内临时改动需求时怎么办？
1.5 vue2 双向绑定原理
1.6 Vue2 数据劫持的原理
1.7 Vue2 数据劫持的缺陷
1.8 Vue3 数据劫持的优势
1.9 Vue3 有什么新特性
1.10 面试官建议

二面 (45min)
2.1 假设团队内从 Vue 转为 React，你认为要做什么准备？
2.2 微前端解决方案 qiankun？JS沙箱的原理？样式隔离的原理？
2.3 长列表渲染底层原理？业内有哪些解决方案？

三面 (20min)
四面 HR 面 (30min)
4.1 你觉得前端在整个产品里面扮演什么样的角色？
4.2 一个好的前端工程师具备什么样的品质？
4.3 女性工程师数量比较少，作为女性，在这一方面有什么感悟吗？
4.4 假设能进入阿里，你想在这里收获什么？有什么方向规划吗？
4.5 你目前薪资总包是多少？

总结
3
4
5
6
8
个人情况：
盒马
淘宝特价版
蚂蚁金服
9
前言
一面
二面
三面&四面
五面
HR面
总结&未来前端展望
10
一、基本情况
二、流程
三、题目
开局：
技术：

四、总结
11
阿里云-云网络
钉钉
阿里云-ECS弹性计算

12

一面
二面
hr面
13
2021/12/7 一面（40min）
2021/12/9 二面（50min）
2021/12/13 三面（25min）
2021/12/14 HR 面（25min）
14
前言
投递（8月21日）
一面（8月29日）电话面1h
15分钟八股+15分钟反问聊天+30分钟笔试。
笔试题
不定项选择题
编程题

二面（9月1日）视频面50min
25分钟经历+项目，15分钟技术问题，10分钟反问

三面（9月7日）视频面25min
总结
意向书（9月19日）
15
16
17
开始面试（电话面）
18
19
一面 2022.04.10
二面 2022.04.13
笔试 2022.04.11

20

笔试阿里伯乐系统 60min
第一题、根据表达式计算字母数量
第二题、手写节流
第三题、对象扁平化
吐槽一下

面试全程电话面 30min

title: 刷面筋 - 11 阿里面经
categories: 分类
tags:

标签
date: 时间
description: 描述
toc: true

刷面筋 - 11 阿里面经

1

作者：确认过眼神，就你不是人
链接：https://www.nowcoder.com/discuss/72763?type=post&order=create&pos=&page=1&channel=-1&source_id=search_post_nctrack&subType=2
来源：牛客网

阿里巴巴：阿里云-广州（Web前端/Node.js）

一面（2.28）：

很和蔼的面试官，跟他探讨了很多技术问题，收益良多呀，大概30分钟左右

简单介绍一下自己
在学习和项目中遇到的难点以及如何解决
简单介绍一下Backbone（项目里用到过）
React是首次渲染的过程（自己写过一个类React库Kut）
如何优化React的Diff算法的（因为Kut有对这个优化）
Redux和Vuex的区别（因为我用过Vue，也用过Redux和Vuex做状态管理）
了解Weex吗（不了解2333）
TypeScript和ES6的区别
知道XSS吗，介绍一下，如何避免（转义）
实现跨域的方式（jsonp和cors等）
如何理解html语义化
浏览器如何处理未知的tag（引申到Angular利用未知的tag，我没用过，面试官给我科普）
H5有什么新的tag，最重要的tag是什么（面试官想我说canvas）
有什么要问（阿里云技术栈，主要是React/Vue）

二面（3.6）：

感觉面试官有点摸不透，不过还是很好说话，感觉是部门Boss吧，大概20分钟

简单介绍一下自己
为什么想做前端（我是读土木的…）
在项目中遇到的难点以及如何解决
平时喜欢怎么学习（看源码）
你做这些项目都是出于兴趣吗（是呀）
想在哪实习，为什么（广州，女朋友在这工作，面试官直接来一句，你可以把你女朋友介绍来阿里呀）
有什么要问（后面还有几轮面试，面试官说还有就对了）

三面（3.16）：

交叉视频面，蚂蚁苏千大佬面的，有点小激动，大概40分钟

简单介绍一下自己
Node.js的优势，用过Node.js哪些模块
TypeScript和C#的区别
预约系统如何解决并发的问题（项目相关问题，应该是加锁，一下懵逼没答上）
Kut怎么优化React的Diff，有去提pr吗（没有），为什么（因为实现不同）
简单说一下TCP和UDP
Socks5是如何实现的，读过协议吗（曾经做过一个项目）
酸酸是怎么实现穿墙的
熟悉HTTP状态码吗，307是什么，401和403的区别（307没打上来，只记得是和哪个相似，后面查发现是302）
如何实现文件上传的功能（我讲到后面讲成了post的过程，应该是想我说multipart）
有什么要问的（面试暴露了我什么不足，苏大佬说对前后端都有兴趣挺好，不过某段时间应该专注一个方向）

本来内推的大佬看后面还有一个P9的后端（朴灵的Boss）要面我，不过后面状态又变成了hr面，不过到现在等了快1个月了都没等来hr面

2

面试流程：简历筛 -> 一面技术面 -> 二面技术面 -> 三面技术面 -> 四面 HR 面 -> 电话沟通薪资 -> 体检 -> 背调 -> offer （其中任何一个流程挂掉都没有下一步）

注：以下文章内容涉及项目细节的已打码或者未记录。

一面 (2h)

1.1 手写深拷贝（30min手撕代码）

题目是一段代码，乍一看是深拷贝，再咋一看其实是复杂一点的深拷贝，拷贝元素囊括对象、数组、日期、正则、DOM 树。

// 编写一个深度克隆函数，满足以下需求（此题考察面较广，注意细节）
function deepClone(obj) {}

// deepClone 函数测试效果
const objA = {
  name: 'jack',
  birthday: new Date(),
  pattern: /jack/g,
  body: document.body,
  others: [123,'coding', new Date(), /abc/gim,]
};

const objB = deepClone(objA);
console.log(objA === objB); // 打印 false
console.log(objA, objB); // 对象内容一样
复制代码

优化后的代码：

// 深拷贝：对对象内部进行深拷贝，支持 Array、Date、RegExp、DOM
const deepCopy = (sourceObj) => {
  // 如果不是对象则退出（可停止递归）
  if(typeof sourceObj !== 'object') return;
  
  // 深拷贝初始值：对象/数组
  let newObj = (sourceObj instanceof Array) ? [] : {};

  // 使用 for-in 循环对象属性（包括原型链上的属性）
  for (let key in sourceObj) { 
    // 只访问对象自身属性
    if (sourceObj.hasOwnProperty(key)) {
      // 当前属性还未存在于新对象中时
      if(!(key in newObj)){
        if (sourceObj[key] instanceof Date) {
          // 判断日期类型
          newObj[key] = new Date(sourceObj[key].getTime());
        } else if (sourceObj[key] instanceof RegExp) {
          // 判断正则类型
          newObj[key] = new RegExp(sourceObj[key]);
        } else if ((typeof sourceObj[key] === 'object') && sourceObj[key].nodeType === 1 ) {
          // 判断 DOM 元素节点
          let domEle = document.getElementsByTagName(sourceObj[key].nodeName)[0];
          newObj[key] = domEle.cloneNode(true);
        } else {
          // 当元素属于对象（排除 Date、RegExp、DOM）类型时递归拷贝
          newObj[key] = (typeof sourceObj[key] === 'object') ? deepCopy(sourceObj[key]) : sourceObj[key];
        }
      }
    }
  }
  
  
  return newObj;
}

// deepCopy 函数测试效果
const objA = {
  name: 'jack',
  birthday: new Date(),
  pattern: /jack/g,
  body: document.body,
  others: [123,'coding', new Date(), /abc/gim,]
};

const objB = deepCopy(objA);
console.log(objA === objB); // false
console.log(objA.others === objB.others); // false
console.log(objA, objB); // 对象内容一样
复制代码

1.2 自我介绍

面试官你好，我叫XXX，XXXX年毕业于XXXX大学XXXXXXXX专业，（在校实习经历），（目前就职于），（当前岗位职责）。

XXXXXXXXXX…（围绕当前就职公司项目展开，可以初步介绍简历上的项目经验）

XXXXXXXXXX…（围绕自己在当前就职公司做的贡献，体现你的个人价值）

XXXXXXXXXX…（介绍一下在当前就职公司的绩效情况）

XXXXXXXXXX…（简单介绍一下跳槽的原因）

1.3 简历问答

1.3.1 工作经历

基于自我介绍提及，扩展回答。

1.3.2 绩效情况

基于自我介绍提及，扩展回答。

1.3.3 为何在 Vue 和 Angular 和 React 中选了 Vue？

刚入职的时候XXXX有用 Vue 的有用 Angular 的，以前坐我隔壁的XXXX就是用 Angular。

在2020年初的时候我们团队决定统一前端技术栈，当时我也跟领导就是有交涉交流过一些想法。目前市面上三大前端框架 Vue、React、Angular，三个框架本质上没有优劣之分，但技术选型主要考虑合适的场景。选 Vue 第一个是：

Vue 好上手，对新手友好，人员变动情况下能够更快地承接项目。
Vue 技术栈在市场占有率比较高，在招聘上能够选择的人员更多。
Vue 技术社区更新迭代快，社区活跃度高，遇到问题方便查。

1.3.4 JavaScript 和 TypeScript 有什么区别？在技术选型的时候什么因素使你考虑用？

TypeScript 是 JavaScript 的一个超集，它本质上其实是在 JavaScript 上添加了可选的静态类型和基于类的面向对象编程。

TypeScript 的特点：

解决大型项目的代码复杂性
可以在编译期间发现并纠正错误
支持强类型、接口、模块、范型

最开始技术选型的时候，主要考虑是XXX这个项目它不算特别大但是也不算小，而且行内系统可以起到一个试验性参考性的示范。它又是包含了桌面端和移动端，后面有团队想在自己的团队内推广这样的技术选型，都是参考XXX的项目设计。

在实际的使用中，最大的好处还是：第一个是强类型，规范大型工程中变量声明，可控可预知，减少不同开发人员引入的隐性 bug。第二个是接口，在XXX里面的接口，其实主要是用于定义数据结构，也是规范数据结构的作用。第三个是继承，避免重复实现一些功能，protected、public、private 等关键字也可以实现方法的隔离。

1.3.5 关于桌面端 UI 框架选型的思考：为何在 Element 和 iView 中选了 Element？

前端技术框架在选定 Vue 的情况下，当时我在跟领导敲定室内桌面端框架的选择有两个：一个是 iView、一个是 Element。最初我是比较青睐 iView 的，因为整个 UI 设计看起来比 Element 更加清爽，然后在最初XXX重构的时候直接 iView 用上去。

最初使用的时候就发现有个地方其实两个框架有很大区别，Element 的 Table 倾向于元素展示在 HTML 结构上，iView 的 Table 倾向于 template 模式，只有一个 table 标签，所有的数据和内部行列结构都放在 data 里面。（虽然 iView 现在也支持非 template 结构了）

我个人是比较倾向于 Element 的 Table 展示形式，一目了然能看清整个数据结构，而无需把结构类相关的东西绑定到数据里面，使得数据是数据，展示是展示。

有趣的是，当我使用 iView 开发了一个 Table 的时候，发现 IE 浏览器展示不出表格，查了一下发现它不支持 IE，所以我就用了一个周末两天的时间把 iView 整个替换成 Element，这是一个惨痛的教训哈哈。

说回正题，最后敲定 Element 而不选用 iView 的原因：

从 GitHub 上看，Element 50.7k Star，iView 23.9k Star。Element 的用户群更大。
Element 是饿了么开发开源 UI 组件框架，背后靠着阿里；iView 已经进行商业化了，有一些付费定制化的组件出现。如若是没有采购预算的情况下，Element 的全开源性质和文档清爽度会更有优势一些。
iView 的向下兼容性会差一点。

1.3.6 关于移动端 UI 框架选型的思考：为何在 Vant 和 Cube 中选了 Vant？

前端技术框架在选定 Vue 的情况下，在移动端框架选型上也走了一些弯路。在 2019 年刚进XX的时候做完新员工项目之后开始做票据移动端，当时选用的框架是 cube-ui。后面在做XXX移动端的时候基本已经敲定室内统一使用 Vant 了。

选用 Vant 而不选用 cube-ui 的原因：

从 GitHub 上看，Vant 18k Star，cube-ui 8.8k Star。Vant 的用户群更大。
Vant 属于有赞自己开发的开源 UI 框架，cube-ui 属于滴滴自己开发的开源 UI 框架，cube-ui 官网经常打不开，更新活跃度在逐渐下降。Vant 的社区更加活跃一些。
Vant 样式设计风格更加通用，cube 设计风格统一黄灰色比较明显的滴滴风。

1.3.7 互联网公司和金融科技公司在开发流程上的区别

互联网公司：产品经理+交互设计+UI设计 -> 前端开发+后端开发 ->测试
金融科技公司：业务 -> 开发 -> 测试

1.4 工作方式：当需求方在开发周期内临时改动需求时怎么办？

首先是对改动点的评估，前端人员初步进行评估，假设是“改动按钮颜色”之类的小改动，可以直接更改但是要做好需求登记。
其次当改动点较大时，举个例子假如是“新增加一个金融推广活动页面”，前端后端测试共同评估是否对开发周期造成影响，若是超过开发周期太大的时间可以跟需求方提出将改动放到下个迭代；若是需求改动要求比较急，在请示上级领导评估之后，可以加急改动。

1.5 vue2 双向绑定原理

双向绑定是什么？

首先明确一下双向绑定和响应式的概念，双向绑定是双向的，表示数据改变驱动视图改变，视图反过来也可以改变数据。响应式是单向的，只代表数据改变驱动视图改变，响应式的主要原理是数据劫持和观察者模式，是 Vue 最核心的模块。

Vue 双向绑定和 React 单向绑定

其中 Vue 和 React 的区别之一就是：Vue 是双向绑定；React 是单向绑定，因为 React 视图的改变需要手动执行 this.$setState() 来改变数据。

1.6 Vue2 数据劫持的原理

数据劫持核心是 defineReactive 函数，里面主要使用 Object.defineProperty 来对对象访问器 getter 和 setter 进行劫持。数据变更时 set 函数里面可以通知视图更新。

在使用 Object.defineProperty 进行数据劫持的时候，对象和数组是分开处理的：对象是遍历对象属性之后进行递归劫持；数组是重写数组的原型方法比如 splice。这个我看了一些源码和资料。Object.defineProperty 本身是可以监控到数组下标的变化的，但尤大在 github issue 回复过从性能/体验的性价比考虑弃用了这种对数组的劫持方案。举例子就是对象属性通常比较少对每一个属性劫持不会消耗太多性能，但数组可能有成千上万个元素，如果每一个元素都劫持，无疑消耗过多性能。

1.7 Vue2 数据劫持的缺陷

第一个缺陷是由于 Vue2 数据劫持底层是用 ES5 的 Object.defineProperty 实现的，所以不兼容 IE8 以下。

第二个缺陷是 Vue2 数据劫持无法检测数组和对象的变化，只会劫持一开始存在 data 选项里面的数据，这就是官网建议我们把可能要使用的数据一开始声明在 data 里面并提供初始值。对象新增属性可以通过 Vue.$set() 进行数据劫持，数组新增元素也可以通过 Vue.$set()，或者因为数组原型方法已经被重写了可以用 splice、push、unshift 等方法新增元素。

1.8 Vue3 数据劫持的优势

Vue3 数据劫持底层主要是使用 ES6 的 Proxy 实现。

Proxy 的优势如下:

Proxy 可以直接监听对象（const proxy = new Proxy(target, handler)）；defineProperty 需要遍历对象属性进行监听。
Proxy 可以直接监听对象新增的属性；defineProperty 只能劫持一开始就存在的属性，新增属性需要手动 Observer。
Proxy 可以直接监听数组的变化；defineProperty 无法监听数组的变化。
Proxy 有多达 13 种拦截方法：不限于 get、set、has、deleteProperty、apply、ownKeys、construct 等等；除开 get 和 set 其他都是 defineProperty 不具备的。
Proxy 返回的是一个新对象，我们可以只操作新的对象达到目的；defineProperty 只能遍历对象属性直接修改；

Proxy 的劣势如下:

ES6 的 Proxy 的存在浏览器兼容性问题。

Proxy 和 Reflect 结合实现 Vue3 底层数据劫持原理。Reflect 设计的目的是为了优化 Object 的一些操作方法以及合理的返回 Object 操作返回的结果，对于一些命令式的 Object 行为，Reflect 对象可以将其变为函数式的行为。比如 （'name' in obj） = Reflect.has(obj, 'name')

1.9 Vue3 有什么新特性

Vue2.x 的组织代码形式，叫 Options API，而 Vue3 最大的特点是 Composition API 中文名是合成函数：以函数为载体，将业务相关的逻辑代码抽取到一起，整体打包对外提供相应能力。可以理解它是我们组织代码，解决逻辑复用的一种方案。

其中 setup 是 Composition API 的入口函数，是在 beforeCreate 声明周期函数之前执行的。还提供了 ref 函数定义一个响应式的数据，reactive 函数定义多个数据的响应式等等。

1.10 面试官建议

简历上项目的深度分析，回答的时候要有逻辑条理和准备。
工作上的沉淀和积累可以在掘金平台以文章的形式输出。

二面 (45min)

2.1 假设团队内从 Vue 转为 React，你认为要做什么准备？

从团队角度上考虑：主要是做好技术培训、技术分享、建立可参考性的模版工程。
从个人角度上考虑：从技术细节、底层原理上对 vue 和 react 进行对比。然后在现有的工程上面结合技术和业务进行学习，快速成长。

2.2 微前端解决方案 qiankun？JS沙箱的原理？样式隔离的原理？

qiankun 是基于 single-spa 封装的，提供了更加开箱即用的 API，使得微应用的接入像使用 iframe 一样简单，实现把应用改造的工作量降到最低。并且主应用和微应用都是技术栈无关的，解决了开发中的两个问题：第一是空间上不同团队的协同开发不必统一技术栈，第二是时间上不同版本技术栈的升级维护无需统一。因此技术栈无关是微前端的核心价值。
JS 沙箱：

快照沙箱(snapshotSandbox)：在应用沙箱挂载和卸载的时候记录快照，在应用切换的时候依据快照恢复环境。qiankun 的快照沙箱是基于 diff 来实现的，主要用于不支持 window.Proxy 的低版本浏览器，而且也只适合单个实例的子应用，且会污染全局 window。
代理沙箱(proxySandbox)

：qiankun 基于 es6 的
```
Proxy
```
实现了两种应用场景不同的沙箱，一种是
```
legacySandbox
```
(单例)，一种是
```
proxySandbox
```
(多例)。因为都是基于 Proxy 实现的，所以都称为代理沙箱。
- 单例沙箱(legacySandbox)：同样会对 window 造成污染，但是性能比快照沙箱好，不用遍历 window 对象。
- 多例沙箱(proxySandbox)：不会污染全局 window 并支持多个子应用同时加载。

样式隔离：微前端框架里面可能会遇到的样式冲突有两种，一种是主子应用样式冲突，另一种是子应用之间的应用冲突。

动态样式表(Dynamic Stylesheet)：qiankun 自动实现子应用切换时子应用样式动态切换，能够保证你在单应用模式下（就是同时只能有一个应用活跃的情况下）保证子应用和子应用之间的样式不会冲突。
工程化手段(css module)：可以通过手动的方式确保主应用与微应用之间的样式隔离，比如给主应用的所有样式添加一个前缀（或者使用库）；也可以通过配置 { sandbox : { experimentalStyleIsolation: true } } 的方式开启运行时的 scoped css 功能，从而解决应用间的样式隔离问题。
严格样式隔离(Shadow DOM)：默认情况下沙箱可以确保单实例场景子应用之间的样式隔离，但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。当配置为 { strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。（但是使用时还是要适配和考虑特殊情况）

2.3 长列表渲染底层原理？业内有哪些解决方案？

百万PV商城实践系列 - 前端长列表渲染优化实战

三面 (20min)

自我介绍，技术选型，项目细节。全长 20 分钟，跟一面二面问题有些重复，团队大领导面试。主要是工作方式和技术思考方面的考察。

四面 HR 面 (30min)

4.1 你觉得前端在整个产品里面扮演什么样的角色？

在技术流程上，前端担任一个桥梁的作用。在拥有比较清晰岗位职责的互联网公司，通常都是产品经理、交互设计师、UI 设计师 给出需求文档、原型图、设计图给前端工程师，前端工程师再跟后端工程师进行开发联调。在实际工作中，前端工程师作为抽象产品和技术实现之间的桥梁，可以担任更多的职责，为产品实现把好最后一道关，从技术实现和真正成品的角度反馈意见给产品经理。而我目前工作中前面只有业务人员，所以角色任务更加重一些，需要帮助业务人员去落地产品的概念，出UI图原型图，核实业务人员真正的需求。
从产品角度上，随着时代的发展，越来越多的产品看重前端，因为产品的客户体验具有强大的竞争力。市场上优秀的互联网产品很多，当我们的产品是对公且涉及金钱交易的尤其需要前端工程师，因为客户体验是第一位的，技术承载了业务，前端承载了客户体验，具有举足轻重的地位。

4.2 一个好的前端工程师具备什么样的品质？

由我上面的回答可以略知：

好的前端工程师需要拥有较强的沟通能力。除开技术能力强之外，前端工程师仍然需要很强的沟通能力。因为他担任着产品需求和技术实现之前的桥梁，有些时候甚至需要担任产品和后端之间的沟通桥梁。前端工程师经常会遇到 产品经理、交互设计师、UI 设计师 更改需求的时候，这个时候就会需要前端工程师具有较强的沟通能力，互相沟通协调将产品真正地落地。（可以补充自己工作中的经历：比如XXX的业务沟通）
好的前端工程师需要以客户体验为优先。比如当产品工程师提的需求不符合以客户体验优先的前提，前端工程师过需求的时候发现了，其实可以去跟产品沟通一个更好的实现方案。明确我们整个开发条线的目标是落地一个好产品，并不是说产品说什么就是什么，前端需要及时给产品一个反馈。（可以补充自己工作中的经历：比如XXX的业务沟通）

4.3 女性工程师数量比较少，作为女性，在这一方面有什么感悟吗？

一路走来确实有很多感悟，从校招到社招确实没有看到过女技术面试官，我是希望着去更大更好的地方出现可以仰望的女程序员，那我会在这条路上得到更多鼓舞。20多年时间里确实是付出了很多努力甚至更多的努力追上男工程师，也得到很多人的鼓励和帮助，我一直告诉自己，不要害怕失败，坦然接受失败，然后进步改进。未来，我希望能走的更远，在年轻的时候多见见世面多感受和多体验，珍惜当下的努力。以后回首往事的时候，一路走来每一步脚印都是勋章。

4.4 假设能进入阿里，你想在这里收获什么？有什么方向规划吗？

希望能收获更多成长吧，不管是技术上还是工程上，阿里提供的平台比我目前的情况要好的多。前端的话其实有三个大致的方向：管理方向、研发方向、业务方向，但是这三个方向在日常工作中其实不互斥是穿插着的。我的规划是希望能在业务和技术上精进，有一定全局的认知，在广度上深度上都有一定的了解，再考虑走上管理的岗位。

管理方向：作为主管带一个前端小组、项目小组或前端团队，兼职部分管理职能如招聘、打绩效等。
研发方向：作为技术骨干做偏技术方向的探索和实践，做各种工具链建设提效降本，如搭建平台研发。
业务方向：做业务型的项目为主，与业务团队一起完成公司目标，交付 toB/toC/toG 的各种项目。

这些方向并不互斥，往往是并行的，跟一个同学的工作年限、公司的业务和团队现状都有很强的关联性，比如我在阿里时候的一个主管，工作头两三年做业务开发中后台网页，后面两三年偏研发沉淀框架和组件化，再往后几年在兼顾业务的前提下，同时兼顾研发及带一个小团队，再往后一两年又重新做纯技术研发，最近又开始带一个更大的团队做业务。

4.5 你目前薪资总包是多少？

总结

社招面试整体感觉跟两年前校招面试相比，校招容易问八股文或者算法基础，社招在技术基础之上更重视项目经验和技术思考。

我其实也面试了其他的公司，总的来说社招跟不到十位面试官视频对线过，他们面对社招员工更加看重价值思考能力、主动解决能力、管理带队能力。很多码农（包括我）都觉得纯粹做技术写代码是最单纯开心的，但是只要人在职场，势必是要面对很多问题然后需要你出力去解决，这才是公司需要的“普通员工”。

关于非技术能力的理解和锻炼可以看看这篇：和导师去摸鱼的时候我们都聊了什么

还有就是这一次社招这波面试让我意识到了表达沟通能力很重要，有些问题也好知识点也罢，怎么将这些知识用口语表达给面试官确实很讲技巧。在准备面试之前可以找个人（你家的猫）跟你玩 cosplay，猫问你 Vue2 双向绑定原理，那你就思考如果用口语表达清楚通顺。

最后可以分享一下心态调整方面，很多人觉得裸辞找工作会焦虑会不安，我这次社招情况比较特殊，我下定决心要离开这里的时候就提前两个月跟领导打招呼了（得看领导人好不好不可随意效仿），当时我就抱着两个月走不掉就裸辞的心态出来面试的，因为确实抛开工作内容之外，面试有很多东西要准备，如果不提前打招呼平时加班啊就没有时间和精力去准备面试。

反正我认真复习认真总结，认真对待每一场面试，把每一场面试都当成一次学习的机会，你要换个思路不要把面试当成一场非赢即输的考试，而是把它当成一次学习交流的机会，面试终究是双向选择的，不成功即成仁。

其次，要认可自己，足够的爱自己，不要否定自己，失败了就再来，有什么大不了呢？人生漫漫长路，没有人是赢家。快乐至上，珍惜当下，冲就完事了。

3

社招一年前端

三面过，等hr

感觉是因为紧急缺人，所以技术面试比较简单

一面

前端小哥哥，应该是组内同事

盒模型

flex

cdn

http状态码

vue源码

请求头

package.json的内容

^啥意思

package.lock.json的意思

二面

我猜是个后端，因为前端面的比较简单

如何写一个组件

为什么组内决定不用react而是vue

es5和es6的区别

有点忘了，反正比较简单

三面

笔试

可能是个资深leader，或者职位比较高之类

让我自己做题目，有问题打字告诉他，然后可能忙去了

1.写一个react组件

模糊搜索框

表格

分页

2.遍历一个未知节点未知深度的树（对象）

排序[32,34,5,6]排成最大的int类型数据653432

3.三种垂直居中样式

4

阿里云面经
通过内推码进的群，然后在阿里招聘官网上面试

一面

因为白天还要上班，晚上下班回家时候面试官打电话过来面试了（突击~）

先自我介绍：…

谈一谈你对面向对象的理解
你认为Java中的接口和抽象类有什么区别，他们的用途是什么？（这里我说到了接口可以做为dto）
场景题：给你一个不确定高度的盒子，如何实现内容垂直水平居中
几种CSS属性的相对单位是相对于谁的
听说你用Vue比较多？请你说一下Vue的优点有哪些？
Vue更新节点的过程是什么？（说到了updateChildren函数和虚拟节点以及diff）
Diff算法作用，细节？
在获取元素过程中会触发回流吗？为什么操作DOM比较耗费性能
数据结构中你了解过哪些树，以及他们的作用？（说到了B+树用作Mysql索引，被问到为什么）（红黑树用到了jdk1.8中的HashMap上，为什么用红黑树？优化查找效率）
算法题：有1元5元10元 100元的钞票，给你一个钱，如何用最小的钞票数量去凑够给的钱数。
请你说一下你的长处？（面试官说，你要喜欢Java的话，好好了解一下Java的底层）
二面（59min）（ps：二面面试官是阿里P8架构师，只能说牛逼~）主要问项目

面试官在晚上11点时候打来的电话，准备面试，因为她开会比较多，比较忙吧~
你现在大三吗？明年什么时候毕业呀？
上来问我做了几个项目，以及他的作用，意义，架构选型，开发周期
在快手做了什么项目，哪个项目你觉得最难？有什么收获？
好的，咱们来聊一聊React相关的东西，React的生命周期方法有哪些？
React的diff算法，组件通信有哪些？redux调用流程是什么样的？
首屏加载太慢情况下，你如何不用任何框架去解决？提出几个思路，并且讲一下优缺点
给你5000个节点，如何不卡死主线程下去渲染，尽量减少回流（说了使用文档碎片方法，减少回流）
cookie、session、token区别，解决什么场景
如何解决跨域？

5

阿里云面经
通过内推码进的群，然后在阿里招聘官网上面试

一面

因为白天还要上班，晚上下班回家时候面试官打电话过来面试了（突击~）

先自我介绍：…

6

作者：神三元
链接：https://www.nowcoder.com/discuss/392835
来源：牛客网

个人目前状态，手里已经拿到字节跳动抖音前端架构组的offer，阿里终面已经结束，聊的不错，正在等待offer下来。下面分享一下阿里云面经。
3.10晚阿里云一面：

HTTPS 的握手过程讲一讲。(讲了很久很细，面试官知道我理解，喊停了)
- HTTPS 和 HTTP 的缓存有什么区别？(懵了)
DOM API 掌握怎么样？ (不是很熟)
- Element 和 Node 的区别(假装想了一会，不知道)
XSS 攻击 Cookie相关的字段(HttpOnly, 解释了一下作用)
CSRF 攻击，解释一下 Cookie 的 SameSite 字段 (说了下，觉得可以，过)
- chrome 最新的 xxx 特性是如何防范 CSRF 攻击 (这个真没听说过)
fetch 和 xhr 有什么区别？(fetch 不熟)
- 好，解释一下 xhr 的 cors 过程(简单请求，非简单请求两种情况，说了下)
React 闭包陷阱有什么好的解决办法吗？(说实话，简历上写了，实际上理解不深，只说了一种)
- useReducer 可以解决你知道吗？ (当时真的不清楚，主要忘了闭包陷阱的表单场景，尴尬)
看了你的小册子，能不能讲讲React.memo 和 JS 的 memorize 函数的区别(memorize函数当时不知道，以为是什么高深的算法，后来才发现就是cache函数，换了个名字而已。反正当时说不会)
- 特意考了一题对React.memo的理解(擦，还是考React.memo, 三个场景，中间一个场景答错了，非常减分。这道题出的还是很有水平)
WeakMap 和 Map 的性能有什么差别?(前者对 GC 更加友好，保持弱引用)
- 如果是在立即执行函数中，两者的性能有区别吗？(楞了一会，说强弱引用还是会有GC的区别，没影响)
  - 换个说法吧，如果这个立即执行函数中有递归函数，两者性能有区别吗？(没 GET 到面试官的点啊，过了吧这题)
能不能说说 AMD 和 ESModule 有什么区别？(AMD 不熟，说ESModule，介绍了import、export以及导出引用的特点)
- 那么你能不能告诉我 ESModule 对于 Tree-Shaking 有什么优势呢？(会做一些编译阶段的优化吧)
async await 经过编译后和 generator 有啥联系？(问了两遍，还是不知道问的啥，直接说了async await 原理，他说你讲了太深，问的不是这个，过吧过吧)
有什么想要问我吗？

反问的问题:

React 闭包陷阱如何用 useReducer 解决？ (面试官又说了一遍)
能不能说一说您正在做的业务中，遇到什么挑战，有什么解决思路？(说了很多，看的出来，阿里的大神都是特别有想法、有创意，最后也给我指引了一些未来的方向，比如前端未来的容器化，对于中台页面的构建进行服务级别的调用，而不是去一个个组件去写，了解一下后端的安全容器概念，另外推荐我去看一看蚂蚁金服的微前端框架的实现。深深的佩服，开了眼界，收获很大!)

另外，一面并没有发挥我的优势，问的问题跟我不太match，甚至有些问题都没有听懂，虽然看的出来面试官比较欣赏我，但个人觉得情况很不乐观。挂了也就挂了吧，我觉得挂了也正常。

后续: 3 月 11 号下午内推我的大佬来信，了解到昨天面我的是团队中公认技术最牛的专家，面试官给的评价是，虽然有一些问题，但是整体表现不错，在应届生里面已经可以了。好好等下轮。

3.19 晚阿里云二面(37min)
(ps：等的太久了，都没紧张的感觉了)
二面主管问我先面试还是先笔试，因为有两个流程。我说先面试吧。

首先自我介绍
为什么要做你这个开源项目？后台数据哪来的？
有 nodejs 相关的开发经验吗？(果断说没有，避免给后面挖坑)
HTTP 的 GET 和 POST 请求有什么区别？(我说了 4 个区别)
说一说 CSRF 和 XSS 攻击？(说了一堆，他说你讲的太细了，是不是最近看过之类的文章，我说没有)
HTTP 缓存能不能说一下？(强缓存，协商缓存，中间扯到代理了，讲了一堆，他说可以了)
你知道 JS 的语言标准是如何制定的吗？(确实不熟，说下去自己查查)
- 你用过哪些 ES 最新的语法，越新越好
你对 babel 了解吗？能不能说说几个 stage 代表什么意思？
Vue 的响应式对数组是如何处理的？(重写数组方法，手动派发更新)
- Object 为什么可以自动派发更新？
假如我在一个for循环中改变当前组件依赖的数据，改变一万次，会有什么效果？(讲到批量更新和 nextTick 原理，他表示可以)
假如让你设计一个适配 PC、手机和平板的项目，你有哪些布局方案？(首先是vh、vw，然后用淘宝出品的 lib-flexible 库进行 rem 适配，还有一种 flex + px 的适配方式)
CSS 当中以 @ 开头的属性有哪些？(我说了@media, @keyframes，后来提醒我还有@import，我补充这个是串行加载 CSS)
了解过前端当前的发展趋势吗，比如一些新的技术方向。(说了对PWA的看法，为什么会凉，flutter、electron、微前端，serverless)
了解过云计算吗？能不能讲一讲云计算的发展方向和前景？
有什么兴趣爱好？
对自己的职业规划是怎样的？(说了一大堆，他笑了笑，说今天就到这里吧，明天笔试)

第二天主管告诉我不需要笔试了，笔试取消。

3.20 阿里云三面(57min)
聊了狠多，但是聊的很轻松，没有编程题，而且和个人经历强相关，就不整理题目了。

3.24 阿里云四面(40min)
让人自闭的一场交叉面。

自我介绍
为什么选择前端？
你的职业规划是怎样的？
项目中遇到了哪些挑战？
说说你对前端架构的认识，如何设计出一个架构方案
在一个大型项目中，JS 如何定位发生内存泄露的代码？
Last-Modified 和 Etag 有什么区别？
- Cache-Control 和 Last-Modified 的区别
后端语言对 nodejs 更熟还是 Java 更熟？(Java)
- 说说 String, StringBuilder 和 StringBuffer 的区别
跨域有哪些方案？
React 受控组件和非受控组件的区别

3.26 阿里云终面(50min)

自我介绍
你自己在社区做过什么具有推动性的事情？
你能不能说说自己比较擅长的数据结构有哪些？
在学校参加过竞赛吗？
你希望公司的环境是怎么样的？
为什么不投腾讯？
阿里云和抖音你更想去哪里？为什么？
你还有什么问题？

8 个人情况：

双非本科/软件工程专业/2019届毕业生，坐标杭州，目前在小厂

盒马

一面（30min）电话面试

webpack 打包流程
Taro 框架原理
React Diff
useContext 怎么使用
讲一讲如何从零打造一个工程

面试官给我建议是要有结构化思维，大意就是不要没有头绪的说一件事，要有分层次的去阐述，让面试官觉得你的逻辑清晰有条理。

在线Coding（30min）

二面（50min）视频面试

Taro 2 框架除了对静态编译的处理，还要去做哪些工作？
Node 的实践，具体的 case
Node 高并发、服务挂了怎么办
小程序和 H5 的区别
为什么小程序性能会比 H5 较好
B端和 C端开发中的差异和体会
写组件库的时候要注意什么

三面（20min）电话面试

聊聊项目
针对小程序首屏优化，除了你说的优化方式，之后还会怎么做，有其他思路吗？
未来规划

hr面（15min）电话面试（挂）

hr面最终是给挂了…可能是过程中没有很自信，回答问题也没什么重点，更多还是从自身原因去考虑吧

淘宝特价版

盒马的面试流程结束后，很快就被捞了，淘宝特价的一面面试官和我简单聊了下，说之前的面试评价都蛮不错，当天就跟我约晚上电话面试，所以继续磨吧～

一面（50min）电话面试

setState 是异步的嘛
Taro2 / Taro3 / Rax （编译时，运行时）的区别和原理
Taro2 哪些语法不支持
运行时框架性能有损耗，该怎么优化
柯里化
302/301 状态码
react diff
useMemo / useCallback 如何使用
React Hooks 里如何实现 Class 的 componentDidUpdate
React 如何做优化
React v17 有去做了解嘛
社区有参与开源项目、有博客嘛

二面（20min）电话面试

上次盒马面试后，你有什么感受
有去做什么改变嘛
聊聊项目
写组件库的时候要注意什么
小程序跨段框架：为什么会有运行时方案的产生？
未来规划

三面（50min）现场面试（挂）

在写营销业务时，有什么注意点
所在团队的工程化建设
自己对工程化的理解和实践
有去参与什么开源项目嘛
未来规划

三面被挂了，回过头来反思，一方面是自己所在团队对工程化的实践不足，自己也没有去折腾去改变（安于现状），另一方面也明显感觉到面试官的要求是蛮高的；蛮可惜没有通过的，确实有点气馁了。

蚂蚁金服

淘宝特价的一面面试官非常热心，之后聊了下也鼓励我，觉着我是有能力的，帮我推荐到了蚂蚁金服，摆脱了面试失败的情绪，自我调整了两天，开始面试：

一面（1.5h）电话面试

上来就先coding，时间控制在1h，之后简单聊了一下

小程序跨端框架中 Babel 转译的过程
Taro 的源码有去看吗？讲一讲 babylon 解析的流程
聊聊项目

二面（50min）电话面试

Rax 是如何将 React / Vue 转成小程序 DSL
运行时框架性能有损耗，该怎么优化
聊了下之前做的红包雨小游戏，碰到的坑和解决思路
聊了下对首屏优化的实践

三面（20min）视频面试

Node 的实践经历
简单说下支付宝小程序的技术架构
未来的发展方向

hr面（20min）视频面试

这次吸取了上次hr面的教训，有了足够的心理建设后，和hr聊的也不错，之后很快就告诉我通过了

交叉面（20min）电话面试

讲一下现在团队所做的业务和自己的理解
微信小程序和支付宝小程序业务/技术实现上的差别
聊聊项目

面试最终是通过了，目前offer在审批中；在写这份面经的时候内心澎湃，前后两个多月的经历给自己的帮助真的非常多，也非常感谢几位热心善良的前辈，给我指点和引荐。

希望自己最终能够成功入职！

9 前言

我真的太后知后觉了…, 原本以为实习是大四的事情, 暑假安心在家里摸鱼, 三月初某天和同样是17级的同学聊天时, 突然知晓对方已经到了字节跳动前端终面, 顿时一惊, 问了才知道原来有暑假实习这个东西! 而且还仅限大三(研二)! 于是火速开始复习前端基础以及复盘之前的项目. 当时的规划大概是这样色的:

非科班, 计算机基础软肋, 选择重点补计算机网络, 算法和数据结构只准备了一些, lc30道题大概.
无社会实习经历, 但有不少项目经历, PC/小程序/后端均有完整项目. 重点复盘其中的亮点难点.
对基础设施/工程化/智能化有兴趣, 落地过基于GraphQL的BFF, CI/CD/Docker/Serverless/错误监控/埋点都有实践…, 重点准备并作为简历亮点(后来事实证明这一块真的挺重要).

确定了规划之后我就开始8107的准备了, 大概在3-18投出了简历, 经历20天5轮技术+1轮HR成功上岸.

一面

这一面主要问了基础部分, 一部分题目我会带上提示

TCP 三次握手/四次挥手/等待2MSL意义/建立连接但客户端故障

我这里还提了握手失败/泛洪攻击/RST包等
TCP 慢启动/拥塞控制, 快速重传/快速恢复, 这也是我准备比较多的, 毕竟之前没接触过.
TCP UDP QUIC(QUIC是Http3的底层协议)
Http2相对于Http1.1新增了哪些东西, 主要是信道复用之类的.
浏览器渲染过程, 注意只是渲染过程, 就是从解析DOM树到展示在屏幕这个过程

主要是 令牌化/建树/收集样式表/布局渲染树/绘制列表/栅格化/绘制图块/…这些过程, 推荐阅读浏览器的工作原理：新式网络浏览器幕后揭秘
强缓存与协商缓存, 主要讲了下E-Tag和Last-Modified以及对应的标识, 强缓存方案与协商缓存方案的场景, 比如index.html该用哪个?
CSS的水平居中与垂直居中, 这个由于我平时CSS写的不多, 通常是在UI库基础上做微调, 只回答了之前记录的方案.
移动端1px, 老问题啦.
Git操作, 主要是revert与reset, 我们工作室使用的是Git Flow, 并且区分Master和Dev分支这种, 小哥说了一个Git Flow无法handle的场景, 即一个feature还未合并到Master, 但是后面的一个feature已经通过提测要并进主干, 这时要如何处理?
React: 新旧生命周期的问题, 为什么要废弃旧版的(约束开发者以及Fiber架构可能会将其打断), 新版的有什么特点(getDerivedStateFromProps(nextProps, prevState), 这个方法是静态方法, 也就说你无法在里面获取到this, 还有就是入参为prevState, 这样就保证state和props之间更隔离). 还有就是我觉得很好玩的getDerivedStateFromErrors和componentDidCatch的协作.

React: PureComponent, 浅比较, 关于浅比较这个我在自己之前一篇讲useSelector的文章中提到过. 放一下shouldComponentUpdate中shallowEuqal的源码:

  const hasOwn = Object.prototype.hasOwnProperty;
  
  function is(x, y) {
    if (x === y) {
      return x !== 0 || y !== 0 || 1 / x === 1 / y;
    } else {
      return x !== x && y !== y;
    }
  }
  
  export default function shallowEqual(objA, objB) {
    if (is(objA, objB)) return true;
    if (
      typeof objA !== "object" ||
      objA === null ||
      typeof objB !== "object" ||
      objB === null
    ) {
      return false;
    }
  
    const keysA = Object.keys(objA);
    const keysB = Object.keys(objB);
  
    if (keysA.length !== keysB.length) return false;
  
    for (let i = 0; i < keysA.length; i++) {
      if (!hasOwn.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
        return false;
      }
    }
    return true;
  }

React: setState之后发生的, 这个当时没怎么看, 只是回答了一下批量更新, 还有在合成事件与原生异步事件中的不同表现, 我个人认为其本质还是同步的哈.
多次setState的合并与获取最新的state, 其实这俩个是同一处代码(好像是particalState), 内部对参数的Object类型和Function类型做了不同的处理, 为函数的情况下, 会在setState调用完成并且组件开始rerender的时候被调用.
Node: stream和Buffer, 面试前不久刚写过流式的文件上传所以记忆犹新, 回答了四种流(可写/可读/可写可读/可转换), 以及常用的几个pipe方法.

Buffer的话主要提了一下它是堆外内存(V8的常驻内存由代码区/栈/堆/堆外内存组成)啥的.
Node: 内存管理, 这个也是面试前看到过通过启动命令更改堆内存上限的文章所以了解的多了一下, 主要关键词有 新生代/老生代假说, Scavenge算法(采用复制实现内存回收, 典型的牺牲空间换时间), From/To空间, 标记清除, 标记整理, 增量标记(将标记阶段拆分为控制在5ms内的小步骤, 每隔一段时间执行, 提高程序流畅性.)

一面主要问的都是基础, 面试官给我的感觉就像学长一样! 还给我解答了一哈回答得不好的问题. 一面时间大概一个多小时, 感觉问题都问到我心坎上了? 就是没有问到不太会的问题.

Web安全, XSS与XSRF攻击. 这里还扯了一下Axios的X-XSRF-TOKEN机制. 可惜是在面试后才看到冴羽大大的预测最近面试会考 Cookie 的 SameSite 属性, 不然还能加一波分?

二面

可能因为简历上写的工程化比较多, 二三四面都问了比较多工程化的东西.

微信小程序, 这个是二面的重点提问之一, 包括以下几个方面:
- 生命周期, 包括应用级的和页面级的.
- 架构, View - Native - JavaScript的层级, 系统层能力, 如微信开放能力/离线存储/网络请求等. 视图层的话, 安卓下是腾讯自主研发的基于Blink的X5内核, IOS的话则是自带的WebKit-Webview
- 使用async/await, 小程序目前好像并不能原生支持async/await语法, 需要引入FB的Regenerator库. 说到这个, 我很好奇Taro/Remax这些方案中是如何处理async/await的, 降级为Promise吗?
- 鉴权, code2session这个api, 使用sessionKey生成token, openid作为主键入数据库, 再返回自定义的登录态标识.
- 与 H5/RN/Flutter/PWA 这些差异, 主要是和 H5/PWA , 我其实不太认同 PWA是小程序祖师爷 这种说法, 甚至认为不是一个性质, 只是他们的目的/玩法是相似的.
- WXS, 我顺便提了一哈, 因为当时小程序也用到了, 主要特点就是运行在View层的逻辑, 并且由于JavaScript在IOS下运行在JSCore, 安卓下运行在V8的原因, 在IOS上WXS可以达到JS数十倍的性能, 但在安卓上和JS持平.
- setState, 很神奇的一点: 数据改变同步而视图更新异步, 主要也是因为上面提到的架构的原因. 有兴趣的可以再查阅相关资料.
- 小程序如何做到禁止访问Dom, 我的理解是小程序压根就没提供DOM/BOM的API, 并且在打包编译的JS里也获取不到Window对象.
@Penumbra/cli, 这是我自己写的一个思路类似Feflow的脚手架, 也是 脚手架核心+模板插件包+构建器 的一个组合, 模板插件包的话, 前端包含 Webpack/Parcel + TypeScript/JavaScript的组合, 后端包含Koa/Egg + RESTFul/GraphQL的组合. 主要问了这些问题:
- 为什么要整这个东西, 解决了哪些问题?
- 带来了什么好处?
- 为什么还添加了Parcel, 这个主要是因为一些小项目小demo用Parcel是真的简单, 比如这个我自己搭的一个Parcel-Tsx-Template, 真-开箱即用, 真-零配置. 但是要写什么正式项目的话, 还是老老实实Webpack.
Parcel和Webpack, 由上面的展开问的, 说了一下二者的差异(内置HMR与代码分割, 预置配置), 还有就是Parcel其实也有Loader和Plugin, 之前翻了一下源码, 叫@Parcel/transformer-xxx这种. 还有就是Parcel打包前会做资源树分析优化, 并且过于黑盒, 内部写死了一套配置(好像叫config.json).
还顺便提了下Umi, 因为简历上有个Umi + Dva + Antd Pro的项目, 分析了下Umi啥的: 我个人觉得Umi是"框架的框架", 即在Webpack的基础上做了一套性能调优到极限的配置和满足大部分开发需求的生态(插件)等等.
错误监控, 我们目前使用的方式是Sentry以及Release时上传Source-Map文件的方式. 自己实现的话, React的思路主要是一个最外层的<ErrorBoundry />组件, 借助getDerivedStateFromError与componentDidCatch来捕获错误.
Https加密机制
Git Rebase 与 Git Merge
Flutter 与 React Native底层, 我只讲到Skia引擎, 毕竟Flutter还没写过完整项目…
Serverless, 这一块我主要讲了FaaS以及BaaS, 还有Serverless对前端意义, 这个问题千人千面, 我自己的理解不一定是对的, 就不展开来讲了.

二面主要针对项目进行发问, 不得不说果然是前辈, 很多项目死角都被揪出来了, 还好的确之前花了时间思考了下也答上来了. 建议复盘项目可以找个有经验的同学来帮你想想这个项目会从哪些角度被提问, 毕竟当局者迷嘛.

三面&四面

三面和四面发问的角度和提出的问题比较类似, 因此就放在一起讲了.

介绍项目, 我通常会问面试官是对业务型项目还是设施型项目比较感兴趣, 业务型的话就介绍小程序, 设施型就介绍@Penumbra/cli.
小程序由于 UI/交互/前后端都是自己搞的, 所以能讲的真的蛮多, 但是通常会更聚焦于这个小程序的业务场景(图书资源整合), 这也是在介绍项目时我觉得比较好的一种方式:

不要东扯一点西扯一点, 以 技术栈 -> 业务场景 -> 亮点 -> 难点 -> 提炼总结 -> 自我提升 这几个步骤来叙述会更加条理清晰, 其中亮点/难点以STAR法则介绍最佳.
@Penumbra/cli这个, 上面已经介绍过, 就不再赘述. 主要为了体现 新工程目录建立繁琐 -> 应当成员之间统一目录结构 这个意识.
GraphQL, 难得遇到会问这个的, 要知道我可是把这个作为简历亮点的, 但是却无人问津…, 主要介绍了这些:
- GraphQL的意义, 与RESTFul的差异
- 对后端的影响, 其实吧我觉得现在不太可能用GraphQL作为应用的主API(除非出现了为图式查询而生的数据库, 至于FB和GitHub的GraphQL API我觉得是其内部有自研的方案), 也就是让后端同学来搞, 大部分场景应该还是后端同学搞微服务, 然后前端同学自己来写一个BFF层做接口的聚合/清洗/鉴权等等, 也就是说并不会"这个世界充满了对后端的压迫, 后端什么时候才能站起来, 气抖冷"hhhh. 既然让前端写, 那肯定是用Node了, 这个时候Apollo这些方案就真的很香了(下面会多介绍下.)
- Apollo生态, 在这里我想大胆猜测下, 未来的BFF层一定少不了这三个东西: Apollo-Server & TypeGraphQL & Apollo-Rest-Datasource, 至于它们是什么感兴趣同学可以去查查. Apollo不仅提供了服务端支持, 也提供了客户端支持, 即Apollo-Client, 同时使用Server和Client来构建应用真的能起到1+1>2的效果, 因为二者就像是一体的.
- 推广阻力, 其实只要一个团队比较年轻就没有什么阻力, 主要是可能有一定的学习/开发/维护成本~ 嚷嚷着"学不动了"在前端世界里可能真的寸步难行.
Webpack性能调优, 我从 打包速率 / 打包大小 / 交互友好 三个方面入手的, 这里可以稍微列举一些我觉得比较好用/有趣的Plugin:
- friendly-errors-webpack-plugin, 主要是对抛出的错误做了界面优化, 很多cli都在用.
- speed-measure-webpack-plugin, 测量各个环节的打包耗时, 也可以找出哪一个loader/plugin耗时最久.
- terser-webpack-plugin, 压缩JS
- webpack-bundle-analyzer, 分析打包产物
- webpack-visualizer-plugin, 同样是分析打包产物, 但是更直观
- webpack-parallel-uglify-plugin, 并行压缩, 好像和terser功能重复了.
- webpackbar, 强烈推荐! 在打包时会有进度条(VuePress就用的这个)
- preload-webpack-plugin, 预加载
至于从配置入手的话, 主要是减少查找文件时间和减少build代码体积, 前者可以通过resolve字段中配置extension, loader中配置exclude, 后者的话则主要是Tree-Shaking(注意, CSS也可以做摇树优化), 代码分割(动态加载以及Lodash/Antd这种庞大的模块), Source-Map模式, 压缩代码等等.
React函数式组件, 我觉得以后会是主流?
React Hooks:
- useState
- useEffect, 不传dep与传入[], 分别对标类组件的哪个生命周期.
- useLayoutEffect
- useRef, 还有useImperativeHandle与forwardRef, 摘抄一下之前的笔记, 也可参考[译]React高级话题之Forwarding Refs
  - useRef，使函数式组件也能够享受到获取 DOM 元素或者自定义组件，父组件获取子组件引用而后调用子组件方法，如 focus 等。
  - forwardRef，可以获取父组件的 ref 实例作为子组件的参数（与 props 同级），然后再把这个 ref 绑定到自己内部节点，就可以实现 ref 的透传了！
  - useImperativeHandle，常与 forwardRef 搭配使用，可以控制向父组件暴露的属性以及方法，第一个参数即为 forwardRef 包裹后得到的父组件 ref 实例。
- useMemo与useCallback
  
  其他的没怎么用到过就老实交代不记得了.
Hooks思想, 比如Vue3的新API, 社区React生态也在纷纷拥抱Hooks思想, 比如上面提到的的React-Redux的useSelector和useDispatch, React-Use还有Umi-Hooks等等.
Node的Cluster模块, 主从模式, 底层的Libuv.
CI/CD, 我们工作室的流程还是挺完善的, 包括commitlint -> Husky + Lint-Staged + Code Review*n + ZEIT/now测试环境, 然后才是Gitlab pipeline到OSS.
埋点, 这一块我之前调研过, 可以读读我之前写的这篇关于埋点的一些思考, 主要是以GA为代表的一键式埋点方案, 以MixAlpha/神策数据为代表的可视化埋点等.
测试, Jest/Enzyme/Puppeteer编写单元/集成/E2E测试. 稍微问了下单测覆盖率, 很没底气的说了可能就50%不到hhh.
Flutter, 感觉这种不是比较熟练的技术放到简历上不太好, 比如我用Flutter只能写写简单的Widget和页面这种, 于是就没问得太多.

五面

五面的面试官可能比较忙, 因此整个面试过程大概就二十分钟左右. 也是介绍了一下小程序与脚手架, 面试官应该是高P, 主要关注我在团队中的角色, 我对自己的定义集中在 参与前端技术栈选型&推动新的前端架构&参与对新人培训指导等, 这一块的话也是以自己的经历为主, 如果你是独行侠, 也可以讲一讲自己在社区的贡献等等, 不要直接说你喜欢独来独往一个人全干.

HR面

这一面就是常见的问题啦:

大学成绩
兴趣爱好
有没有女朋友俩人以后的职业规划
个人职业规划
成就感
团队协作经历
从小到大比较顺利还是坎坷(?)
为什么学习前端
手上有别的offer吗
为什么想来阿里, 当然是因为阿里是前端的宝地了

这些问题比较主观, 为了避免误导我就不放自己答案了.

总结&未来前端展望

只能说面试真的是很玄学的东西, 如果每一面都能遇见和你相当match的面试官, 那整个面试流程真的会很轻松愉快. 春招逐渐接近尾声, 也希望大家都能拿到自己满意的offer, 还在面试的同学可以读读我整理的前端基础, 感觉有用的话就点个⭐吧~

对未来前端的展望是二面问到的问题, 我个人的想法主要分这么三点:

多端方案, 随着5G的发展, 物联网设备也在逐渐成熟, 到时候前端程序员要适配的屏幕可能又多了几种? 我觉得未来可能会出现真正的多端解决方案, 即更全面的Rax或者Taro, 真正的一次编写处处运行. 当然理想是好的, 在它还未乘着七彩祥云到来前, 还是专心学好每一端吧~
侵入后端, Serverless无疑是前端仔的下一个风口, 它给予了我们向后端进发的能力, 让我们"自己和自己联调", 也无需操心自己写的服务被流量打爆掉. 后端同学则能够解放出来, 去做一些更有意义的事情.(真的不是抢饭吃)
智能化, 虽然现在到处都是赋能这个概念, 但是我还是觉得, 前端的终极之一就是赋能其他岗位, 让运营mm能够自己搭自己想要的活动页, 让产品爸爸自己选要对哪些控件/事件/指标进行埋点, 让不想从零学前端的后端直接拖拖拽拽配一个界面出来, 还有就是前端同学, 直接设计图生成UI代码(梦还是要有的). 虽然现在业界已经有一些方案, 但都还存在着或多或少的问题. 这也是我最感兴趣的方向之一.

作者：林不渡
链接：https://juejin.cn/post/6844904135754514446
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

10

作者：funjust
链接：https://www.nowcoder.com/discuss/872324?type=0&order=0&pos=24&page=1&channel=-1&source_id=discuss_tag_nctrack
来源：牛客网

一、基本情况

双非

自学前端

阿里暑期实习面试：B2C零售-FC部

二、流程

3.23晚7点半，电话面试

先邮箱发送了一个链接（应该是阿里伯乐系统）

打开后开始面试

基本流程就是：自我介绍 ==> 提问 ==> 做题 ==> 提问 ==> 总结，反问

三、题目

开局：

自我介绍

*为什么学前端
* *学习渠道有哪些
* *为什么选择vue*

**
**

技术：

一、Vue全家桶

v-model实现原理

（不是使用，开始我以为是自定义和input/value，问道vue源码层次，怎么实现事件精确的监听，后来谈到数据劫持）

vuex实现原理

（vue怎么实现对vuex中的数据监听，使用过吗？为什么分异步和同步）

vue数据劫持

（Object.defineProperty）

vue3的优化，区别

（ts支持、体积更小、速度更快、composition APi和optionapi区别、Tree shaking、vite，感觉很多忘了）

二、JS、ES6

promise和async/await区别

（回答简单说了为什么有这两个，如何说了点generator函数）

setTimeout和promise的区别

（讲了宏任务、微任务、event loop等）

三、CSS

flex布局实习三分栏

（我忘了flex，css比较烂，就说浮动布局然后margin写死）

BFC的理解

（块级格式上下文，日期，外边距重叠，不影响其他元素，怎么设置成bfcdeng ）

弹窗如何居中

（直接说用了vh、vw，然后说设置left、top50%，再translate）

四、网络

**https和http区别

** （讲了ssl在tcp和http层之间，端口不同，CA机构等，追问如何加密）

五、Webpack

webpack的loader和plugin，用过哪些插件

（loader和plugin的区别，使用过compression-webpack-plugin）

**六、其他

** 有做过移动端吗，rem

（没有，自己试过，然后讲了rem，问了rem怎么实现）

笔试题三题

分别考了 原型链、 this指向和 柯里化然后做完让说一下自己的思路和理由

**
**

四、总结

个人觉得面试官挺好的，会引导你的思路，就是一直嗯嗯嗯、挺好的，很怕这样子的

然后问的也都是基础，估计和我说没学多久有关，很多问题感觉自己答得不好，柯里化还没写出来，

真脑子一团浆糊，以为会考算法，没重视基础题，应该是凉凉

11

作者：yangchill
链接：https://www.nowcoder.com/discuss/933074?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

阿里过年那会儿就开的提前批，各种宣传很火热，结果将近两个月下来，从穿棉袄面试到穿短袖，也没个结果，现在已经佛了。。。奉上面经，如果现在还在面阿里的小伙伴可以稍微看看，希望有些帮助吧

提前批面了云网络、钉钉，正式批接着云网络，后来转ecs，估计因为hc问题挂了，现在转入大淘宝。

阿里云-云网络

2.17 在牛客投的简历， 2.18 约面视

2.19 云网络一面，35min：

- 介绍自己
- 介绍在学校做的这些项目
- 前端如何协作，代码管理
- 对时间复杂度的理解
- 盒模型的理解
- flex 布局的理解
- http 的请求方式？get 和 post 区别？响应码？
- 301 302 重定向后的过程
- 数组遍历方式？map 和 forEach 区别
- sql 语句的 groupby 的作用
- 对 react 了解得多不多
- 反问：阿里云咋样，工作内容，氛围，用的技术
- 然后聊到怎么学前端的，以及之前的学习经历（还学过java）

春招处女面，开门红，聊得酣畅淋漓，面试官也很友好和善，就像学长一样，还挺开心。后来问的面试结果，面试官说已经指派了，应该就是过了

2.28 收到内推邮件，3.3 才进系统，用的云网络的内推，隔了几天才做测评

3.11 约二面，本来想当场面我，我直接推

3.12 云网络二面，35min：

- 自我介绍，问了下本科课程
- 为什么学前端，偏向于写视觉还是逻辑
- 使用过什么原生 JS 框架或原生项目
- 对 DOM 的理解，为什么要有 DOM
- vue 和 react 的区别，前两者相比原生 JS 框架优势在哪
- 对 jsx 的理解，相比 html 的性能如何
- 对 Promise 的理解，Promise 是惰性的吗
- 盒模型
- cookie 和 session 的区别
- http 的无状态，如何让服务端在后面的请求中辨认 cookie 和用户（没答上来）
- 问了项目状况，学习用还是运营的
- 反问

不温不火，有部分卡壳了，理了理之后答了很多。隔了太久没面了，变得有点慌

3.15 问到二面过了，于是开始漫长的等待 hr 面，期间也在不断问内推人

3.23 约hr面，激动得噢，3.24 又打电话说推迟了，然后一直没音信

3.30 再问内推人，问到说 hr 觉得不合适，不面了（内推人被怼，面试官直呼牛*，我凌乱，我们仨面面相觑），一下午忙着搞转部门的事情，然后转了 ecs 再试试（哈哈。。白等半个月。。

钉钉

2.20 发简历给内推邮箱，2.22 约面

2.24 钉钉一面，35min：

- 自我介绍
- 介绍小程序，以及开发难点，如何协同服务端
- 三栏布局
- tcp 三次握手，第三次握手的作用（有点含糊）
- 对 ajax 的理解，ajax 的不足（含糊）；跨域怎么解决，jsonp 的原理（不会），postMessage
- 是否看过 vue 源码，v-model 的实现原理
- 使用虚拟 dom 目的；相比不用虚拟 dom ，性能一定更好吗；vue 的性能下限和上限（自己结合 vue 的原理说了一下）
- 实习时间问题
- 做题：版本号字符串比较（一开始错了，后来怕时间来不及，直接口述思路了）
- 反问

面试官很温和，个别追问很有深度，反正不是我面经碰到过的，结合之前学的东西思索一番才能答上一些

2.25 通知一面过，2.26 约二面

2.27 钉钉二面

- 自我介绍
- 成绩咋样，拿过什么奖学金
- 参加的实验室项目
- 讲讲最有成就感的项目（先是小程序，再是算法可视化
- 数据库范式，左连接和右连接，举个例子（忘
- 面向对象的特点（太离谱了，多态都忘了
- 平衡二叉树，为什么要这么设计（裂
- 常用的排序算法（冒泡、选择、快排
- web 性能优化（我自己限定了一些范围来答，不然太宽泛了，但是感觉还是答得含糊
- 用户体验的切入点有哪些（一下子脑子空白，还是说得很含糊
- 考不考研
- 有没有其他部门或集团以外的面视

leader 很亲切，问题很奇怪，好多内容我也没特别准备，答得他开始抹脸。感觉还是很考验综合素质的，下次投简历前我先把“了解数据库”什么的给删了。虽说这科班素养被我抛到脑后，是我的问题，但感觉还是 emmmm

3.1 问到说挂了，确实没办法，这两个月面试下来再回顾，感觉这是我面过最离谱的一次，没有之一（现在还是挺感激钉钉早点把我挂了，dddd）

阿里云-ECS弹性计算

继上次被云网络 hr 鸽了之后，3.30当天转入 ecs部门，还是同一流程。4.6 约面

4.8 ecs 一面：

- 自我介绍
- 介绍项目难点（算法平台balabala），一些反问
- 怎么没用 React
- 怎么跟后端协调数据的
- 为什么用 websocket
- 用的什么代码调试模块（codemirror
- 怎么实现的可视化追踪，对 virtual dom 的理解
- 了解 vite 吗
- webpack 打包遇到的困难，怎么解决
- 写题，出题之前让我比较一下阿里的测评代码平台和我项目中的代码调试平台
- 一段代码的 ast 语法树生成，怎么设计节点数据结构
- 简单计算器的解析
- 反问

聊了半小时的项目，然后写半小时的设计题，挺有深度的，面试官也平易近人，感觉在一块讨论问题。然后得知又是从一面开始。。。算了，来一个面一个，全当聊天学习了，面到六月都无所谓。。。

后来面试官问我考研or就业，我说就业，他就打电话过来，跟我聊了聊，觉得太可惜，因为透露说 hr 那边学历卡的死，我大概率会被挂（跟云网络一样），太可惜了，强烈建议我考研后再出来，给了我很多建议。感慨万分

4.11 官网显示阿里云的流程结束了，转入第二志愿大淘宝

最近也听到阿里各种消息，形势愈发严峻。回想起来第一次参加春招，第一面就是阿里，面之前坐立难安的，面完后也是憧憬满满，然后现在是一个躺着的状态。

（之前打趣过，说如果阿里 hr 面真能约上我了，我就去炸鸡店边吃边面（bushi）

4.22 阿里本地生活约面，但是没加联系方式，直到4.24电话打来才说不面了（当时字节和美团都oc了，有点想躺了哈哈，再面阿里还得折磨一个月）

12

作者：aaries
链接：https://www.nowcoder.com/discuss/824409
来源：牛客网

阿里的都是电话面试

一面

自我介绍
学前端多久了？
有做过什么东西吗？
学前端一年的话，除了自学以外，还通过哪些方式学了前端？
你能跟我分享一下你学前端以来，印象比较深刻的一个知识点吗？
\1. Promise…balabalabala
可以讲一下你的学习心得吗？你是怎么用promise的？
那为什么这个知识点会让你印象比较深刻？
Promise是一个很大的知识面，能讲解一下Promise具体使用的一些场景吗？
Promise 是怎么解决串行和并行的？
Promise.all 是怎么解决并行的？
想用 Promise.all 解决 sleep 怎么做？
还有什么你掌握的或者没掌握的点可以拿来跟我探讨一下的吗？
\1. 闭包，this指向
改变 this 指向呢？
我想用闭包，一般会是什么情况下？
\1. …防抖节流
防抖节流是怎么实现的？
如果不用闭包的话怎么实现呢？
用闭包和不用闭包的差别是什么呢？
除了ｊｓ谈谈什么？
\1. ｖｕｅ，我的技术栈是ｖｕｅ，我想谈一下ｎｅｘｔＴｉｃｋ
那你是为什么要去了解这个点？
那你在nextTick学习的时候有什么心得吗？
nextTick可以做什么不可以做什么？
nextTick里面调用updated会是什么情况？
如果我循环更新dom节点并且执行它，会有什么结果？
循环调用的话nextTick里面有容错机制吗？
\1. 有吧…(面试官：你可以去了解一下)
我其实更希望的是你用知识点的场景和了解的底层原理，再聊点什么？
\1. keep-alive
keep-alive适合使用场景
\1. （面试官：不适合：频繁切换的组件；适合：不经常变化但是需要频繁使用的场景；）
keep-alive缓存在哪
keep-alive是有一个相对小的容量，是怎么动态更新的，超了会怎样？
keep-alive怎么更新的？
\1. （面试官：缓存下更新和渲染怎么做的，去了解一下，是一个应用场景：又希望缓存，特定情况下又希望更新；）
平常是怎么来学习前端的？
有没有自己学习的一些沉淀？
这部分的总结有博客网站吗？
有没有遇到自己无法攻克的问题？遇到这种问题你一般是怎么解决的？
\1. 有直接去看源代码去解决吗？看源代码的案例多么？
我看你的奖项里面还有国家励志奖学金，能讲一讲吗？
项目经历还比较的偏薄弱，你有什么别的项目吗？

二面

讲一下项目背景
\1. 所以是toB和toC的两个端对吧
讲一下做这个项目在选框架等的一些考量？
你这个场景为什么用vue？或者说重新做项目你会有什么改进？
有没有考虑vue在生态，性能方面的一些问题或者说自己的想法？
项目遇到的问题？怎么解决的？
主评论下面下面有子评论，要做一个无限下拉怎么办？
懒加载无限的往上拉，一条，想想会出现什么问题？
假说有个用户很无聊，无限制的点下一页…
前端无尽展示的列表怎么设计
\1. 面试官：节点的复用，内容的改变，头为前提。了解一下无尽列表里面怎么做复用
获得座位的实时情况
项目除了功能以外，有没有考虑过其他的因素？
前端性能优化
前端开发的一些状况？
这个过程中哪些可以优化
前端层面的瓶颈你觉得是哪里？

面试官给的学习建议：
前端是宽泛的，理论知识重要，比如语言基础js，前端的域很宽，知识体系的广度，选一到两个想要深入的方向，对于实习生技术要ok，学习能力和热情要有，条例思路计划的学习，知识的主动性和热情，学习结合实践，广度的了解，工作能不能用，交互给用户需要注重什么，低代码，中后台，微前端是新的技术，可以做一些了解。

hr面

自我介绍
介绍一个项目
项目比较薄弱，想来这边学到什么
家在哪什么时候能来
为什么选择了杭州
独生女一个人在这边不会不放心吗

总体来说阿里的面试是比较重基础的，爱出一些场景题，侧重点主要是在实习生解决问题的能力，以及会不会应用一个知识点，面试官都很好。

如果有不会的欢迎留言！！！

13

作者：每天学习一点点
链接：https://www.nowcoder.com/discuss/821804?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

楼主是11月底内推滴~ HR面后半小时拿到了意向书，base杭州西溪园区😀

2021/12/7 一面（40min）

为什么选择前端
为什么主要使用vue2
vue3与vue2区别
讲一讲tree-shaking（提到了）
前端工程化
webpack介绍
说一下使用的loader、plugin
输入url到渲染过程（尽可能详细）
tcp四次挥手何时断开？（渲染过程中还建立连接吗？）
训练营中学到了什么？（有关移动端）
美赛、gpa

反问

提升建议
业务介绍

2021/12/9 二面（50min）

自我介绍
怎么学习前端
浏览器缓存
http与https区别
为什么https构建请求速度慢？
如何加速？
defer async区别=>文档解析？
css加载会阻塞什么
如何将js代码缓存到页面上？（除了浏览器缓存？）
cookie webstorage区别
localstorage可以跨域使用吗
如何设置localstorage自动清理
css相对定位相对于什么定位
如何设置css 高度为宽度的两倍（尽可能多）
行内元素宽高、内外边距有效吗？
如何改变使得垂直方向上有效？
vue相比原生有哪些性能优化
提到了热重载，问原理
webpack打包的结构了解过吗？里面有什么

2021/12/13 三面（25min）

美赛介绍、过程中收获
家住哪里
字节青训营、阿里练习生感受和收获
项目中做了什么
实习会影响学习吗
从什么时候开始学习前端
项目中最值得讲的是什么
你所了解的阿里前端技术有哪些

2021/12/14 HR 面（25min）

自我介绍
了解的阿里前端技术有哪些
字节青训营和阿里练习生的区别
给阿里练习生的建议
实习时间
待遇介绍
朝扬计划介绍

作者：不做offer收割机
链接：https://www.nowcoder.com/discuss/739066?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

14 前言

看阿里的面经蛮少的，自己也来贡献一篇，虽然可能参考性不大。
部门暂不透露，和面试官沟通了自己要写面经。

投递（8月21日）

当天约面，因为在办离职所以延后了一周。

一面（8月29日）电话面1h

15分钟八股+15分钟反问聊天+30分钟笔试。

0、自我介绍
1、讲讲大创项目
2、腾讯有自己的组件库么，为什么选饿了么UI
3、讲讲大学期间参加的比赛
4、元素居中的方式
5、XSS和CSRF（react天然对xss有防范）
6、MVC、MVP、MVVM
7、数据上报是怎么做的
8、前端的一次请求会经过哪些缓存

笔试题

不定项选择题

1、下述关于Node.js中async/await 的描述正确的是：
a. await 仅能在 async 函数内部使用，否则会抛出语法错误
b. 普通函数可以通过 .bind() 绑定作用域，但是 async 函数无法二次绑定作用域
c. await 关键字可以用在 async 函数上，如果对普通函数使用 await 会抛出异常
d. 调用 async 函数时本质上返回的是一个 promise，可以进行 .then() .catch() 操作
e. 在 async 函数中，如果直接返回一个async或promise函数，这个async或promise内的返回值可以被调用函数获取到
f. 在 async 函数中，可以在 while, for, for/in, for/of 等控制语句中循环执行 await

2、下述关于web安全的描述正确的是：
a. param是url上的一个参数，document.getElementById(‘id’).innerHTML(param)会引起xss漏洞
b. param是url上的一个参数，jsx里设置会引起xss漏洞
c. 正确使用GET,POST和Cookie可以有效预防csrf攻击
d. csp策略可以有效防止数据泄***r>e. csp report指浏览器可以上报非法外链
f. 直接使用用户自定义的链接放到论坛不会有安全问题

编程题

1、写个转换函数，把一个JSON对象的key从下划线形式（Pascal）转换到小驼峰形式（Camel）

复制代码

/**`` ``* 说明：`` ``*  `` ``* 示例：`` ``*  converter({"a_bc_def": 1}); // 返回 {"aBcDef": 1}`` ``*/` `function converter(obj) {`` ``/* 功能实现 */``}

2、最长回文子串

二面（9月1日）视频面50min

25分钟经历+项目，15分钟技术问题，10分钟反问

0、自我介绍
1、你们团队多少人，前端有多少人，组里多少人
2、组内目前在做什么
3、为什么不留腾讯
4、目前面了哪几家
5、面微信的时候总结了什么
6、未来的一个规划
7、未来工作的地点有考虑么
8、可以提前实习么
9、做的这些项目印象最深的是哪个，有什么体验
10、做的最难的项目是哪个
11、ssr项目可以做什么优化
12、视频上传有哪些技术难点
13、前端分片的api叫什么
14、视频封面怎么做的
15、如何判断一个视频封面是黑屏的
16、304状态码
17、etag和last-modified的区别
18、如何去掉一个字符串的重复字符（考察字符串的api）
19、如何遍历字符串（s[i]有兼容性问题）
20、charAt()知道么
21、如果淘宝网内存泄漏导致页面登不上去或浏览器挂掉了，那么要怎么快速定位到内存泄漏的位置呢
22、vue2.0与vue3.0在数据双向绑定的区别
23、proxy的优缺点
24、平时有写技术博客么
25、平时看书么
26、实习期间接到一些比较拧螺丝的活的话是什么感受

三面（9月7日）视频面25min

这面出乎意料地就到了hr面。
1、自我介绍
2、已经离职了吗，目前在家吗
3、拿到转正意向了吗
4、为什么放弃考核
5、为什么不考虑深圳和北京
6、家是哪里人，父母工作
7、有没有创业的打算
8、创业项目有考虑过吗，具体会想做什么
9、为什么选择前端
10、有没有在看其他公司的机会，拿了多少offer
11、会提前来实习吗
12、有没有被否定过，是怎么想的
13、讲讲大学期间压力比较大的一段时间
14、怎么和同事沟通的，是怎么问问题的
15、有没有同学或师兄师姐在阿里的
16、未来几年的打算
17、讲一讲对35岁的理解
18、想做技术还是业务

总结

整个流程蛮快的，特别是一面面试官加了我微信全程对接面试结果。
其他公司就不面了，俺的秋招结束了，嘻嘻。

意向书（9月19日）

9月8日晚一面面试官告知我已经通过了。（有个跟进的人真的很方便，这就是内推的好处了）
9月13日催了一下意向书，说还在排序。
9月15日被告知排序第一名。
9月19日收到意向书。

15

作者：小白爱吃鱼
链接：https://www.nowcoder.com/discuss/717910?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

自我介绍

先从最简单的输入url发生了什么

setTimeout和setInterval差别,以及哪个定时更准

还问了下浏览器的线程

缓存问题

讲了下关于网络安全

重绘,重排,页面优化

for循环中可以用const定义变量吗,

for in /for of

es6知道多少

场景题:

有三个函数A,B,C,怎么顺序调用,说了promise的链式调用,然后说那100个函数怎么办…

答的时候顺道提了下promsie.race,promise.all,被问那这两个是并行还是串行,em,不符合要求,所以不适用

第二个情况:假设现在有个美国用户访问页面出现故障,你看不见的情况下,怎么在前端体现…

问了下关于react,在数据传递的时候,需要做什么处理吗

问了react你觉得有什么优势

总体感觉:整体很好,面试官咳嗽,还会说不好意思,有点咳嗽,另外直说:基础可以,但是实践太少,很多场景的问题不知道怎么解决,

推荐了书,以及建议我去做一个具体的项目流程,这样很多东西能够更加清除,让我好好准备,说过一两个月还能投 😂

最后结果当然是挂了,可能部门比较看重项目实践吧 🤣

那就继续努力吧~

16

作者：玺子哥的小仙鹤
链接：https://www.nowcoder.com/discuss/707206?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

继上次被阿里云刷，这次被数字供应链事业部捞

8.13 48min

自我介绍

有无实习经验，如何接触到前端

如何学习前端

因为上传了项目图片，以下问题项目相关

-----------------------------------------------------------------------------

登录界面中，用户名和密码的html元素有什么不同？

显示密码的属性

用户名和密码框如何居中对齐

登录和重置框如何右对齐，如果想设置左对齐应该怎么做

头部菜单置顶，左边目录树占屏幕的100%不可以滚动，内容区域可以滚动，这个布局如何实现

面包屑的dom实现

------------------------------------------------------------------------------

flex布局有哪些属性？3个flex元素如何均分地占据父级空间

es5和es6的继承方式大概是怎么做的？

vue的生命周期

vue中activity和keep-alive是什么东西？有什么用

computed watch method有什么区别

vue的路由模式有哪些？在浏览器的实现上有哪些优点

前端如何设置路由使不能匹配的url跳转到404页面

路由的冲突检查和避免冲突

遍历数组最常用的方法有

识别某个数组值小于0的元素会使用哪种遍历

如果数组类有一个值小于0就return false，全部值大于0就return true，用哪种方法遍历

既然es5已经有foreach，为什么es6还会出map for of

js里如何发送数据异步请求？学过使用fetch发送数据请求吗

http请求中浏览器的缓存机制

-----------------------------------------------------------------------------

面试结束下午还有一个测评，用的是阿里的伯乐系统，一共4道题，1个小时

1.js 嵌套数组的最大深度

\2. 布局相关

3.js url解析为对象

4.vue实现一个输入框，点击编辑有框线，仅可输入数字，且编辑按钮消失，保存按钮出现；

点击保存，框线消失，保存按钮消失，编辑按钮出现

最后，面试官人很好，给了很多建议，因为阿里这个部门在杭州，本人想base成都，所以下午的题没好好做，应该也是校招最后一次面阿里了，谢谢把我捞起来的面试官，今天还是菜菜的我

二面 8.20 1h

没有写题，问了怎么学习前端的，项目相关，一个场景题，强缓存和协商缓存等。聊挺崩的，没有实习并且还说了自己读了非全日制研究生，最后面试官说，虽然全日制和非全是一样的，但是呢非全相对有更多的时间不积累实践经验，那跟同期毕业的全日制相比有什么优势呢。听完有点伤心，也有点自卑，不去实习有很多原因不是不想，是现实情况不允许，当然也很感谢面试官开诚布公。昨天丧了一整天，不能玻璃心呀，加油加油

17

作者：法式土鸡
链接：https://www.nowcoder.com/discuss/716797?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

本人一志愿投的本地生活，简历挂

二志愿随便填了个阿里云，居然被捞了 😅

------------------------------------------------------------------------

开始面试（电话面）

1.说说你关于前端的经历（项目）

2.如果让你设计分页组件，如何在用户点击时触发一些事件，可以让用户知道自己在第几页（没整明白，我说改变页码的颜色，或者简单点，elementui弹个消息告诉你在第几页，反正不是他想要的效果，我就说我不太懂）

3.爬虫的时候，你是一页一页爬的吧？那么如果在某一页你断网了，怎么在网络恢复后，在上次断点处继续

（ 😅我用的是puppeteer，我说外面用一个变量存一下url，如果这个变量存在，下次运行时直接从这里开始爬。他说奔溃了会不会这个变量也被销毁了?ps:我感觉不会，因为我用的是setInterval，网络挂了又不影响我继续循环。。。。然后后来我说我自动爬取是用的worker线程，如果说爬取的时候超时了，可以往主线程传一个消息，等到下次主线程创建worker的时候，把消息再发回去，就能保存了😅😅😅😅其实是连蒙带猜，面试官说嗯，应该可以。）

4.给了道算法，输出数组中重复最多的元素，秒了

反问：

技术栈？ react angular 别的啥都有

地点？杭州

如果有二面，啥时候？等通知

由于没问什么别的问题，就没问面试表现了。。

18

作者：小奇同学
链接：https://www.nowcoder.com/discuss/673072?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

面试官小哥哥人超级nice，聊得挺好~就是电话面声音实在有些模糊
\1. 自我介绍
\2. 为什么选择前端
\3. 介绍一个项目，然后问问你相关的知识（我说了一个JQuery的，就问了选择器和链式操作的原理）
\4. JS相关：js基本数据类型，Promise用过吗介绍一下，闭包（是什么，用途，缺点，解决办法），作用域，this指向以及call、apply的用法，用extends如何实现继承
\5. CSS相关：两种盒模型，以border-box为例属性冲突问题（比如父元素宽度100px，子元素左margin60px右margin50px会呈现什么样的效果），伪类和伪元素的区别（我说不太清楚就问了我用过的），行内元素和块级元素区别，position
\6. 然后问我会框架吗，我说了解一点vue，但没做过项目，就没多问了
\7. 计算机相关：进程和线程，栈和队列

\8. 最后来聊聊你是从什么渠道获取前端知识的吧~

反问：

1.部门具体的名字（因为受到面试邀请的时候就没太听清 😂）是天猫国际和考拉海淘合并来的

2.技术栈（有好多方向）

最后再感谢一下面试官小哥哥，面了三场下来感受最好的一场，我回答的时候会给肯定的反应，难易交叉不会故意刁难，那个属性冲突的问题虽然最后还是没答上来，他说你可以回去了解一下挺有意思的，反问环节回答也很详细（虽然声音糊了点又没太听清 😂），真的人超好超级暖~！

发面经攒人品，希望能过 🤣 🤣要更努力啦~

19

作者：牛客275221269号
链接：https://www.nowcoder.com/discuss/932629?type=post&order=create&pos=&page=0&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

只过去了几天就有些遗忘了，写一下大概，想到了再继续补充。阿里对于前端八股考得比较少，主要是围绕简历项目来问。

一面 2022.04.10

自我介绍
项目工程化（自我介绍提到）
对概念的理解，自己是怎么做的
cookie / localStorage / sessionStorage
提了概念，就让你具体展开说一说
内存泄漏
Vue的路由
有哪些模式，有什么区别
微前端（简历提到）
用的方案，为什么选择qiankun，为什么不用iframe
性能优化
有哪些方法，具体怎么做。这里面试官在最后告诉我，我回答得太碎，更好的回答应该是说出自己做过的实践，以及优化后的结果（有实例支撑和数据说明）
webpack
用过哪些打包工具，webpack打包过程
node
问了解吗，我说不熟，然后面试官说这个需要去学习一下
反问环节

二面 2022.04.13

自我介绍
项目介绍
接下来就是围绕项目提问
前后端分离
为什么要分离，必须分离吗
JWT
介绍一下，为什么要用这个
安全问题
由Token展开的安全问题
有哪些安全问题？
怎么防范CRSF，不用Token可以吗
RESTful API
介绍概念，现在对一个资源的操作有获取、分析、中断分析等，会怎么设计
项目中遇到最困难的事，是怎么解决的
微前端
为什么要用微前端，为什么不用iframe，调研过哪些
反问环节

笔试 2022.04.11

笔试是后来补的，阿里的前端笔试不像力扣，也不只是算法题，只需要写个大概思路，当天可能面试官比较忙，只出了一题

复制代码

//完成 convert(list) 函数，实现将 list 转为 tree
/**
 * @param list {object[]}, 
 * @param parentKey {string}
 * @param currentKey {string}
 * @param rootValue {any}
 * @return object
 */
function convert(list, parentKey, currentKey, rootValue) {
}

const list = [
  {
    "id": 19,
    "parentId": 0,
  },
  {
    "id": 18,
    "parentId": 16,
  },
  {
    "id": 17,
    "parentId": 16,
  },
  {
    "id": 16,
    "parentId": 0,
  }
];

const result = convert(list, 'parentId', 'id', 0);
const tree = {
  "id": 0,
  "children": [
    {
      "id": 19,
      "parentId": 0
    },
    {
      "id": 16,
      "parentId": 0,
      "children": [
        {
          "id": 18,
          "parentId": 16
        },
        {
          "id": 17,
          "parentId": 16
        }
      ]
    }
  ]
}

20

作者：德布罗煜
链接：https://www.nowcoder.com/discuss/860063?type=post&order=create&pos=&page=2&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

好久没管这个帖子了顺便更新一手吧，3月29日上午8:37接到来自阿里巴巴的邮件通知已被录用，发放意向书
3月15日18:40更新：兄弟们，我二面也过了
3月14日19:30更新：兄弟们，我一面过了，二面好像是部门主管

昨天晚上面的，面试官 19:00 打了个电话过来，说往我邮箱里发了个链接，让我先做一个小时的笔试题。

笔试阿里伯乐系统 60min

笔试是在阿里的伯乐系统上做的，三道手撕代码。

第一题、根据表达式计算字母数量

描述：输入一串字符串，根据字符串求出每个字母的数量并返回结果对象。（数字为1时可省略）
示例一：输入：A3B2，输出：{“A”: 3, “B”: 2}
示例二：输入：A(A(A2B)2)3C2，输出：{“A”: 16, “B”: 6, “C”: 2}

这题我放在最后写了，结果因为被第三题最后一个输出卡了很久只剩下五分钟写这题代码，来不及写了。

第二题、手写节流

描述：参数一：执行的函数，参数二：时间间隔。要求实现即使函数被连续处罚多次也只在连续时间内执行一次。
我一看题面描述立马反应过来用节流，刷刷刷写出来了。

复制代码

function` `throttle(func, time) {``  ``let timeout;``  ``return` `function` `() {``    ``if` `(!timeout) {``      ``func.apply(``this``, arguments);``      ``timeout = setTimeout(() => {``        ``timeout = ``null``;``      ``}, time);``    ``}``  ``};``}

第三题、对象扁平化

输入：

复制代码

{``  ``a: ``'a'``,``  ``b: [``1``, { c: ``true` `}, [``3``]],``  ``d: { e: undefined, f: ``3` `},``  ``g: ``null``,``}

输入用例记不太清了，应该大致差不多吧

输出：

复制代码

{``  ``a: ``"a"``,``  ``b[``0``]: ``1``,``  ``b[``1``].c: ``true``,``  ``b[``2``][``0``]: ``3``,``  ``d.f: ``3``  ``// null和undefined直接舍去``}

因为没写过这种代码所以一开始也挺没有头绪的，花了很多时间在这题上面。（代码实现很烂，希望各位大佬不要喷我qwq）

复制代码

function` `flatten(obj) {``  ``const res = {};``  ``const _flatten = ``function` `(o, prev = ``null``) {``    ``if` `(Array.isArray(o)) {``      ``for` `(const index ``in` `o) {``        ``const ele = o[index];``        ``if` `(ele ``instanceof` `Object) {``          ``_flatten(ele, `${prev ? prev : ``''``}[${index}]`);``        ``} ``else` `{``          ``if` `(ele) {``            ``res[`${prev ? prev : ``''``}[${index}]`] = ele;``          ``}``        ``}``      ``}``      ``return``;``    ``}``    ``for` `(const key ``in` `o) {``      ``if` `(``typeof` `o[key] === ``'object'``) {``        ``if` `(o[key] !== ``null``) {``          ``_flatten(o[key], `${prev ? prev + ``'.'` `: ``''``}${key}`);``        ``}``      ``} ``else` `{``        ``if` `(o[key] !== undefined) {``          ``res[`${prev ? prev + ``'.'` `: ``''``}${key}`] = o[key];``        ``}``      ``}``    ``}``  ``};``  ``_flatten(obj);``  ``return` `res;``}

吐槽一下

阿里的伯乐系统在我写代码的时候出问题了，因为面试官说我可以在浏览器的控制台测试代码所以我是全程开着控制台的。结果我写到一半发现控制台一直在报错：
WebSocket is already in CLOSING or CLOSED state.
我当时一看人都麻了……不会是这系统觉得我一直在控制台里测试觉得我离线自动断开ws了吧……
一个小时后笔试结束，面试官问我第三题是不是没写完，我就告诉他好像ws断开连接了，他可能看不到我后面的代码了。
最后面试官就让我口述了一下第三题的思路，又问了问我有没有解第一题的思路。我就把两道题的思路说了一下，因为第三题是我已经做出来了的，所以我就解释得比较详细，第一题因为还没怎么做就只讲了基本思路，并且回答了应该使用什么数据结构来处理这道题。

面试全程电话面 30min

解释一下笔试题
自我介绍
有没有看过React的源码？
我回答说没有看过，但是了解过虚拟DOM和DIFF算法，面试官让我解释一下这两者。
根据我的回答，面试官又问了一句为什么在JSX里循环生成DOM需要添加key
我就从DIFF算法的原理特性解释了这个问题
class组件和使用hooks的组件有什么区别
有没有用过iframe？没有用过
有做过h5的手机端的页面吗
在手机端一般用什么单位？我就说比较喜欢用rem、em、rpx这些，面试官接着又让我解释一下rem
现在写代码Promise用的比较多哈，你能解释一下Promise是什么样的一个概念吗？
我解释了一下Promise的主要用途和用法，也同时讲了一下async/await的概念，以及它们和Promise之间的关系。
在以往的项目里有遇到什么困难的点吗？
这个问题给我噎住了，一下子想不起来有什么很牛逼的难点，比较基本的不敢答，最后挑了一个现在在做的electron项目的一个小问题的解决办法。并且讲了一下由于项目重构后使用了更新版的electron导致原项目的解决方案不再适用，当时也找不到问题所在，于是通过overstackflow了解到electron这次更新是把我的这部分功能限制了的，而它的中文文档又没有更新，因此得查阅英文文档才能看到更新的细节……后面又想到了目前的解决方式解决了这个问题。

然后问了一下我现在是大几，最后面试官说如果有后续面试会打电话通知我的。
（话说现在还没消息我不会一面就寄了吧）—
title: 刷面筋 - 11 阿里面经
categories: 分类
tags:

标签
date: 时间
description: 描述
toc: true

刷面筋 - 11 阿里面经

1

作者：确认过眼神，就你不是人
链接：https://www.nowcoder.com/discuss/72763?type=post&order=create&pos=&page=1&channel=-1&source_id=search_post_nctrack&subType=2
来源：牛客网

阿里巴巴：阿里云-广州（Web前端/Node.js）

一面（2.28）：

很和蔼的面试官，跟他探讨了很多技术问题，收益良多呀，大概30分钟左右

简单介绍一下自己
在学习和项目中遇到的难点以及如何解决
简单介绍一下Backbone（项目里用到过）
React是首次渲染的过程（自己写过一个类React库Kut）
如何优化React的Diff算法的（因为Kut有对这个优化）
Redux和Vuex的区别（因为我用过Vue，也用过Redux和Vuex做状态管理）
了解Weex吗（不了解2333）
TypeScript和ES6的区别
知道XSS吗，介绍一下，如何避免（转义）
实现跨域的方式（jsonp和cors等）
如何理解html语义化
浏览器如何处理未知的tag（引申到Angular利用未知的tag，我没用过，面试官给我科普）
H5有什么新的tag，最重要的tag是什么（面试官想我说canvas）
有什么要问（阿里云技术栈，主要是React/Vue）

二面（3.6）：

感觉面试官有点摸不透，不过还是很好说话，感觉是部门Boss吧，大概20分钟

简单介绍一下自己
为什么想做前端（我是读土木的…）
在项目中遇到的难点以及如何解决
平时喜欢怎么学习（看源码）
你做这些项目都是出于兴趣吗（是呀）
想在哪实习，为什么（广州，女朋友在这工作，面试官直接来一句，你可以把你女朋友介绍来阿里呀）
有什么要问（后面还有几轮面试，面试官说还有就对了）

三面（3.16）：

交叉视频面，蚂蚁苏千大佬面的，有点小激动，大概40分钟

简单介绍一下自己
Node.js的优势，用过Node.js哪些模块
TypeScript和C#的区别
预约系统如何解决并发的问题（项目相关问题，应该是加锁，一下懵逼没答上）
Kut怎么优化React的Diff，有去提pr吗（没有），为什么（因为实现不同）
简单说一下TCP和UDP
Socks5是如何实现的，读过协议吗（曾经做过一个项目）
酸酸是怎么实现穿墙的
熟悉HTTP状态码吗，307是什么，401和403的区别（307没打上来，只记得是和哪个相似，后面查发现是302）
如何实现文件上传的功能（我讲到后面讲成了post的过程，应该是想我说multipart）
有什么要问的（面试暴露了我什么不足，苏大佬说对前后端都有兴趣挺好，不过某段时间应该专注一个方向）

本来内推的大佬看后面还有一个P9的后端（朴灵的Boss）要面我，不过后面状态又变成了hr面，不过到现在等了快1个月了都没等来hr面

2

注：以下文章内容涉及项目细节的已打码或者未记录。

一面 (2h)

1.1 手写深拷贝（30min手撕代码）

题目是一段代码，乍一看是深拷贝，再咋一看其实是复杂一点的深拷贝，拷贝元素囊括对象、数组、日期、正则、DOM 树。

// 编写一个深度克隆函数，满足以下需求（此题考察面较广，注意细节）
function deepClone(obj) {}

// deepClone 函数测试效果
const objA = {
  name: 'jack',
  birthday: new Date(),
  pattern: /jack/g,
  body: document.body,
  others: [123,'coding', new Date(), /abc/gim,]
};

const objB = deepClone(objA);
console.log(objA === objB); // 打印 false
console.log(objA, objB); // 对象内容一样
复制代码

优化后的代码：

// 深拷贝：对对象内部进行深拷贝，支持 Array、Date、RegExp、DOM
const deepCopy = (sourceObj) => {
  // 如果不是对象则退出（可停止递归）
  if(typeof sourceObj !== 'object') return;
  
  // 深拷贝初始值：对象/数组
  let newObj = (sourceObj instanceof Array) ? [] : {};

  // 使用 for-in 循环对象属性（包括原型链上的属性）
  for (let key in sourceObj) { 
    // 只访问对象自身属性
    if (sourceObj.hasOwnProperty(key)) {
      // 当前属性还未存在于新对象中时
      if(!(key in newObj)){
        if (sourceObj[key] instanceof Date) {
          // 判断日期类型
          newObj[key] = new Date(sourceObj[key].getTime());
        } else if (sourceObj[key] instanceof RegExp) {
          // 判断正则类型
          newObj[key] = new RegExp(sourceObj[key]);
        } else if ((typeof sourceObj[key] === 'object') && sourceObj[key].nodeType === 1 ) {
          // 判断 DOM 元素节点
          let domEle = document.getElementsByTagName(sourceObj[key].nodeName)[0];
          newObj[key] = domEle.cloneNode(true);
        } else {
          // 当元素属于对象（排除 Date、RegExp、DOM）类型时递归拷贝
          newObj[key] = (typeof sourceObj[key] === 'object') ? deepCopy(sourceObj[key]) : sourceObj[key];
        }
      }
    }
  }
  
  
  return newObj;
}

// deepCopy 函数测试效果
const objA = {
  name: 'jack',
  birthday: new Date(),
  pattern: /jack/g,
  body: document.body,
  others: [123,'coding', new Date(), /abc/gim,]
};

const objB = deepCopy(objA);
console.log(objA === objB); // false
console.log(objA.others === objB.others); // false
console.log(objA, objB); // 对象内容一样
复制代码

1.2 自我介绍

面试官你好，我叫XXX，XXXX年毕业于XXXX大学XXXXXXXX专业，（在校实习经历），（目前就职于），（当前岗位职责）。

XXXXXXXXXX…（围绕当前就职公司项目展开，可以初步介绍简历上的项目经验）

XXXXXXXXXX…（围绕自己在当前就职公司做的贡献，体现你的个人价值）

XXXXXXXXXX…（介绍一下在当前就职公司的绩效情况）

XXXXXXXXXX…（简单介绍一下跳槽的原因）

1.3 简历问答

1.3.1 工作经历

基于自我介绍提及，扩展回答。

1.3.2 绩效情况

基于自我介绍提及，扩展回答。

1.3.3 为何在 Vue 和 Angular 和 React 中选了 Vue？

刚入职的时候XXXX有用 Vue 的有用 Angular 的，以前坐我隔壁的XXXX就是用 Angular。

Vue 好上手，对新手友好，人员变动情况下能够更快地承接项目。
Vue 技术栈在市场占有率比较高，在招聘上能够选择的人员更多。
Vue 技术社区更新迭代快，社区活跃度高，遇到问题方便查。

1.3.4 JavaScript 和 TypeScript 有什么区别？在技术选型的时候什么因素使你考虑用？

TypeScript 是 JavaScript 的一个超集，它本质上其实是在 JavaScript 上添加了可选的静态类型和基于类的面向对象编程。

TypeScript 的特点：

解决大型项目的代码复杂性
可以在编译期间发现并纠正错误
支持强类型、接口、模块、范型

1.3.5 关于桌面端 UI 框架选型的思考：为何在 Element 和 iView 中选了 Element？

说回正题，最后敲定 Element 而不选用 iView 的原因：

从 GitHub 上看，Element 50.7k Star，iView 23.9k Star。Element 的用户群更大。
Element 是饿了么开发开源 UI 组件框架，背后靠着阿里；iView 已经进行商业化了，有一些付费定制化的组件出现。如若是没有采购预算的情况下，Element 的全开源性质和文档清爽度会更有优势一些。
iView 的向下兼容性会差一点。

1.3.6 关于移动端 UI 框架选型的思考：为何在 Vant 和 Cube 中选了 Vant？

选用 Vant 而不选用 cube-ui 的原因：

从 GitHub 上看，Vant 18k Star，cube-ui 8.8k Star。Vant 的用户群更大。
Vant 属于有赞自己开发的开源 UI 框架，cube-ui 属于滴滴自己开发的开源 UI 框架，cube-ui 官网经常打不开，更新活跃度在逐渐下降。Vant 的社区更加活跃一些。
Vant 样式设计风格更加通用，cube 设计风格统一黄灰色比较明显的滴滴风。

1.3.7 互联网公司和金融科技公司在开发流程上的区别

互联网公司：产品经理+交互设计+UI设计 -> 前端开发+后端开发 ->测试
金融科技公司：业务 -> 开发 -> 测试

1.4 工作方式：当需求方在开发周期内临时改动需求时怎么办？

首先是对改动点的评估，前端人员初步进行评估，假设是“改动按钮颜色”之类的小改动，可以直接更改但是要做好需求登记。
其次当改动点较大时，举个例子假如是“新增加一个金融推广活动页面”，前端后端测试共同评估是否对开发周期造成影响，若是超过开发周期太大的时间可以跟需求方提出将改动放到下个迭代；若是需求改动要求比较急，在请示上级领导评估之后，可以加急改动。

1.5 vue2 双向绑定原理

双向绑定是什么？

Vue 双向绑定和 React 单向绑定

其中 Vue 和 React 的区别之一就是：Vue 是双向绑定；React 是单向绑定，因为 React 视图的改变需要手动执行 this.$setState() 来改变数据。

1.6 Vue2 数据劫持的原理

1.7 Vue2 数据劫持的缺陷

第一个缺陷是由于 Vue2 数据劫持底层是用 ES5 的 Object.defineProperty 实现的，所以不兼容 IE8 以下。

1.8 Vue3 数据劫持的优势

Vue3 数据劫持底层主要是使用 ES6 的 Proxy 实现。

Proxy 的优势如下:

Proxy 可以直接监听对象（const proxy = new Proxy(target, handler)）；defineProperty 需要遍历对象属性进行监听。
Proxy 可以直接监听对象新增的属性；defineProperty 只能劫持一开始就存在的属性，新增属性需要手动 Observer。
Proxy 可以直接监听数组的变化；defineProperty 无法监听数组的变化。
Proxy 有多达 13 种拦截方法：不限于 get、set、has、deleteProperty、apply、ownKeys、construct 等等；除开 get 和 set 其他都是 defineProperty 不具备的。
Proxy 返回的是一个新对象，我们可以只操作新的对象达到目的；defineProperty 只能遍历对象属性直接修改；

Proxy 的劣势如下:

ES6 的 Proxy 的存在浏览器兼容性问题。

Proxy 和 Reflect 结合实现 Vue3 底层数据劫持原理。Reflect 设计的目的是为了优化 Object 的一些操作方法以及合理的返回 Object 操作返回的结果，对于一些命令式的 Object 行为，Reflect 对象可以将其变为函数式的行为。比如 （'name' in obj） = Reflect.has(obj, 'name')

1.9 Vue3 有什么新特性

1.10 面试官建议

简历上项目的深度分析，回答的时候要有逻辑条理和准备。
工作上的沉淀和积累可以在掘金平台以文章的形式输出。

二面 (45min)

2.1 假设团队内从 Vue 转为 React，你认为要做什么准备？

从团队角度上考虑：主要是做好技术培训、技术分享、建立可参考性的模版工程。
从个人角度上考虑：从技术细节、底层原理上对 vue 和 react 进行对比。然后在现有的工程上面结合技术和业务进行学习，快速成长。

2.2 微前端解决方案 qiankun？JS沙箱的原理？样式隔离的原理？

qiankun 是基于 single-spa 封装的，提供了更加开箱即用的 API，使得微应用的接入像使用 iframe 一样简单，实现把应用改造的工作量降到最低。并且主应用和微应用都是技术栈无关的，解决了开发中的两个问题：第一是空间上不同团队的协同开发不必统一技术栈，第二是时间上不同版本技术栈的升级维护无需统一。因此技术栈无关是微前端的核心价值。
JS 沙箱：

快照沙箱(snapshotSandbox)：在应用沙箱挂载和卸载的时候记录快照，在应用切换的时候依据快照恢复环境。qiankun 的快照沙箱是基于 diff 来实现的，主要用于不支持 window.Proxy 的低版本浏览器，而且也只适合单个实例的子应用，且会污染全局 window。
代理沙箱(proxySandbox)

：qiankun 基于 es6 的
```
Proxy
```
实现了两种应用场景不同的沙箱，一种是
```
legacySandbox
```
(单例)，一种是
```
proxySandbox
```
(多例)。因为都是基于 Proxy 实现的，所以都称为代理沙箱。
- 单例沙箱(legacySandbox)：同样会对 window 造成污染，但是性能比快照沙箱好，不用遍历 window 对象。
- 多例沙箱(proxySandbox)：不会污染全局 window 并支持多个子应用同时加载。

样式隔离：微前端框架里面可能会遇到的样式冲突有两种，一种是主子应用样式冲突，另一种是子应用之间的应用冲突。

动态样式表(Dynamic Stylesheet)：qiankun 自动实现子应用切换时子应用样式动态切换，能够保证你在单应用模式下（就是同时只能有一个应用活跃的情况下）保证子应用和子应用之间的样式不会冲突。
工程化手段(css module)：可以通过手动的方式确保主应用与微应用之间的样式隔离，比如给主应用的所有样式添加一个前缀（或者使用库）；也可以通过配置 { sandbox : { experimentalStyleIsolation: true } } 的方式开启运行时的 scoped css 功能，从而解决应用间的样式隔离问题。
严格样式隔离(Shadow DOM)：默认情况下沙箱可以确保单实例场景子应用之间的样式隔离，但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。当配置为 { strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。（但是使用时还是要适配和考虑特殊情况）

2.3 长列表渲染底层原理？业内有哪些解决方案？

百万PV商城实践系列 - 前端长列表渲染优化实战

三面 (20min)

自我介绍，技术选型，项目细节。全长 20 分钟，跟一面二面问题有些重复，团队大领导面试。主要是工作方式和技术思考方面的考察。

四面 HR 面 (30min)

4.1 你觉得前端在整个产品里面扮演什么样的角色？

在技术流程上，前端担任一个桥梁的作用。在拥有比较清晰岗位职责的互联网公司，通常都是产品经理、交互设计师、UI 设计师 给出需求文档、原型图、设计图给前端工程师，前端工程师再跟后端工程师进行开发联调。在实际工作中，前端工程师作为抽象产品和技术实现之间的桥梁，可以担任更多的职责，为产品实现把好最后一道关，从技术实现和真正成品的角度反馈意见给产品经理。而我目前工作中前面只有业务人员，所以角色任务更加重一些，需要帮助业务人员去落地产品的概念，出UI图原型图，核实业务人员真正的需求。
从产品角度上，随着时代的发展，越来越多的产品看重前端，因为产品的客户体验具有强大的竞争力。市场上优秀的互联网产品很多，当我们的产品是对公且涉及金钱交易的尤其需要前端工程师，因为客户体验是第一位的，技术承载了业务，前端承载了客户体验，具有举足轻重的地位。

4.2 一个好的前端工程师具备什么样的品质？

由我上面的回答可以略知：

好的前端工程师需要拥有较强的沟通能力。除开技术能力强之外，前端工程师仍然需要很强的沟通能力。因为他担任着产品需求和技术实现之前的桥梁，有些时候甚至需要担任产品和后端之间的沟通桥梁。前端工程师经常会遇到 产品经理、交互设计师、UI 设计师 更改需求的时候，这个时候就会需要前端工程师具有较强的沟通能力，互相沟通协调将产品真正地落地。（可以补充自己工作中的经历：比如XXX的业务沟通）
好的前端工程师需要以客户体验为优先。比如当产品工程师提的需求不符合以客户体验优先的前提，前端工程师过需求的时候发现了，其实可以去跟产品沟通一个更好的实现方案。明确我们整个开发条线的目标是落地一个好产品，并不是说产品说什么就是什么，前端需要及时给产品一个反馈。（可以补充自己工作中的经历：比如XXX的业务沟通）

4.3 女性工程师数量比较少，作为女性，在这一方面有什么感悟吗？

4.4 假设能进入阿里，你想在这里收获什么？有什么方向规划吗？

管理方向：作为主管带一个前端小组、项目小组或前端团队，兼职部分管理职能如招聘、打绩效等。
研发方向：作为技术骨干做偏技术方向的探索和实践，做各种工具链建设提效降本，如搭建平台研发。
业务方向：做业务型的项目为主，与业务团队一起完成公司目标，交付 toB/toC/toG 的各种项目。

4.5 你目前薪资总包是多少？

总结

社招面试整体感觉跟两年前校招面试相比，校招容易问八股文或者算法基础，社招在技术基础之上更重视项目经验和技术思考。

关于非技术能力的理解和锻炼可以看看这篇：和导师去摸鱼的时候我们都聊了什么

3

社招一年前端

三面过，等hr

感觉是因为紧急缺人，所以技术面试比较简单

一面

前端小哥哥，应该是组内同事

盒模型

flex

cdn

http状态码

vue源码

请求头

package.json的内容

^啥意思

package.lock.json的意思

二面

我猜是个后端，因为前端面的比较简单

如何写一个组件

为什么组内决定不用react而是vue

es5和es6的区别

有点忘了，反正比较简单

三面

笔试

可能是个资深leader，或者职位比较高之类

让我自己做题目，有问题打字告诉他，然后可能忙去了

1.写一个react组件

模糊搜索框

表格

分页

2.遍历一个未知节点未知深度的树（对象）

排序[32,34,5,6]排成最大的int类型数据653432

3.三种垂直居中样式

4

阿里云面经
通过内推码进的群，然后在阿里招聘官网上面试

一面

因为白天还要上班，晚上下班回家时候面试官打电话过来面试了（突击~）

先自我介绍：…

5

阿里云面经
通过内推码进的群，然后在阿里招聘官网上面试

一面

因为白天还要上班，晚上下班回家时候面试官打电话过来面试了（突击~）

先自我介绍：…

6

作者：神三元
链接：https://www.nowcoder.com/discuss/392835
来源：牛客网

HTTPS 的握手过程讲一讲。(讲了很久很细，面试官知道我理解，喊停了)
- HTTPS 和 HTTP 的缓存有什么区别？(懵了)
DOM API 掌握怎么样？ (不是很熟)
- Element 和 Node 的区别(假装想了一会，不知道)
XSS 攻击 Cookie相关的字段(HttpOnly, 解释了一下作用)
CSRF 攻击，解释一下 Cookie 的 SameSite 字段 (说了下，觉得可以，过)
- chrome 最新的 xxx 特性是如何防范 CSRF 攻击 (这个真没听说过)
fetch 和 xhr 有什么区别？(fetch 不熟)
- 好，解释一下 xhr 的 cors 过程(简单请求，非简单请求两种情况，说了下)
React 闭包陷阱有什么好的解决办法吗？(说实话，简历上写了，实际上理解不深，只说了一种)
- useReducer 可以解决你知道吗？ (当时真的不清楚，主要忘了闭包陷阱的表单场景，尴尬)
看了你的小册子，能不能讲讲React.memo 和 JS 的 memorize 函数的区别(memorize函数当时不知道，以为是什么高深的算法，后来才发现就是cache函数，换了个名字而已。反正当时说不会)
- 特意考了一题对React.memo的理解(擦，还是考React.memo, 三个场景，中间一个场景答错了，非常减分。这道题出的还是很有水平)
WeakMap 和 Map 的性能有什么差别?(前者对 GC 更加友好，保持弱引用)
- 如果是在立即执行函数中，两者的性能有区别吗？(楞了一会，说强弱引用还是会有GC的区别，没影响)
  - 换个说法吧，如果这个立即执行函数中有递归函数，两者性能有区别吗？(没 GET 到面试官的点啊，过了吧这题)
能不能说说 AMD 和 ESModule 有什么区别？(AMD 不熟，说ESModule，介绍了import、export以及导出引用的特点)
- 那么你能不能告诉我 ESModule 对于 Tree-Shaking 有什么优势呢？(会做一些编译阶段的优化吧)
async await 经过编译后和 generator 有啥联系？(问了两遍，还是不知道问的啥，直接说了async await 原理，他说你讲了太深，问的不是这个，过吧过吧)
有什么想要问我吗？

反问的问题:

React 闭包陷阱如何用 useReducer 解决？ (面试官又说了一遍)
能不能说一说您正在做的业务中，遇到什么挑战，有什么解决思路？(说了很多，看的出来，阿里的大神都是特别有想法、有创意，最后也给我指引了一些未来的方向，比如前端未来的容器化，对于中台页面的构建进行服务级别的调用，而不是去一个个组件去写，了解一下后端的安全容器概念，另外推荐我去看一看蚂蚁金服的微前端框架的实现。深深的佩服，开了眼界，收获很大!)

3.19 晚阿里云二面(37min)
(ps：等的太久了，都没紧张的感觉了)
二面主管问我先面试还是先笔试，因为有两个流程。我说先面试吧。

首先自我介绍
为什么要做你这个开源项目？后台数据哪来的？
有 nodejs 相关的开发经验吗？(果断说没有，避免给后面挖坑)
HTTP 的 GET 和 POST 请求有什么区别？(我说了 4 个区别)
说一说 CSRF 和 XSS 攻击？(说了一堆，他说你讲的太细了，是不是最近看过之类的文章，我说没有)
HTTP 缓存能不能说一下？(强缓存，协商缓存，中间扯到代理了，讲了一堆，他说可以了)
你知道 JS 的语言标准是如何制定的吗？(确实不熟，说下去自己查查)
- 你用过哪些 ES 最新的语法，越新越好
你对 babel 了解吗？能不能说说几个 stage 代表什么意思？
Vue 的响应式对数组是如何处理的？(重写数组方法，手动派发更新)
- Object 为什么可以自动派发更新？
假如我在一个for循环中改变当前组件依赖的数据，改变一万次，会有什么效果？(讲到批量更新和 nextTick 原理，他表示可以)
假如让你设计一个适配 PC、手机和平板的项目，你有哪些布局方案？(首先是vh、vw，然后用淘宝出品的 lib-flexible 库进行 rem 适配，还有一种 flex + px 的适配方式)
CSS 当中以 @ 开头的属性有哪些？(我说了@media, @keyframes，后来提醒我还有@import，我补充这个是串行加载 CSS)
了解过前端当前的发展趋势吗，比如一些新的技术方向。(说了对PWA的看法，为什么会凉，flutter、electron、微前端，serverless)
了解过云计算吗？能不能讲一讲云计算的发展方向和前景？
有什么兴趣爱好？
对自己的职业规划是怎样的？(说了一大堆，他笑了笑，说今天就到这里吧，明天笔试)

第二天主管告诉我不需要笔试了，笔试取消。

3.20 阿里云三面(57min)
聊了狠多，但是聊的很轻松，没有编程题，而且和个人经历强相关，就不整理题目了。

3.24 阿里云四面(40min)
让人自闭的一场交叉面。

自我介绍
为什么选择前端？
你的职业规划是怎样的？
项目中遇到了哪些挑战？
说说你对前端架构的认识，如何设计出一个架构方案
在一个大型项目中，JS 如何定位发生内存泄露的代码？
Last-Modified 和 Etag 有什么区别？
- Cache-Control 和 Last-Modified 的区别
后端语言对 nodejs 更熟还是 Java 更熟？(Java)
- 说说 String, StringBuilder 和 StringBuffer 的区别
跨域有哪些方案？
React 受控组件和非受控组件的区别

3.26 阿里云终面(50min)

自我介绍
你自己在社区做过什么具有推动性的事情？
你能不能说说自己比较擅长的数据结构有哪些？
在学校参加过竞赛吗？
你希望公司的环境是怎么样的？
为什么不投腾讯？
阿里云和抖音你更想去哪里？为什么？
你还有什么问题？

8 个人情况：

双非本科/软件工程专业/2019届毕业生，坐标杭州，目前在小厂

盒马

一面（30min）电话面试

webpack 打包流程
Taro 框架原理
React Diff
useContext 怎么使用
讲一讲如何从零打造一个工程

面试官给我建议是要有结构化思维，大意就是不要没有头绪的说一件事，要有分层次的去阐述，让面试官觉得你的逻辑清晰有条理。

在线Coding（30min）

二面（50min）视频面试

Taro 2 框架除了对静态编译的处理，还要去做哪些工作？
Node 的实践，具体的 case
Node 高并发、服务挂了怎么办
小程序和 H5 的区别
为什么小程序性能会比 H5 较好
B端和 C端开发中的差异和体会
写组件库的时候要注意什么

三面（20min）电话面试

聊聊项目
针对小程序首屏优化，除了你说的优化方式，之后还会怎么做，有其他思路吗？
未来规划

hr面（15min）电话面试（挂）

hr面最终是给挂了…可能是过程中没有很自信，回答问题也没什么重点，更多还是从自身原因去考虑吧

淘宝特价版

一面（50min）电话面试

setState 是异步的嘛
Taro2 / Taro3 / Rax （编译时，运行时）的区别和原理
Taro2 哪些语法不支持
运行时框架性能有损耗，该怎么优化
柯里化
302/301 状态码
react diff
useMemo / useCallback 如何使用
React Hooks 里如何实现 Class 的 componentDidUpdate
React 如何做优化
React v17 有去做了解嘛
社区有参与开源项目、有博客嘛

二面（20min）电话面试

上次盒马面试后，你有什么感受
有去做什么改变嘛
聊聊项目
写组件库的时候要注意什么
小程序跨段框架：为什么会有运行时方案的产生？
未来规划

三面（50min）现场面试（挂）

在写营销业务时，有什么注意点
所在团队的工程化建设
自己对工程化的理解和实践
有去参与什么开源项目嘛
未来规划

蚂蚁金服

一面（1.5h）电话面试

上来就先coding，时间控制在1h，之后简单聊了一下

小程序跨端框架中 Babel 转译的过程
Taro 的源码有去看吗？讲一讲 babylon 解析的流程
聊聊项目

二面（50min）电话面试

Rax 是如何将 React / Vue 转成小程序 DSL
运行时框架性能有损耗，该怎么优化
聊了下之前做的红包雨小游戏，碰到的坑和解决思路
聊了下对首屏优化的实践

三面（20min）视频面试

Node 的实践经历
简单说下支付宝小程序的技术架构
未来的发展方向

hr面（20min）视频面试

这次吸取了上次hr面的教训，有了足够的心理建设后，和hr聊的也不错，之后很快就告诉我通过了

交叉面（20min）电话面试

讲一下现在团队所做的业务和自己的理解
微信小程序和支付宝小程序业务/技术实现上的差别
聊聊项目

希望自己最终能够成功入职！

9 前言

非科班, 计算机基础软肋, 选择重点补计算机网络, 算法和数据结构只准备了一些, lc30道题大概.
无社会实习经历, 但有不少项目经历, PC/小程序/后端均有完整项目. 重点复盘其中的亮点难点.
对基础设施/工程化/智能化有兴趣, 落地过基于GraphQL的BFF, CI/CD/Docker/Serverless/错误监控/埋点都有实践…, 重点准备并作为简历亮点(后来事实证明这一块真的挺重要).

确定了规划之后我就开始8107的准备了, 大概在3-18投出了简历, 经历20天5轮技术+1轮HR成功上岸.

一面

这一面主要问了基础部分, 一部分题目我会带上提示

TCP 三次握手/四次挥手/等待2MSL意义/建立连接但客户端故障

我这里还提了握手失败/泛洪攻击/RST包等
TCP 慢启动/拥塞控制, 快速重传/快速恢复, 这也是我准备比较多的, 毕竟之前没接触过.
TCP UDP QUIC(QUIC是Http3的底层协议)
Http2相对于Http1.1新增了哪些东西, 主要是信道复用之类的.
浏览器渲染过程, 注意只是渲染过程, 就是从解析DOM树到展示在屏幕这个过程

主要是 令牌化/建树/收集样式表/布局渲染树/绘制列表/栅格化/绘制图块/…这些过程, 推荐阅读浏览器的工作原理：新式网络浏览器幕后揭秘
强缓存与协商缓存, 主要讲了下E-Tag和Last-Modified以及对应的标识, 强缓存方案与协商缓存方案的场景, 比如index.html该用哪个?
CSS的水平居中与垂直居中, 这个由于我平时CSS写的不多, 通常是在UI库基础上做微调, 只回答了之前记录的方案.
移动端1px, 老问题啦.
Git操作, 主要是revert与reset, 我们工作室使用的是Git Flow, 并且区分Master和Dev分支这种, 小哥说了一个Git Flow无法handle的场景, 即一个feature还未合并到Master, 但是后面的一个feature已经通过提测要并进主干, 这时要如何处理?
React: 新旧生命周期的问题, 为什么要废弃旧版的(约束开发者以及Fiber架构可能会将其打断), 新版的有什么特点(getDerivedStateFromProps(nextProps, prevState), 这个方法是静态方法, 也就说你无法在里面获取到this, 还有就是入参为prevState, 这样就保证state和props之间更隔离). 还有就是我觉得很好玩的getDerivedStateFromErrors和componentDidCatch的协作.

React: PureComponent, 浅比较, 关于浅比较这个我在自己之前一篇讲useSelector的文章中提到过. 放一下shouldComponentUpdate中shallowEuqal的源码:

  const hasOwn = Object.prototype.hasOwnProperty;
  
  function is(x, y) {
    if (x === y) {
      return x !== 0 || y !== 0 || 1 / x === 1 / y;
    } else {
      return x !== x && y !== y;
    }
  }
  
  export default function shallowEqual(objA, objB) {
    if (is(objA, objB)) return true;
    if (
      typeof objA !== "object" ||
      objA === null ||
      typeof objB !== "object" ||
      objB === null
    ) {
      return false;
    }
  
    const keysA = Object.keys(objA);
    const keysB = Object.keys(objB);
  
    if (keysA.length !== keysB.length) return false;
  
    for (let i = 0; i < keysA.length; i++) {
      if (!hasOwn.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
        return false;
      }
    }
    return true;
  }

React: setState之后发生的, 这个当时没怎么看, 只是回答了一下批量更新, 还有在合成事件与原生异步事件中的不同表现, 我个人认为其本质还是同步的哈.
多次setState的合并与获取最新的state, 其实这俩个是同一处代码(好像是particalState), 内部对参数的Object类型和Function类型做了不同的处理, 为函数的情况下, 会在setState调用完成并且组件开始rerender的时候被调用.
Node: stream和Buffer, 面试前不久刚写过流式的文件上传所以记忆犹新, 回答了四种流(可写/可读/可写可读/可转换), 以及常用的几个pipe方法.

Buffer的话主要提了一下它是堆外内存(V8的常驻内存由代码区/栈/堆/堆外内存组成)啥的.
Node: 内存管理, 这个也是面试前看到过通过启动命令更改堆内存上限的文章所以了解的多了一下, 主要关键词有 新生代/老生代假说, Scavenge算法(采用复制实现内存回收, 典型的牺牲空间换时间), From/To空间, 标记清除, 标记整理, 增量标记(将标记阶段拆分为控制在5ms内的小步骤, 每隔一段时间执行, 提高程序流畅性.)

Web安全, XSS与XSRF攻击. 这里还扯了一下Axios的X-XSRF-TOKEN机制. 可惜是在面试后才看到冴羽大大的预测最近面试会考 Cookie 的 SameSite 属性, 不然还能加一波分?

二面

可能因为简历上写的工程化比较多, 二三四面都问了比较多工程化的东西.

微信小程序, 这个是二面的重点提问之一, 包括以下几个方面:
- 生命周期, 包括应用级的和页面级的.
- 架构, View - Native - JavaScript的层级, 系统层能力, 如微信开放能力/离线存储/网络请求等. 视图层的话, 安卓下是腾讯自主研发的基于Blink的X5内核, IOS的话则是自带的WebKit-Webview
- 使用async/await, 小程序目前好像并不能原生支持async/await语法, 需要引入FB的Regenerator库. 说到这个, 我很好奇Taro/Remax这些方案中是如何处理async/await的, 降级为Promise吗?
- 鉴权, code2session这个api, 使用sessionKey生成token, openid作为主键入数据库, 再返回自定义的登录态标识.
- 与 H5/RN/Flutter/PWA 这些差异, 主要是和 H5/PWA , 我其实不太认同 PWA是小程序祖师爷 这种说法, 甚至认为不是一个性质, 只是他们的目的/玩法是相似的.
- WXS, 我顺便提了一哈, 因为当时小程序也用到了, 主要特点就是运行在View层的逻辑, 并且由于JavaScript在IOS下运行在JSCore, 安卓下运行在V8的原因, 在IOS上WXS可以达到JS数十倍的性能, 但在安卓上和JS持平.
- setState, 很神奇的一点: 数据改变同步而视图更新异步, 主要也是因为上面提到的架构的原因. 有兴趣的可以再查阅相关资料.
- 小程序如何做到禁止访问Dom, 我的理解是小程序压根就没提供DOM/BOM的API, 并且在打包编译的JS里也获取不到Window对象.
@Penumbra/cli, 这是我自己写的一个思路类似Feflow的脚手架, 也是 脚手架核心+模板插件包+构建器 的一个组合, 模板插件包的话, 前端包含 Webpack/Parcel + TypeScript/JavaScript的组合, 后端包含Koa/Egg + RESTFul/GraphQL的组合. 主要问了这些问题:
- 为什么要整这个东西, 解决了哪些问题?
- 带来了什么好处?
- 为什么还添加了Parcel, 这个主要是因为一些小项目小demo用Parcel是真的简单, 比如这个我自己搭的一个Parcel-Tsx-Template, 真-开箱即用, 真-零配置. 但是要写什么正式项目的话, 还是老老实实Webpack.
Parcel和Webpack, 由上面的展开问的, 说了一下二者的差异(内置HMR与代码分割, 预置配置), 还有就是Parcel其实也有Loader和Plugin, 之前翻了一下源码, 叫@Parcel/transformer-xxx这种. 还有就是Parcel打包前会做资源树分析优化, 并且过于黑盒, 内部写死了一套配置(好像叫config.json).
还顺便提了下Umi, 因为简历上有个Umi + Dva + Antd Pro的项目, 分析了下Umi啥的: 我个人觉得Umi是"框架的框架", 即在Webpack的基础上做了一套性能调优到极限的配置和满足大部分开发需求的生态(插件)等等.
错误监控, 我们目前使用的方式是Sentry以及Release时上传Source-Map文件的方式. 自己实现的话, React的思路主要是一个最外层的<ErrorBoundry />组件, 借助getDerivedStateFromError与componentDidCatch来捕获错误.
Https加密机制
Git Rebase 与 Git Merge
Flutter 与 React Native底层, 我只讲到Skia引擎, 毕竟Flutter还没写过完整项目…
Serverless, 这一块我主要讲了FaaS以及BaaS, 还有Serverless对前端意义, 这个问题千人千面, 我自己的理解不一定是对的, 就不展开来讲了.

三面&四面

三面和四面发问的角度和提出的问题比较类似, 因此就放在一起讲了.

介绍项目, 我通常会问面试官是对业务型项目还是设施型项目比较感兴趣, 业务型的话就介绍小程序, 设施型就介绍@Penumbra/cli.
小程序由于 UI/交互/前后端都是自己搞的, 所以能讲的真的蛮多, 但是通常会更聚焦于这个小程序的业务场景(图书资源整合), 这也是在介绍项目时我觉得比较好的一种方式:

不要东扯一点西扯一点, 以 技术栈 -> 业务场景 -> 亮点 -> 难点 -> 提炼总结 -> 自我提升 这几个步骤来叙述会更加条理清晰, 其中亮点/难点以STAR法则介绍最佳.
@Penumbra/cli这个, 上面已经介绍过, 就不再赘述. 主要为了体现 新工程目录建立繁琐 -> 应当成员之间统一目录结构 这个意识.
GraphQL, 难得遇到会问这个的, 要知道我可是把这个作为简历亮点的, 但是却无人问津…, 主要介绍了这些:
- GraphQL的意义, 与RESTFul的差异
- 对后端的影响, 其实吧我觉得现在不太可能用GraphQL作为应用的主API(除非出现了为图式查询而生的数据库, 至于FB和GitHub的GraphQL API我觉得是其内部有自研的方案), 也就是让后端同学来搞, 大部分场景应该还是后端同学搞微服务, 然后前端同学自己来写一个BFF层做接口的聚合/清洗/鉴权等等, 也就是说并不会"这个世界充满了对后端的压迫, 后端什么时候才能站起来, 气抖冷"hhhh. 既然让前端写, 那肯定是用Node了, 这个时候Apollo这些方案就真的很香了(下面会多介绍下.)
- Apollo生态, 在这里我想大胆猜测下, 未来的BFF层一定少不了这三个东西: Apollo-Server & TypeGraphQL & Apollo-Rest-Datasource, 至于它们是什么感兴趣同学可以去查查. Apollo不仅提供了服务端支持, 也提供了客户端支持, 即Apollo-Client, 同时使用Server和Client来构建应用真的能起到1+1>2的效果, 因为二者就像是一体的.
- 推广阻力, 其实只要一个团队比较年轻就没有什么阻力, 主要是可能有一定的学习/开发/维护成本~ 嚷嚷着"学不动了"在前端世界里可能真的寸步难行.
Webpack性能调优, 我从 打包速率 / 打包大小 / 交互友好 三个方面入手的, 这里可以稍微列举一些我觉得比较好用/有趣的Plugin:
- friendly-errors-webpack-plugin, 主要是对抛出的错误做了界面优化, 很多cli都在用.
- speed-measure-webpack-plugin, 测量各个环节的打包耗时, 也可以找出哪一个loader/plugin耗时最久.
- terser-webpack-plugin, 压缩JS
- webpack-bundle-analyzer, 分析打包产物
- webpack-visualizer-plugin, 同样是分析打包产物, 但是更直观
- webpack-parallel-uglify-plugin, 并行压缩, 好像和terser功能重复了.
- webpackbar, 强烈推荐! 在打包时会有进度条(VuePress就用的这个)
- preload-webpack-plugin, 预加载
至于从配置入手的话, 主要是减少查找文件时间和减少build代码体积, 前者可以通过resolve字段中配置extension, loader中配置exclude, 后者的话则主要是Tree-Shaking(注意, CSS也可以做摇树优化), 代码分割(动态加载以及Lodash/Antd这种庞大的模块), Source-Map模式, 压缩代码等等.
React函数式组件, 我觉得以后会是主流?
React Hooks:
- useState
- useEffect, 不传dep与传入[], 分别对标类组件的哪个生命周期.
- useLayoutEffect
- useRef, 还有useImperativeHandle与forwardRef, 摘抄一下之前的笔记, 也可参考[译]React高级话题之Forwarding Refs
  - useRef，使函数式组件也能够享受到获取 DOM 元素或者自定义组件，父组件获取子组件引用而后调用子组件方法，如 focus 等。
  - forwardRef，可以获取父组件的 ref 实例作为子组件的参数（与 props 同级），然后再把这个 ref 绑定到自己内部节点，就可以实现 ref 的透传了！
  - useImperativeHandle，常与 forwardRef 搭配使用，可以控制向父组件暴露的属性以及方法，第一个参数即为 forwardRef 包裹后得到的父组件 ref 实例。
- useMemo与useCallback
  
  其他的没怎么用到过就老实交代不记得了.
Hooks思想, 比如Vue3的新API, 社区React生态也在纷纷拥抱Hooks思想, 比如上面提到的的React-Redux的useSelector和useDispatch, React-Use还有Umi-Hooks等等.
Node的Cluster模块, 主从模式, 底层的Libuv.
CI/CD, 我们工作室的流程还是挺完善的, 包括commitlint -> Husky + Lint-Staged + Code Review*n + ZEIT/now测试环境, 然后才是Gitlab pipeline到OSS.
埋点, 这一块我之前调研过, 可以读读我之前写的这篇关于埋点的一些思考, 主要是以GA为代表的一键式埋点方案, 以MixAlpha/神策数据为代表的可视化埋点等.
测试, Jest/Enzyme/Puppeteer编写单元/集成/E2E测试. 稍微问了下单测覆盖率, 很没底气的说了可能就50%不到hhh.
Flutter, 感觉这种不是比较熟练的技术放到简历上不太好, 比如我用Flutter只能写写简单的Widget和页面这种, 于是就没问得太多.

五面

HR面

这一面就是常见的问题啦:

大学成绩
兴趣爱好
有没有女朋友俩人以后的职业规划
个人职业规划
成就感
团队协作经历
从小到大比较顺利还是坎坷(?)
为什么学习前端
手上有别的offer吗
为什么想来阿里, 当然是因为阿里是前端的宝地了

这些问题比较主观, 为了避免误导我就不放自己答案了.

总结&未来前端展望

对未来前端的展望是二面问到的问题, 我个人的想法主要分这么三点:

多端方案, 随着5G的发展, 物联网设备也在逐渐成熟, 到时候前端程序员要适配的屏幕可能又多了几种? 我觉得未来可能会出现真正的多端解决方案, 即更全面的Rax或者Taro, 真正的一次编写处处运行. 当然理想是好的, 在它还未乘着七彩祥云到来前, 还是专心学好每一端吧~
侵入后端, Serverless无疑是前端仔的下一个风口, 它给予了我们向后端进发的能力, 让我们"自己和自己联调", 也无需操心自己写的服务被流量打爆掉. 后端同学则能够解放出来, 去做一些更有意义的事情.(真的不是抢饭吃)
智能化, 虽然现在到处都是赋能这个概念, 但是我还是觉得, 前端的终极之一就是赋能其他岗位, 让运营mm能够自己搭自己想要的活动页, 让产品爸爸自己选要对哪些控件/事件/指标进行埋点, 让不想从零学前端的后端直接拖拖拽拽配一个界面出来, 还有就是前端同学, 直接设计图生成UI代码(梦还是要有的). 虽然现在业界已经有一些方案, 但都还存在着或多或少的问题. 这也是我最感兴趣的方向之一.

作者：林不渡
链接：https://juejin.cn/post/6844904135754514446
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

10

作者：funjust
链接：https://www.nowcoder.com/discuss/872324?type=0&order=0&pos=24&page=1&channel=-1&source_id=discuss_tag_nctrack
来源：牛客网

一、基本情况

双非

自学前端

阿里暑期实习面试：B2C零售-FC部

二、流程

3.23晚7点半，电话面试

先邮箱发送了一个链接（应该是阿里伯乐系统）

打开后开始面试

基本流程就是：自我介绍 ==> 提问 ==> 做题 ==> 提问 ==> 总结，反问

三、题目

开局：

自我介绍

*为什么学前端
* *学习渠道有哪些
* *为什么选择vue*

**
**

技术：

一、Vue全家桶

v-model实现原理

（不是使用，开始我以为是自定义和input/value，问道vue源码层次，怎么实现事件精确的监听，后来谈到数据劫持）

vuex实现原理

（vue怎么实现对vuex中的数据监听，使用过吗？为什么分异步和同步）

vue数据劫持

（Object.defineProperty）

vue3的优化，区别

（ts支持、体积更小、速度更快、composition APi和optionapi区别、Tree shaking、vite，感觉很多忘了）

二、JS、ES6

promise和async/await区别

（回答简单说了为什么有这两个，如何说了点generator函数）

setTimeout和promise的区别

（讲了宏任务、微任务、event loop等）

三、CSS

flex布局实习三分栏

（我忘了flex，css比较烂，就说浮动布局然后margin写死）

BFC的理解

（块级格式上下文，日期，外边距重叠，不影响其他元素，怎么设置成bfcdeng ）

弹窗如何居中

（直接说用了vh、vw，然后说设置left、top50%，再translate）

四、网络

**https和http区别

** （讲了ssl在tcp和http层之间，端口不同，CA机构等，追问如何加密）

五、Webpack

webpack的loader和plugin，用过哪些插件

（loader和plugin的区别，使用过compression-webpack-plugin）

**六、其他

** 有做过移动端吗，rem

（没有，自己试过，然后讲了rem，问了rem怎么实现）

笔试题三题

分别考了 原型链、 this指向和 柯里化然后做完让说一下自己的思路和理由

**
**

四、总结

个人觉得面试官挺好的，会引导你的思路，就是一直嗯嗯嗯、挺好的，很怕这样子的

然后问的也都是基础，估计和我说没学多久有关，很多问题感觉自己答得不好，柯里化还没写出来，

真脑子一团浆糊，以为会考算法，没重视基础题，应该是凉凉

11

作者：yangchill
链接：https://www.nowcoder.com/discuss/933074?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

提前批面了云网络、钉钉，正式批接着云网络，后来转ecs，估计因为hc问题挂了，现在转入大淘宝。

阿里云-云网络

2.17 在牛客投的简历， 2.18 约面视

2.19 云网络一面，35min：

春招处女面，开门红，聊得酣畅淋漓，面试官也很友好和善，就像学长一样，还挺开心。后来问的面试结果，面试官说已经指派了，应该就是过了

2.28 收到内推邮件，3.3 才进系统，用的云网络的内推，隔了几天才做测评

3.11 约二面，本来想当场面我，我直接推

3.12 云网络二面，35min：

不温不火，有部分卡壳了，理了理之后答了很多。隔了太久没面了，变得有点慌

3.15 问到二面过了，于是开始漫长的等待 hr 面，期间也在不断问内推人

3.23 约hr面，激动得噢，3.24 又打电话说推迟了，然后一直没音信

钉钉

2.20 发简历给内推邮箱，2.22 约面

2.24 钉钉一面，35min：

面试官很温和，个别追问很有深度，反正不是我面经碰到过的，结合之前学的东西思索一番才能答上一些

2.25 通知一面过，2.26 约二面

2.27 钉钉二面

3.1 问到说挂了，确实没办法，这两个月面试下来再回顾，感觉这是我面过最离谱的一次，没有之一（现在还是挺感激钉钉早点把我挂了，dddd）

阿里云-ECS弹性计算

继上次被云网络 hr 鸽了之后，3.30当天转入 ecs部门，还是同一流程。4.6 约面

4.8 ecs 一面：

4.11 官网显示阿里云的流程结束了，转入第二志愿大淘宝

（之前打趣过，说如果阿里 hr 面真能约上我了，我就去炸鸡店边吃边面（bushi）

4.22 阿里本地生活约面，但是没加联系方式，直到4.24电话打来才说不面了（当时字节和美团都oc了，有点想躺了哈哈，再面阿里还得折磨一个月）

12

作者：aaries
链接：https://www.nowcoder.com/discuss/824409
来源：牛客网

阿里的都是电话面试

一面

自我介绍
学前端多久了？
有做过什么东西吗？
学前端一年的话，除了自学以外，还通过哪些方式学了前端？
你能跟我分享一下你学前端以来，印象比较深刻的一个知识点吗？
\1. Promise…balabalabala
可以讲一下你的学习心得吗？你是怎么用promise的？
那为什么这个知识点会让你印象比较深刻？
Promise是一个很大的知识面，能讲解一下Promise具体使用的一些场景吗？
Promise 是怎么解决串行和并行的？
Promise.all 是怎么解决并行的？
想用 Promise.all 解决 sleep 怎么做？
还有什么你掌握的或者没掌握的点可以拿来跟我探讨一下的吗？
\1. 闭包，this指向
改变 this 指向呢？
我想用闭包，一般会是什么情况下？
\1. …防抖节流
防抖节流是怎么实现的？
如果不用闭包的话怎么实现呢？
用闭包和不用闭包的差别是什么呢？
除了ｊｓ谈谈什么？
\1. ｖｕｅ，我的技术栈是ｖｕｅ，我想谈一下ｎｅｘｔＴｉｃｋ
那你是为什么要去了解这个点？
那你在nextTick学习的时候有什么心得吗？
nextTick可以做什么不可以做什么？
nextTick里面调用updated会是什么情况？
如果我循环更新dom节点并且执行它，会有什么结果？
循环调用的话nextTick里面有容错机制吗？
\1. 有吧…(面试官：你可以去了解一下)
我其实更希望的是你用知识点的场景和了解的底层原理，再聊点什么？
\1. keep-alive
keep-alive适合使用场景
\1. （面试官：不适合：频繁切换的组件；适合：不经常变化但是需要频繁使用的场景；）
keep-alive缓存在哪
keep-alive是有一个相对小的容量，是怎么动态更新的，超了会怎样？
keep-alive怎么更新的？
\1. （面试官：缓存下更新和渲染怎么做的，去了解一下，是一个应用场景：又希望缓存，特定情况下又希望更新；）
平常是怎么来学习前端的？
有没有自己学习的一些沉淀？
这部分的总结有博客网站吗？
有没有遇到自己无法攻克的问题？遇到这种问题你一般是怎么解决的？
\1. 有直接去看源代码去解决吗？看源代码的案例多么？
我看你的奖项里面还有国家励志奖学金，能讲一讲吗？
项目经历还比较的偏薄弱，你有什么别的项目吗？

二面

讲一下项目背景
\1. 所以是toB和toC的两个端对吧
讲一下做这个项目在选框架等的一些考量？
你这个场景为什么用vue？或者说重新做项目你会有什么改进？
有没有考虑vue在生态，性能方面的一些问题或者说自己的想法？
项目遇到的问题？怎么解决的？
主评论下面下面有子评论，要做一个无限下拉怎么办？
懒加载无限的往上拉，一条，想想会出现什么问题？
假说有个用户很无聊，无限制的点下一页…
前端无尽展示的列表怎么设计
\1. 面试官：节点的复用，内容的改变，头为前提。了解一下无尽列表里面怎么做复用
获得座位的实时情况
项目除了功能以外，有没有考虑过其他的因素？
前端性能优化
前端开发的一些状况？
这个过程中哪些可以优化
前端层面的瓶颈你觉得是哪里？

hr面

自我介绍
介绍一个项目
项目比较薄弱，想来这边学到什么
家在哪什么时候能来
为什么选择了杭州
独生女一个人在这边不会不放心吗

总体来说阿里的面试是比较重基础的，爱出一些场景题，侧重点主要是在实习生解决问题的能力，以及会不会应用一个知识点，面试官都很好。

如果有不会的欢迎留言！！！

13

作者：每天学习一点点
链接：https://www.nowcoder.com/discuss/821804?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

楼主是11月底内推滴~ HR面后半小时拿到了意向书，base杭州西溪园区😀

2021/12/7 一面（40min）

为什么选择前端
为什么主要使用vue2
vue3与vue2区别
讲一讲tree-shaking（提到了）
前端工程化
webpack介绍
说一下使用的loader、plugin
输入url到渲染过程（尽可能详细）
tcp四次挥手何时断开？（渲染过程中还建立连接吗？）
训练营中学到了什么？（有关移动端）
美赛、gpa

反问

提升建议
业务介绍

2021/12/9 二面（50min）

自我介绍
怎么学习前端
浏览器缓存
http与https区别
为什么https构建请求速度慢？
如何加速？
defer async区别=>文档解析？
css加载会阻塞什么
如何将js代码缓存到页面上？（除了浏览器缓存？）
cookie webstorage区别
localstorage可以跨域使用吗
如何设置localstorage自动清理
css相对定位相对于什么定位
如何设置css 高度为宽度的两倍（尽可能多）
行内元素宽高、内外边距有效吗？
如何改变使得垂直方向上有效？
vue相比原生有哪些性能优化
提到了热重载，问原理
webpack打包的结构了解过吗？里面有什么

2021/12/13 三面（25min）

美赛介绍、过程中收获
家住哪里
字节青训营、阿里练习生感受和收获
项目中做了什么
实习会影响学习吗
从什么时候开始学习前端
项目中最值得讲的是什么
你所了解的阿里前端技术有哪些

2021/12/14 HR 面（25min）

自我介绍
了解的阿里前端技术有哪些
字节青训营和阿里练习生的区别
给阿里练习生的建议
实习时间
待遇介绍
朝扬计划介绍

作者：不做offer收割机
链接：https://www.nowcoder.com/discuss/739066?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

14 前言

看阿里的面经蛮少的，自己也来贡献一篇，虽然可能参考性不大。
部门暂不透露，和面试官沟通了自己要写面经。

投递（8月21日）

当天约面，因为在办离职所以延后了一周。

一面（8月29日）电话面1h

15分钟八股+15分钟反问聊天+30分钟笔试。

笔试题

不定项选择题

编程题

1、写个转换函数，把一个JSON对象的key从下划线形式（Pascal）转换到小驼峰形式（Camel）

复制代码

/**`` ``* 说明：`` ``*  `` ``* 示例：`` ``*  converter({"a_bc_def": 1}); // 返回 {"aBcDef": 1}`` ``*/` `function converter(obj) {`` ``/* 功能实现 */``}

2、最长回文子串

二面（9月1日）视频面50min

25分钟经历+项目，15分钟技术问题，10分钟反问

三面（9月7日）视频面25min

总结

整个流程蛮快的，特别是一面面试官加了我微信全程对接面试结果。
其他公司就不面了，俺的秋招结束了，嘻嘻。

意向书（9月19日）

15

作者：小白爱吃鱼
链接：https://www.nowcoder.com/discuss/717910?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

自我介绍

先从最简单的输入url发生了什么

setTimeout和setInterval差别,以及哪个定时更准

还问了下浏览器的线程

缓存问题

讲了下关于网络安全

重绘,重排,页面优化

for循环中可以用const定义变量吗,

for in /for of

es6知道多少

场景题:

有三个函数A,B,C,怎么顺序调用,说了promise的链式调用,然后说那100个函数怎么办…

答的时候顺道提了下promsie.race,promise.all,被问那这两个是并行还是串行,em,不符合要求,所以不适用

第二个情况:假设现在有个美国用户访问页面出现故障,你看不见的情况下,怎么在前端体现…

问了下关于react,在数据传递的时候,需要做什么处理吗

问了react你觉得有什么优势

总体感觉:整体很好,面试官咳嗽,还会说不好意思,有点咳嗽,另外直说:基础可以,但是实践太少,很多场景的问题不知道怎么解决,

推荐了书,以及建议我去做一个具体的项目流程,这样很多东西能够更加清除,让我好好准备,说过一两个月还能投 😂

最后结果当然是挂了,可能部门比较看重项目实践吧 🤣

那就继续努力吧~

16

作者：玺子哥的小仙鹤
链接：https://www.nowcoder.com/discuss/707206?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

继上次被阿里云刷，这次被数字供应链事业部捞

8.13 48min

自我介绍

有无实习经验，如何接触到前端

如何学习前端

因为上传了项目图片，以下问题项目相关

-----------------------------------------------------------------------------

登录界面中，用户名和密码的html元素有什么不同？

显示密码的属性

用户名和密码框如何居中对齐

登录和重置框如何右对齐，如果想设置左对齐应该怎么做

头部菜单置顶，左边目录树占屏幕的100%不可以滚动，内容区域可以滚动，这个布局如何实现

面包屑的dom实现

------------------------------------------------------------------------------

flex布局有哪些属性？3个flex元素如何均分地占据父级空间

es5和es6的继承方式大概是怎么做的？

vue的生命周期

vue中activity和keep-alive是什么东西？有什么用

computed watch method有什么区别

vue的路由模式有哪些？在浏览器的实现上有哪些优点

前端如何设置路由使不能匹配的url跳转到404页面

路由的冲突检查和避免冲突

遍历数组最常用的方法有

识别某个数组值小于0的元素会使用哪种遍历

如果数组类有一个值小于0就return false，全部值大于0就return true，用哪种方法遍历

既然es5已经有foreach，为什么es6还会出map for of

js里如何发送数据异步请求？学过使用fetch发送数据请求吗

http请求中浏览器的缓存机制

-----------------------------------------------------------------------------

面试结束下午还有一个测评，用的是阿里的伯乐系统，一共4道题，1个小时

1.js 嵌套数组的最大深度

\2. 布局相关

3.js url解析为对象

4.vue实现一个输入框，点击编辑有框线，仅可输入数字，且编辑按钮消失，保存按钮出现；

点击保存，框线消失，保存按钮消失，编辑按钮出现

二面 8.20 1h

17

作者：法式土鸡
链接：https://www.nowcoder.com/discuss/716797?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

本人一志愿投的本地生活，简历挂

二志愿随便填了个阿里云，居然被捞了 😅

------------------------------------------------------------------------

开始面试（电话面）

1.说说你关于前端的经历（项目）

3.爬虫的时候，你是一页一页爬的吧？那么如果在某一页你断网了，怎么在网络恢复后，在上次断点处继续

4.给了道算法，输出数组中重复最多的元素，秒了

反问：

技术栈？ react angular 别的啥都有

地点？杭州

如果有二面，啥时候？等通知

由于没问什么别的问题，就没问面试表现了。。

18

作者：小奇同学
链接：https://www.nowcoder.com/discuss/673072?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

\8. 最后来聊聊你是从什么渠道获取前端知识的吧~

反问：

1.部门具体的名字（因为受到面试邀请的时候就没太听清 😂）是天猫国际和考拉海淘合并来的

2.技术栈（有好多方向）

发面经攒人品，希望能过 🤣 🤣要更努力啦~

19

作者：牛客275221269号
链接：https://www.nowcoder.com/discuss/932629?type=post&order=create&pos=&page=0&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

只过去了几天就有些遗忘了，写一下大概，想到了再继续补充。阿里对于前端八股考得比较少，主要是围绕简历项目来问。

一面 2022.04.10

自我介绍
项目工程化（自我介绍提到）
对概念的理解，自己是怎么做的
cookie / localStorage / sessionStorage
提了概念，就让你具体展开说一说
内存泄漏
Vue的路由
有哪些模式，有什么区别
微前端（简历提到）
用的方案，为什么选择qiankun，为什么不用iframe
性能优化
有哪些方法，具体怎么做。这里面试官在最后告诉我，我回答得太碎，更好的回答应该是说出自己做过的实践，以及优化后的结果（有实例支撑和数据说明）
webpack
用过哪些打包工具，webpack打包过程
node
问了解吗，我说不熟，然后面试官说这个需要去学习一下
反问环节

二面 2022.04.13

自我介绍
项目介绍
接下来就是围绕项目提问
前后端分离
为什么要分离，必须分离吗
JWT
介绍一下，为什么要用这个
安全问题
由Token展开的安全问题
有哪些安全问题？
怎么防范CRSF，不用Token可以吗
RESTful API
介绍概念，现在对一个资源的操作有获取、分析、中断分析等，会怎么设计
项目中遇到最困难的事，是怎么解决的
微前端
为什么要用微前端，为什么不用iframe，调研过哪些
反问环节

笔试 2022.04.11

笔试是后来补的，阿里的前端笔试不像力扣，也不只是算法题，只需要写个大概思路，当天可能面试官比较忙，只出了一题

复制代码

//完成 convert(list) 函数，实现将 list 转为 tree
/**
 * @param list {object[]}, 
 * @param parentKey {string}
 * @param currentKey {string}
 * @param rootValue {any}
 * @return object
 */
function convert(list, parentKey, currentKey, rootValue) {
}

const list = [
  {
    "id": 19,
    "parentId": 0,
  },
  {
    "id": 18,
    "parentId": 16,
  },
  {
    "id": 17,
    "parentId": 16,
  },
  {
    "id": 16,
    "parentId": 0,
  }
];

const result = convert(list, 'parentId', 'id', 0);
const tree = {
  "id": 0,
  "children": [
    {
      "id": 19,
      "parentId": 0
    },
    {
      "id": 16,
      "parentId": 0,
      "children": [
        {
          "id": 18,
          "parentId": 16
        },
        {
          "id": 17,
          "parentId": 16
        }
      ]
    }
  ]
}

20

作者：德布罗煜
链接：https://www.nowcoder.com/discuss/860063?type=post&order=create&pos=&page=2&ncTraceId=&channel=-1&source_id=search_post_nctrack
来源：牛客网

好久没管这个帖子了顺便更新一手吧，3月29日上午8:37接到来自阿里巴巴的邮件通知已被录用，发放意向书
3月15日18:40更新：兄弟们，我二面也过了
3月14日19:30更新：兄弟们，我一面过了，二面好像是部门主管

昨天晚上面的，面试官 19:00 打了个电话过来，说往我邮箱里发了个链接，让我先做一个小时的笔试题。

笔试阿里伯乐系统 60min

笔试是在阿里的伯乐系统上做的，三道手撕代码。

第一题、根据表达式计算字母数量

这题我放在最后写了，结果因为被第三题最后一个输出卡了很久只剩下五分钟写这题代码，来不及写了。

第二题、手写节流

复制代码

function` `throttle(func, time) {``  ``let timeout;``  ``return` `function` `() {``    ``if` `(!timeout) {``      ``func.apply(``this``, arguments);``      ``timeout = setTimeout(() => {``        ``timeout = ``null``;``      ``}, time);``    ``}``  ``};``}

第三题、对象扁平化

输入：

复制代码

{``  ``a: ``'a'``,``  ``b: [``1``, { c: ``true` `}, [``3``]],``  ``d: { e: undefined, f: ``3` `},``  ``g: ``null``,``}

输入用例记不太清了，应该大致差不多吧

输出：

复制代码

{``  ``a: ``"a"``,``  ``b[``0``]: ``1``,``  ``b[``1``].c: ``true``,``  ``b[``2``][``0``]: ``3``,``  ``d.f: ``3``  ``// null和undefined直接舍去``}

因为没写过这种代码所以一开始也挺没有头绪的，花了很多时间在这题上面。（代码实现很烂，希望各位大佬不要喷我qwq）

复制代码

function` `flatten(obj) {``  ``const res = {};``  ``const _flatten = ``function` `(o, prev = ``null``) {``    ``if` `(Array.isArray(o)) {``      ``for` `(const index ``in` `o) {``        ``const ele = o[index];``        ``if` `(ele ``instanceof` `Object) {``          ``_flatten(ele, `${prev ? prev : ``''``}[${index}]`);``        ``} ``else` `{``          ``if` `(ele) {``            ``res[`${prev ? prev : ``''``}[${index}]`] = ele;``          ``}``        ``}``      ``}``      ``return``;``    ``}``    ``for` `(const key ``in` `o) {``      ``if` `(``typeof` `o[key] === ``'object'``) {``        ``if` `(o[key] !== ``null``) {``          ``_flatten(o[key], `${prev ? prev + ``'.'` `: ``''``}${key}`);``        ``}``      ``} ``else` `{``        ``if` `(o[key] !== undefined) {``          ``res[`${prev ? prev + ``'.'` `: ``''``}${key}`] = o[key];``        ``}``      ``}``    ``}``  ``};``  ``_flatten(obj);``  ``return` `res;``}

吐槽一下

面试全程电话面 30min

解释一下笔试题
自我介绍
有没有看过React的源码？
我回答说没有看过，但是了解过虚拟DOM和DIFF算法，面试官让我解释一下这两者。
根据我的回答，面试官又问了一句为什么在JSX里循环生成DOM需要添加key
我就从DIFF算法的原理特性解释了这个问题
class组件和使用hooks的组件有什么区别
有没有用过iframe？没有用过
有做过h5的手机端的页面吗
在手机端一般用什么单位？我就说比较喜欢用rem、em、rpx这些，面试官接着又让我解释一下rem
现在写代码Promise用的比较多哈，你能解释一下Promise是什么样的一个概念吗？
我解释了一下Promise的主要用途和用法，也同时讲了一下async/await的概念，以及它们和Promise之间的关系。
在以往的项目里有遇到什么困难的点吗？
这个问题给我噎住了，一下子想不起来有什么很牛逼的难点，比较基本的不敢答，最后挑了一个现在在做的electron项目的一个小问题的解决办法。并且讲了一下由于项目重构后使用了更新版的electron导致原项目的解决方案不再适用，当时也找不到问题所在，于是通过overstackflow了解到electron这次更新是把我的这部分功能限制了的，而它的中文文档又没有更新，因此得查阅英文文档才能看到更新的细节……后面又想到了目前的解决方式解决了这个问题。