由于公司年前的一些战略调整，和自己预感公司路线的担忧，自己也不得不提前准备一些后路，这期间陆续面试了头条，西瓜视频这边，支付宝公益这边和猿辅导这块。这次和三年前的职业变更，leetcode 刷了一些，但是其实也没刷多少，至少面头条的时候，也只是刷了少数 easy / medium 和那些后端相比少了很多。

然后就是特别推荐这个技术图，去准备复习的知识点:

现代前端技术知识体系

这期间，还有就是对自己特别模糊记忆不清楚的一定记笔记，这期间自己 Evernote 也不断誊抄“答案” 也有 32篇左右，主要还是需要不断加强记忆，尤其面试前。

简单说下三家的各自经历吧。

字节跳动-视频架构

这个大概是十一月面的，这个时候离职意愿还没有那么强烈，而是帮助前同事去完成一个内推名额。打心底，我觉得头条加班多，以及江湖一些小恩怨，我不太偏向去。不过面试还是认认真真的准备，听闻面试很难，加上自己本身是偏 Engineering (Production > Science)多点那种， 所以感觉跪的概率还是比较大。

大概一面是交叉面，是在头条的海淀总部那边，是安全的前端小哥，感觉年龄很年轻(我前同事说她去头条最大感觉就是小鲜肉太多了)。一面纯粹是基础面试题，涉及 JS 的非常多，大概题目我后面记录了下：

  • JS 的基本数据类型?
  • 引用类型是什么？
  • ES6 Symbol 是什么，用在什么地方？
  • 最满意的项目，学到了什么？
  • 题目1

  • 题目2

  • 实现函数防抖或者截流的任意一个？
  • 使用 ES5 实现原型链继承？
  • 算法题目

  • 统计一个字符串出现次数最大的字符，并且获取出现频率 比如 "accdddccaaaaa" 答案 "a” 6

总的来说，一面还是比较快，40-50分钟就完成了，全部都是偏 JS 的题目，大概面完后八点半去了另外一个地方，开车去的，是另外一个办公地点。

二面是未来同部门同事(也很年轻，给我们这些老人一些生路把)面试的，问了也是巨多的问题，涉及到了项目和视频这块，大概聊了一个多快一个半小时了。也要求手写代码，和思路总结这些。

  • var vs const ？ 什么是变量提升？
  • 平时学习的途径有哪些？会看什么样的书籍？
  • Object.defineProperty() 里面，可以设置哪些属性，分别代表什么意思？ 实际场景有哪些用到了
  • 手写 实现 JS 单例模式和订阅模式(EventMitter)
  • 手写，使用 Promise 实现任务队列发送请求，实现最大请求数目限制任务?
  • 如何实现无缝切换分辨率？
  • HLS 播放，dts 出错，有什么解决方案没有？
  • 如何解决画面音频不同步的问题？
  • H.264 里面 I 帧，B 帧 P 帧，代表什么？ IDR 帧代表什么？
  • H.265 的解决方案有哪些
  • 算法 找到连续某个字符串中不重复的最大子字符， 类似 “acdeadea” => “acde” leetCode 上的题目
  • 如何克服跨域问题，常见的跨域手段有哪些？
  • HTTPS 的工作原理，证书机制有什么好处？
  • 如何推进前端和后端需要配合的项目？
  • WebVR 底层原理是，播放器架构是怎样的？

二面问的问题也非常多，涉及到前端基础和项目设计的问题，然后感觉那天精神状态特别好，很多问题思路都比较不错，然后感觉对面的小哥也非常好奇我得项目经历，彼此项目交集还是比较多，他也觉得有些思路之前项目没有用到过。差不多从8点40多面到10点二十左右，然后就叫前同事下班走了。

三面在隔了两天通知了，面试的是这边前端总负责人，问了一些关于简历和意愿的一些问题：

  • 个人职业发展的经历？说出感觉印象最深的项目？

自己答的是一个 Canvas 粒子动画和现在整体播放的优化这块。

然后面试官又根据这些项目问了一些实现细节，关于代码设计和一些特性原理这块。

总之三面就是一些项目经历的总结，类似 PPT 展示这样子，要说服下面的观众，觉得你做的事情还是很有意义的。

差不多三十分钟左右，又叫坐车去头条总部那边，应该就是 HR 面试了。当然 HR 就是一些常规的问题，然后和个人一些发展预期。其中我个人认为失败感最强的时间段，个人恰好说到了现在，感觉身边都是牛人，为什么项目最后推进一直那么顺利，和创业的不可预知因素的无奈等等。

头条的总体流程还是很快的，隔了周末， offer 开始沟通，整体 Package 感觉头条确实给力，但是自己还是觉得自己创业这块还有希望，加上不太想加班哈哈哈，只能婉拒了。

支付宝 - 公益

后面前部门关系比较好的 TL 把简历推给了支付宝这边，北京三环总部那边，支付宝公益也就是种树，春节红包这边，这块项目吸引力确实足够。

