一年前端面试总结｜入职字节｜2020.8

站在未来看现在
你当像鸟飞向你的山

前言

    普通本科，软件工程专业，2019年毕业进入奇安信集团（前360企业安全），实习期间遇到一群可以一起嗨的朋友，感觉很幸福，也很庆幸能够遇到hin nice的导师，对我的成长帮助 hin 大。跳槽之旅要从6月份开始投简历讲起，因为个人原因想要去深圳，所以拒掉了知乎的offer，又因为个人原因不去深圳了...最后入职字节base北京-国际化团队，想要内推的朋友们可以私聊我～，具体offer选择的原因可以看面经部分哦～。这篇文章想总结一下这段时间的面试和一些好文推荐。
面试是一个双向选择的过程，不要因为一次面试失败就否定自己～没有谁生来就是大牛，面试不仅看你的技术能力表达能力，也很看你和面试官的缘份，所以每次面试结束之后记得总结复盘一下。也不要因为害怕失败迟迟不敢投出自己的简历，我开始也是这样，以一个已经上岸的人的角度再往回看，你只有迈出去，你才知道你行不行，勇敢点！！不要还没开始就结束了。不论面试结果失败还是成功，你要继续磨刀霍霍向offer，奥利给少年们！！！

面试准备情况

    说说我的面试准备情况，开始准备阶段就是在掘金知乎上面看看大家的面经，面经不论对找工作还是查漏补缺的人来说帮助都很大，所以我也来反哺一下社区～希望对大家有帮助，大家有什么问题或是想知道的都可以私聊我，我尽力帮助盆友们～。看了面经，就大概知道现在社招会问哪些方面的问题，看了下来大概就分为三剑客基础、框架全家桶使用及原理、前端工程化、计算机网络、浏览器、前端各领域热点话题（错误监控，性能监控，微前端，跨端开发...），然后可以列出自己的思维导图，进行查漏补缺。
js基础我主要是看书，你不知道的js 上和中看完了一遍，红宝书看了几个章节，这样的技术书需要反复看，每次看都有不一样的收获。前端热点话题这个是因为我有报名前端早早聊，会听听业界大佬们的分享，这是一种学习的方式，当然也可以找找相关话题的好文章，理性报名～。关于看文章这回儿事，也有点小建议给盆友们，大家学习时尽量看官方文档，比如mdn。学习框架，看源码，vue源码我看了很多次，理解了很多次，不要在才开始学习时就去看别人消化之后的文章，别人消化之后输出的文章是别人的收获，可以作为你后续查漏补缺的一种方式，但是不应该是你学习的范本～
另外比较重要的就是算法，在我开始准备面试阶段，没那么看重算法，每天刷1-2个题，而且还只是ac就行，并没有去思考最优解，思考时间复杂度和空间复杂度该怎么优化一下，这样是没有提高的。大学有学过一些简单的数据结构和算法，知道几种常见排序的思路能够马马虎虎手写出来，但是在字节三面的时候还是入坑了（可以看下面字节的面经），算法是一个长期积累的过程，并不是在短时间可以快速提高的，所以盆友们注意在平时就要积累自己的算法能力哇！！！在字节三面后深刻意识到自己的问题，开始将大量的时间投入到算法练习中（大家理性看待哇，不要盲目投入大量的时间在投入多回报慢的事情上，我是在明白自己的基础已经准备的差不多的情况下，这里也可以看出来积累的重要性）在后面接近一个月的时间里反复练习算法，leetcode刷了80个题，简单和中等参半，困难3个题，每个题基本上都做了3次左右，每个题都会思考用哪个算法比较好，为什么？我有看过一个人说，练习算法最好从 树 开始，因为树的各类题目基本上都会用到递归算法，理解了递归思想，其他算法思想就能够更好的掌握，后续找到链接了我再贴上来～ 练习下来发现这位大佬说的真好，是这个理（虽然我并没有从树开始练习，后悔没有早看到）。
项目相关的准备，之前有看过一篇盘冲大佬的文章我在阿里招前端，我该怎么帮你？，对我帮助很大，希望也可以帮到泥萌～

面试记录

    7月16日到7月24日 妥妥的水逆期鸭！！！（看来和深圳么缘，面的深圳岗都失败了...

知乎

    知乎面试体验很棒，推一波知乎二面面试官Lucas大佬，是《React状态管理和同构实战》的作者，二面没有常规的面试题，会根据简历中项目不断深入，提出让你有思考有收获的问题，我认为这是面试最好的状态～。知乎的面试有点久了，当时也没有记录下来，大致回忆一下（遗漏的应该很多）～

一面

