前端填空题_一年前端面试总结｜入职字节

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

前言

普通本科，软件工程专业，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状态管理和同构实战》的作者，二面没有常规的面试题，会根据简历中项目不断深入，提出让你有思考有收获的问题，我认为这是面试最好的状态～。知乎的面试有点久了，当时也没有记录下来，大致回忆一下（遗漏的应该很多）～

一面

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

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

二面

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

三面

介绍你觉得最有特色的一个项目，项目开发遇到过什么难点都是怎么解决的。（注意项目背景）
开发过程中用到过哪些设计模式？
你对面向对象的理解？

字节

一面

问了很多项目相关的问题，基本上把简历上的项目问了个遍（一面问项目我也表示很疑惑呢...），可以列出来一些和实际业务没太大关系的题目
1. jsBridge通信方式有哪几种，各有什么优缺点，用哪种方式比较好？ 2. 你知道错误监控怎么做的吗？能监控哪些错误？有哪些局限性？ 3. 项目中是怎么做错误处理的？ 4. 基础相关的题目：两行文字，第二行超出了省略怎么做？

编程题：
1.以下代码输出什么？并用es5改写它 javascript for(let i = 0 ; i < 5; i++) { setTimeout(()=>{ console.log(i); }) } console.log(i);

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

### 二面

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

逻辑题：

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

编程题：

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

三面

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

编程题：(当时算法能力太low了... 两个题都没做出来，三面挂...) 1. 给定一个正整数数组，对于数组中每一个区间都存在一个最小值，存在一个x值，x值为该区间最小值*区间数组的和，求x最大值的区间。
2. 分饼干

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

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

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

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

+二面

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

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

+三面

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

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

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

腾讯

一面

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

二面（笔试面试）

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

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(); // 4var obj = new Fun1();
obj.getValue(); //2function 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

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

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

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

快手

一面

webpack 拆包的几种方式，webpack首屏渲染优化做了什么？
构建为什么用jenkins 为什么不用gitlab pipline？
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

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

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

二面

端相关：
hybrid 通信方式以及优缺点
hybrid 性能优化（着重首屏渲染）
jssdk 鉴权怎么做的
页面打点相关：
如何计算某个子页面访问量（router 原理相关）
如何计算某个组件的展示次数（vue原理相关，生命周期）
vue相关：
vue自定义指令用得多吗，什么情况下用到？
vue组件的通信方式以及使用场景和优缺点。
项目有什么业务特点以及难点。
vuex原理以及劣势
你了解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

输出随机颜色 hex
eg. #f1f2f5
考虑十进制转十六进制 num.toString(16)
继续将 hex #f1f2f5 转为 rgb(241,242,245)
其中涉及到hex的校验注意考虑hex存在缩写三位数字的情况 #fff，且每一位都是16进制的
考虑用正则方式实现呢？

css题目： 1. 以下元素在页面中展示几行？

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

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

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

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

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

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

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

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

百度

一面

模块化有了解吗？发展历程？以下分别是什么模块化规范？ ```javascript 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. 实现一个穿梭框，主要是左边列表是待选列表，右边列表是已选列表，点击右边列表中某一项时可撤销选择。

二面

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

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

三面（主管面）

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

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