一面是周六上午，人很 Nice 说周六上午过来面试也行，他也刚好过来加班。一面主要是问了下近况，和项目这些，然后就是一轮笔试题目，一面应该是未来一起共事的同事。

  • Sticky Footer 布局，内容增加，但是 Footer 始终在页面底部

  • 给页面所有 Class 名称为 item 的元素绑定 click 事件;
  • 代码阅读

  • 实现一个简单的事件订阅模式，实现 on() 和 emit() 方法；
  • 实现一个正则表达式，匹配 https://gwalipay.alicdn.com/style-main.css?( 匹配所有包含 .css 的文件，可能带查询参数)

差不多，写完之后，又闲聊了这边支付宝的整体情况，后面就走了。

过了差不多几天，周三下午收到面试通过，准备二面，面试是远程电话，上海团队的交叉面试。二面技术基础的问的比较少，还是主要问项目，和项目的产品参与度？

  • 说说过去一年做的比较重要的项目？
  • 性能优化的具体实践，如何解决页面卡和慢的问题?
  • 优化的数据对比是怎样的？上线后数据是怎样的？(这里面试官察觉出自己产品嗅觉不是很敏感)
  • VR 图片是怎么优化的？线上转码系统是怎样工作的？
  • 播放稳定性的埋点是怎样的？
  • 线下产品的重要指标有哪些，技术会关系到哪些？

当然差不多二面聊了45分钟，由于在地铁站面试的，感觉交流不是那么顺利，不过好在后面还是通知了三面四面的安排。也加了二面的微信，觉得未来如果来上海可以交流哈哈哈。

过了差不多一周左右时间，因为当时人去云南了，一直等回帝都，才能面试。三面四面是一起面试的，也是电话面试，三面结束没多久，就面试了四面。

他们也是问了一些项目上的问题，其中四面面试官比较牛？开篇就是像我这种经验的人，先给20分钟吹牛，然后他再问20分钟问题？

然后就 balabala 说了20多分钟，然后提了关于 PWA 缓存利用，和 Prefetch 包括 Local DNS 和阿里云 CDN 热源的问题，有一些是关于架构层面的内容，涉及到整个集群的服务利用等，总之问的非常多关于链路的内容，然后又问了 H.265 解决思路和优化怎么做的，以及同步音画等问题。感觉四面最后一面还是暴露了一些架构上的确实，和所谓知识广度问题。

过了三天，通知 HR 面试，见到了 HR 和 前端组负责人，沟通了职业经历，和不稳定性。HR 也大致聊了个人意愿和发展预期，差不多很快两个人也就聊了40多分钟就结束了，然后在国贸那边吃了汉堡王，感觉阿里这面试流程真的算是比较长(虽然很早就知道)，由于那个时候双十二和红包活动，过了十天左右，HR 才通知 Offer 申请下来，进行双向沟通，这里就是涉及特别重要的个人发展问题。我个人如果偏 Web 多媒体的话，可能那边短期是不会有个方向的，但是后期肯定会有，还有就是薪资上，不会去和头条 Match ，看个人抉择。我觉得这边 HR 还是很 Nice 说足了自己的一些不足，包括所谓“宽度“ 和 业务思维这些问题，强调这个时间点是不是最好的时候回归阿里这样的。当然最后，自己还是断了这个 Offer。一个是自己觉得业务兴趣问题，也包括整个薪资打底的问题。

猿辅导

其实猿辅导也是年后自己公司进行团队调整和疫情薪资调整，包括更严重的 Streaming 流量控制的原因，自己接触了这边。面试流程很快，由于在家办公，猿辅导是在牛客网上面试，一二轮都是交叉面试(是因为面试人员紧张)，问的问题也都还是非常基础:

  • 函数防抖/截流
  • Event Loop 代码题目
  • 算法，二分查找
  • Promise All
  • Object.Proxy
  • ES6 的一些新特性
  • 箭头函数
  • 继承

其中算法问了关于树的，左视树，输出左边看到的节点。

总的来说每一轮都控制在 45 分钟左右，随后就是部门 TL 的三面，聊了项目上的一些，也涉及了团队方面的一些问题，包括规范，执行等。由于项目问题已经被问了太多次，自己是真的回答的滚瓜乱熟了。大概隔了两天，HR 面试确认个人发展预期，然后和前端负责人双向沟通，大概也就是现任 TL ，给的建议，建议我从技术广度去发展，不要局限某个领域的深度扩展，这边也给予人员管理的期望，希望可以共建专业的前端团队等。

总的来说这三家公司各有特点，从个人角度看，也是暴露了自己整个前几年过于专注的问题，整个思维的广度有所欠缺，和前TL聊的时候，他给的建议，就是要学会讲故事的能力，说白了技术基础，是个人稍微多努力点，多记忆点，都好通过，到更高纬度去思考和项目分析，这种是实战和总结的。感觉的确离那个目标还是有一定距离，总之大家在平时学习积累中，总结和思考一定要有，还有就是在职业发展后期，一定要强调个人的业务联动能力，学会去把项目的整体流程把控起来，说白了技术基础决定你拥有现在的饭碗，个人综合能力(技术能力哦，产品能力，逻辑思维能力，沟通能力)决定你在市场的整体定位。