1. https握手过程？
2. http缓存？（其实http缓存除了强缓存和协商缓存，还有一个自发的启发式缓存，具体可以查查rfc）
3. vue双向绑定的原理？
4. computed实现原理？
5. 原型链
6. 事件循环
7. flex布局（grid布局）
8. promise

手写题：

1. 画一个田字格，其中有一个半径是5px的圆距离右下格子下边距和右边距都为10px。

二面

1. 项目相关的问题...
2. 有什么想和我聊的？（讲讲自己最近学习的技术和有意思的点）

三面

1. 介绍你觉得最有特色的一个项目，项目开发遇到过什么难点都是怎么解决的。（注意项目背景）

2. 开发过程中用到过哪些设计模式？

3. 你对面向对象的理解？

字节

一面

  问了很多项目相关的问题，基本上把简历上的项目问了个遍（一面问项目我也表示很疑惑呢...），可以列出来一些和实际业务没太大关系的题目

1. jsBridge通信方式有哪几种，各有什么优缺点，用哪种方式比较好？
2. 你知道错误监控怎么做的吗？能监控哪些错误？有哪些局限性？
3. 项目中是怎么做错误处理的？
4. 基础相关的题目：两行文字，第二行超出了省略怎么做？

编程题：
1.以下代码输出什么？并用es5改写它

for(let i = 0 ; i < 5; i++) {
   setTimeout(()=>{
   	console.log(i);
   })
}
console.log(i);

2.实现以下函数

setQuery('https://www.baidu.com?a=1', {a:2,b:2});
// 输出： 'https://www.baidu.com?a=2&b=2'  
// 注意：考虑边界情况(如hash、url的 encode 和 decode)

二面

1. http缓存，项目中是如何用的，给了几个场景，问此时应该怎么配置缓存头。
2. css flex布局 grid布局有用过吗？
3. css 动画 实现一个div 无限旋转
4. 你认为移动端开发和pc端开发有什么区别？
5. 遇到过哪些跨域情况，都是怎么处理的？（cors, ngnix, iframe
6. 事件循环 / promise （原谅我给忘了... 经验告诉我们面完之后一定要做个记录
7. 平时是怎么学习的？

逻辑题：

两瓶红蓝墨水
先从红墨水中挤一滴，放入蓝墨水中，摇匀。
再从蓝墨水中挤一滴，放入红墨水中，摇匀。
问最后，红蓝墨水中 红墨水与蓝墨水的比例。

编程题：

sum(2)(1,2,3)(3).valueOf();  // 11

三面

1. 最近在研究什么？我们来讨论以下～
2. 如果让你重新做一次之前做过的项目，你会怎么做？

编程题：(当时算法能力太low了... 两个题都没做出来，三面挂...)

1. 给定一个正整数数组，对于数组中每一个区间都存在一个最小值，存在一个x值，x值为该区间最小值*区间数组的和，求x最大值的区间。
2. 分饼干

+二面（被其他部门捞起来继续二面...）

1. hybrid开发，存在什么问题？如何优化首屏加载时间？
2. 从输入url到页面展示，中间发生了什么？越详细越好。
3. CDN DNS相关深入。

算法题：

1. 连续子数组的最大和 (leetcode原题和三面第一题类似)

    面试官本意是想考察一下在三面没做出来的第一题，下来有没有复盘，由于当时下来用暴力解法把三面第一题做出来了... 直接给面试官讲了我做这题的解题思路，面试官一听思路不太对，于是开始了算法填空题... 是的，你没有看错，算法填空题！！！面试官把解法的大体框架写了出来，只需要我填上两行代码，然后我却花了接近20分钟把这两行代码填上。。太菜了！！面试官直接说你的算法能力在我这儿也过不了，于是我加了面试官的微信，想在后续的学习中如果遇到什么问题可以请教一下。面试官对我的帮助很大～ 字节的面试体验也太加分了八～
面试官后续有了解到我在百度和快手的三面都通过了，想让我再试试他们部门！！

+二面

1. http2相对于http1.1的特性，说得越详细越好。
2. 多连接 分情况讨论，哪些情况下用http1.1比较好，哪些情况下用http2比较好？
3. 性能监控，主要监控哪些指标？
4. 减少首屏时间有哪些方式？
5. 如何减少请求时间？

编程题：

1. eventbus实现一个发布订阅模式。
2. 限制并发数。

+三面

1. 描述一下团队情况，人员配比，项目情况，我从中担任的角色是什么？项目的亮点，难点。
2. 根据我项目问了很多场景类的题目（问题格式：如果要你实现...你会怎么做？）。
3. 某个项目的数据结构是怎么样的，大致写出来。
4. 问了一些基础：
   1. 浏览器哪些情况下会存在跨域？怎么解决？（尽量全面）
   2. 描述一下cookie（可以从大小，属性，作用，场景来描述）

编程题：

1. 实现 promise.run 串行执行promise(考虑promise.all是并行执行) ，注意： 结合reduce实现
2. 实现一个组件 每输入4个字符 加上一个空格。 （注意一定要考虑边界情况）
3. 做一道之前没有做出来的题：连续子数组的最大和

到这里经过了字节的6轮技术面试，面试体验都很棒～ 字节hr小哥哥也很负责，6轮面试跟着我情绪波动的小哥哥，感动！！！在这里竖起来我的大拇指赶紧夸赞一波～
面试官好感+1 hr好感+1 部门也是我喜欢的，果断选择了字节！！！

腾讯

一面

1. 项目中遇到的难点？以及怎么解决的？存在什么遗憾未解决的问题吗？
2. webpack拆包有几种方式？
3. 垃圾回收机制？
4. 重绘重排？平时开发过程中如何避免？
5. 有写过loader或者plugin吗？知道其中的原理吗？
6. webpack的构建流程？
7. 对框架的理解？vue mvvm框架？（从广义的框架思想以及解决了什么问题 到 可深入到框架原理）
8. 对 virtual dom 的理解？

二面（笔试面试）

5个编程题：

1. 字符串相乘
2. 无重复字符串的排列组合
3. 1234567 格式化为 1,234,567
4. 找出两个数组的相同元素（注意考虑数组中存在对象的情况）

var list = [{id:1, type:'A'}, 
			{id:2, type:'B'}, 
            {id:3, type:'A'}, 
            {id:4, type:'C'}]; 
            
/*尝试用编写一个惰性求值的实现。如 
list .where(function(x){ return x.id >=2 }) 
	 .where(function(x){ return x.type=='A'}) 
     .value() 
*/

此时我的算法能力太弱了... 挂...

shopee

一面

1. 原型链相关的题目...

function Fun(){
	this.a = 'fun';
}

Function.prototype.getValue = function(){
	console.log(this.a)
}

Fun.getValue(); // undefined

function Fun1 () {
	Fun1.getValue = function () {
    	console.log(1);
    }
    
    this.getValue = function () {
    	console.log(2);
    }
}

Fun1.prototype.getValue = function () {
	console.log(3);
}

Fun1.getValue = function () {
	console.log(4);
}
Fun1.getValue(); // 4

var obj = new Fun1();
obj.getValue(); //2

function Fun2 () {}
Fun2.getValue = function () {
	conosle.log(5);
}
Fun2.prototype = Object.create(Fun1.prototype);
// Fun2.prototype = Fun1.prototype;
// Fun2.prototype = new Fun1();
var obj2 = new Fun2();
obj2.getValue();// 3

2. flex布局
3. csrf原理和预防
4. vue2 和 vue3的区别 proxy可以代理深层次对象变化吗？
5. http缓存 expired max-age etag，network disablecache是什么原理？
6. 跨域 cors ，options请求有了解吗？预检请求的状态码是什么？

编程题：

1. 判断一个电话号码是否是靓号？
   输入一个电话号码 '15629384444' '15645673456'
   至少满足两个条件，则为靓号： 1. 连续4个相同数字 2. 4个递增的数字

面试过程自我感觉还不错，但是挂了...

快手

一面

1. webpack 拆包的几种方式，webpack首屏渲染优化做了什么？
2. 构建为什么用jenkins 为什么不用gitlab pipline？
3. js原型题目

function Foo () {
	this.a = 1;
 	return { a: 2, b: 3};
}
Foo.prototype.a = 4;
Foo.prototype.b = 6;
Foo.prototype.c = 7;
var obj = new Foo();
obj.a 
obj.b 
obj.c

4. css 画一个正方形，要求边长是设备短边的一半长度（可延伸到移动端适配方案）
5. h5调用了哪些端的能力(hybrid app)

手写题：

1. 手写promise.allSettled
2. 将短横线变量命名换成驼峰命名（eg. get-element-by-id => getElementById）
3. 有序数组排序（最优解）参考LC：合并排序的数组

二面

1. 端相关：

• hybrid 通信方式以及优缺点
• hybrid 性能优化（着重首屏渲染）
• jssdk 鉴权怎么做的

2. 页面打点相关：

• 如何计算某个子页面访问量（router 原理相关）
• 如何计算某个组件的展示次数（vue原理相关，生命周期）

3. vue相关：

• vue自定义指令用得多吗，什么情况下用到？
• vue组件的通信方式以及使用场景和优缺点。

4. 项目有什么业务特点以及难点。
5. vuex原理以及劣势
6. 你了解web安全吗？（可站在web安全高度来讲，再深入到某一种详细的攻击方式和防御，比如xss,csrf,ddos...）