第 160 题：输出以下代码运行结果，为什么？如果希望每隔 1s 输出一个结果，应该如何改造？注意不可改动 square 方法

const list = [1, 2, 3]
const square = num => {return new Promise((resolve, reject) => {setTimeout(() => {resolve(num * num)}, 1000)})
}function test() {list.forEach(async x=> {const res = await square(x)console.log(res)})
}
test()

解析：第 160 题

最近汇总

第 159 题：实现 Promise.retry，成功后 resolve 结果，失败后重试，尝试超过一定次数才真正的 reject

解析：第 159 题

第 158 题：如何模拟实现 Array.prototype.splice

解析：第 158 题

第 157 题：浏览器缓存 ETag 里的值是怎么生成的

解析：第 157 题

第 156 题：求最终 left、right 的宽度

<div class="container"><div class="left"></div><div class="right"></div>
</div><style>* {padding: 0;margin: 0;}.container {width: 600px;height: 300px;display: flex;}.left {flex: 1 2 300px;background: red;}.right {flex: 2 1 200px;background: blue;}
</style>

注：此题和 155 题 left、right 样式有些不同

解析：第 156 题

第 155 题：求最终 left、right 的宽度

<div class="container"><div class="left"></div><div class="right"></div>
</div><style>* {padding: 0;margin: 0;}.container {width: 600px;height: 300px;display: flex;}.left {flex: 1 2 500px;background: red;}.right {flex: 2 1 400px;background: blue;}
</style>

解析：第 155 题

第 154 题：弹性盒子中 flex: 0 1 auto 表示什么意思

解析：第 154 题

第 153 题：实现一个批量请求函数 multiRequest(urls, maxNum)

要求如下：

  1. 要求最大并发数 maxNum
  2. 每当有一个请求返回，就留下一个空位，可以增加新的请求
  3. 所有请求完成后，结果按照 urls 里面的顺序依次打出

解析：第 153 题

2019-12-31

第 152 题：实现一个 normalize 函数，能将输入的特定的字符串转化为特定的结构化数据

解析：第 152 题

2019-11-25

第 151 题：用最简洁代码实现 indexOf 方法

解析：第 151 题

2019-11-21

第 150 题：二分查找如何定位左边界和右边界

不使用JS数组API，查找有序数列最先出现的位置和最后出现的位置

解析：第 150 题

2019-11-12

第 149 题：babel 怎么把字符串解析成 AST，是怎么进行词法/语法分析的？

解析：第 149 题

2019-11-01

第 148 题： webpack 中 loader 和 plugin 的区别是什么(平安)

解析：第 148 题

2019-10-31

第 147 题：v-if、v-show、v-html 的原理是什么，它是如何封装的？

解析：第 147 题

2019-10-29

第 146 题：Vue 中的 computed 和 watch 的区别在哪里(虾皮)

解析：第 146 题

2019-10-24

第 145 题：前端项目如何找出性能瓶颈(阿里)

解析：第 145 题

2019-10-22

第 144 题：手写二进制转 Base64(阿里)

解析：第 144 题

2019-10-21

第 143 题：将 '10000000000' 形式的字符串，以每 3 位进行分隔展示 '10.000.000.000'

解析：第 143 题

2019-10-17

第 142 题：(算法题)求多个数组之间的交集(阿里)

解析：第 142 题

2019-10-15

第 141 题：Vue 中的 computed 是如何实现的(腾讯、平安)

解析：第 141 题

2019-10-14

第 140 题：为什么 HTTP1.1 不能实现多路复用(腾讯)

解析：第 140 题

2019-09-17

第 139 题：谈一谈 nextTick 的原理

解析：第 139 题

2019-09-11

第 138 题：反转链表，每 k 个节点反转一次，不足 k 就保持原有顺序(哔哩哔哩)

解析：第 138 题

2019-09-04

第 137 题：如何在 H5 和小程序项目中计算白屏时间和首屏时间，说说你的思路

解析：第 137 题

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

前言

本文主要给大家带来一些我面试的经历和经验，希望对正在求职的同学有所帮助。我先大致说下面试之前的个人情况：2017年7月正式入职海康威视数字技术股份有限公司，使用Vue.js技术栈。

我写的篇幅可能有点长，如果只想看成功的面试请直接从阿里企业智能事业部(一面)开始，大家见谅哈。

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

  • Vue CLI 3结合Lerna进行UI框架设计
  • Cz工具集使用介绍 - 规范Git提交说明
  • 你真的理解$nextTick么
  • 基于Vue实现一个简易MVVM
  • 2019 前端之路(干货满满)(墙裂推荐)

关于阿里

Hi，大家好，我们是阿里巴巴新成立的BU，目前还有大量的Web前端职位空缺，机会难得，希望正在找工作的同学们可以来试试：