算法题

1. 爬楼梯（动态规划的方式/优化空间复杂度）
2. 实现以下函数：

getQuery('https://www.baidu.com?a=1&b=2') // {a:1,b:2}

注意考虑边界情况。
url decodeURI 与 decodeURIComponents 有什么区别？

三面

手写题：

1. 实现以下函数：

transform('get-element-by-id')
//输出：getElementById GetElementById

2. 输出随机颜色 hex
   eg. #f1f2f5

考虑十进制转十六进制 num.toString(16)

3. 继续将 hex #f1f2f5 转为 rgb(241,242,245)
4. 其中涉及到hex的校验

注意考虑hex存在缩写三位数字的情况 #fff，且每一位都是16进制的
考虑用正则方式实现呢？

css题目：

1. 以下元素在页面中展示几行？

<span></span>
<div></div>
<img/>

2. 给div元素加上 position:absolute 页面布局如何变化？

<span></span>
<div style="position: absolute"></div>
<img />

3. 给div元素继续加上 top:5px;left:5px 页面布局如何变化？

<span></span>
<div style="position: absolute;top:5px;left:5px;"></div>
<img />

4. 清空前面所有样式，向div元素加上 margin-top: 5px; 页面布局如何变化？

<span></span>
<div style="margin-top: 5px;"></div>
<img />

快手技术面试通过了～ 面试体验都很棒，可以感受到快手的技术氛围和团队氛围是很棒的，但是和字节的部门相比起来，还是选择了字节～ 如果想要投快手的朋友们也可以私聊我～ 帮你简历推给面试官！！！

百度

一面

1. 模块化有了解吗？发展历程？ 以下分别是什么模块化规范？

   export m
   export default m
   module.export = {}
   
   

2. webpack热更新有了解吗？
3. 原型链
4. cookie（可以讲讲自己的理解，可以从属性，场景，作用来全面讲解cookie）
5. 前端路由和服务端路由的区别？
6. webpack拆包的方式有哪些？
7. 如何减少首屏渲染时间？
8. 什么场景下用服务端渲染？服务端渲染有哪些优点？
9. vue-router的原理？
10. vuex的原理？

编程题：

1. 如何统计当前页面setTimeout定时器的执行次数？
2. 实现 await myForEach(arr, callback);
3. 实现一个穿梭框，主要是左边列表是待选列表，右边列表是已选列表，点击右边列表中某一项时可撤销选择。

二面

1. babel是如何将es6转成es5的，着重 .babelrc 的配置。
2. 讲讲项目中遇到的难点，是如何解决的？
3. 有看过webpack的源码吗？
4. 项目的性能优化可以从哪些方面考虑？

编程题：

1. 实现vue-router
2. 实现一个类似于百度首页输入框，输入内容时，会出现一个匹配关键词的列表。（注意：考虑哪些优化的点，比如防抖，请求与响应的匹配）

三面（主管面）

1. 输入URL到页面展示，其中发生了什么，越详细越好。
2. ...其余围绕项目和团队情况聊天，也会有一定的场景题，比如，你的leader提出了一种解决方案，但是你认为有更好的解决方案，怎么处理这种情况？如果采用了你的解决方案，并且经过了测试，但是上线之后发现了问题，并且给公司造成了严重的事故影响，此时应该怎么解决？
3. 百度主管面比较看重候选人的价值观与公司是否符合（大家在面试一家公司之前，先了解一下公司的价值观是怎么样的，和你的价值观搭不搭～，再决定是否投递简历）

百度的面试体验也很棒，是百度云团队，二面面试官我超级喜欢，技术能力不用说，面试并不是说想要把你考倒，而是不断发掘你的优点，遇到卡住的点，面试官会努力引导你～ 喜欢这样的面试体验！！！ 我是个喜欢傻笑的姑娘，面试官小姐姐陪着我傻笑，喜欢她！！！！ 但是三面主管面认为我的价值观可能和公司的价值观不太符合，比较看重个人发展，缺乏主人翁意识，在后续有通过我的内推朋友问我是否确认想去百度，确认再约hr面～ 然后就不了了之了。。。

好文推荐

我推荐的：

1. 浏览器是如何工作的

2. 浏览器缓存

3. Vue diff 也推荐看看作者其他学习vue的文章。注意框架学习自己先看源码哦～，自己先理解，实在不明白或者想看看别人怎么理解时，再去看别人的文章。

4. webpack

5. https握手 可以先看看其它简单的https握手流程，比如小灰的，再来看看这篇文章更加细致的了解https握手的详细过程，会觉得很妙～

大佬推荐：

1. 子奕的前端个人资料汇集
2. 木易杨前端进阶