字节跳动-效率工程一二三面面筋 + 前端笔记分享

前言

2019/11/03，秋招尾声中的尾声，很是幸运🤞，在10天前被字节跳动-效率工程的hr捞起来，经过了一面，二面，三面，到今天早上hr告诉我通过了所有面试环节，进行offer审批阶段。感触良多，回馈一下牛客网发面经的各位牛油

下面说几点这个秋招给我的感受：

尽早开始准备⏱：我的秋招是从8月底开始的，已经有点迟了。春招也是3月份开学来到学校才开始准备，总是比别人慢一拍开始，所以别人的秋招是8-9月份，我的秋招却是国庆回来，跑各大银行的面试，和少数的互联网公司面试。所以一定要把握好春招、秋招投递简历、笔试、面试的各个时间节点，然后针对个人情况提前准备。
简历尽量多投一些📬：我在秋招这段时间，总共投了16家互联网企业，6家银行岗位，说实在真的太少了，这里面还有一半以上的企业是做完笔试或者测评，就没有消息了，真正有面试的公司也不到10家。如果能力不足，像我一样（wtcl），无法保证投递的企业都是有把握的话，个人建议还是多多尝试；
面试放宽心态🤷‍♂️：如果有幸，被你所中意的公司捞起来面试，也要放宽心态。很多时候，面试除了看实力，也需要一些运气，面试官有可能恰巧问的都是你不会的，也有可能问的东西你都刚好会。这里也侧面印证了真的要多投几家（能力不够，个数来凑啊。。。辛酸史）
需要时刻保持学习📚：秋招的过程，可能就是笔试，笔试，面试，面试，笔试，面试，面试......（省略一堆），每次面试完，可以适当休息一会，但真的一有空就要学习，你不知道下一场面试什么时候会到来！说不定大厂明天就再次捞你面试了！

面经部分

说来也是不容易，在秋招面了字节跳动共三次，头条研发，DATA，效率工程都面过了。头条二面挂，DATA一面挂，最后运气不错，收获了效率工程的offer

附上字节跳动-效率工程的三面面经，效率工程的一二面和以往接触的字节的面试风格不用，以往除了代码题，基本都是纯聊。效率工程一二面不同，上来先让我做题，结合题目作答问我原因。不过三面可能因为是技术大佬，没时间等我慢慢做题，也是基本纯聊

一面-70mins

屏幕正中间有个元素A, 随着屏幕宽度的增加，
始终需要满足以下条件：
- A元素垂直居中于屏幕***；
- A元素距离屏幕左右边距各10px；
- A元素里面的文字”A”的font-size:20px；水平垂直居中;
- A元素的高度始终是A元素宽度的50%; (如果搞不定可以实现为A元素的高度固定为200px;)
  
  请用 html及css 实现
函数中的 arguments 是数组吗？若不是，如何将它转化为真正的数组

请说出以下代码打印的结果

 if ([] == false) {console.log(1);};
 if ({} == false ) {console.log(2);};
 if ([]) {console.log(3);};
 if ([1] == [1]) {console.log(4);};

请说出以下代码打印的结果

 async function async1() {
 console.log('async1 start');
 await async2();
 console.log('async1 end');
 }
 async function async2() {
 console.log('async2');
 }
 console.log('script start');
 setTimeout(function () {
 console.log('setTimeout');
 }, 0);
 async1();
 new Promise(function (resolve) {
 console.log('promise1');
 resolve();
 }).then(function () {
 console.log('promise2');
 });
 console.log('script end');

以最小的改动解决以下代码的错误（可以使用es6）

 const obj = {
 name: " jsCoder",
 skill: ["es6", "react", "angular"],
 say: function () {
  for(var i = 0, len = this.skill.length; i< len; i++){
    setTimeout(function(){
      console.log('No.' + i + this.name);
      console.log(this.skill[i]);
      console.log('--------------------------');
    }, 0);
    console.log(i);
  }
 }
 };
 obj.say();

图片说明

实现ES5中Function原型的bind方法，使得以下程序最后能输出'success'

 function Animal(name, color) {
  this.name = name;
  this.color = color;
 }
 Animal.prototype.say = function () {
  return `I'm a ${this.color} ${this.name}`;
 };
 const Cat = Animal.bind(null, 'cat');
 const cat = new Cat('white');
 if (cat.say() === 'I\'m a white cat' && cat instanceof Cat && cat instanceof Animal) {
  console.log('success');
 }

请用算法实现，从给定的无序、不重复的数组data中，取出n个数，使其相加和为sum。并给出算法的时间/空间复杂度。(不需要找到所有的解，找到一个解即可)
```
 function getResult(data, n, sum) {
 }
```
反问环节

一面结束，第二天下午hr打电话约二面

二面-45mins

代码运行结果

var a = function () { this.b = 3; }
var c = new a();
a.prototype.b = 9;
var b = 7;
a();
console.log(b);
console.log(c.b);

JS继承如何实现
repeat 实现，使用JS实现一个repeat方法，调用这个 repeatedFunc("hellworld")，会alert4次 helloworld, 每次间隔3秒
```
function repeat(func, times, wait) {
}
const repeatFunc = repeat(alert, 4, 3000)
```
代码题 + 逻辑：给定一个整数数组，每个元素大小都在 1- 100 之间，对这个数组进行排序。范围扩大到32位整数怎么办？（可以敲代码，也可以讲思路）
hash表结构，解决冲突的办法，hash函数有什么类型
开放题：学数据结构或者算法过程中，有没有什么地方觉得很巧妙
反问环节

二面结束，当晚hr打电话约三面，那个激动啊，第一次过字节二面🤩

三面-50mins

模式匹配，
1234567890 ->1,234,567,890（不是简单的JS函数，是使用正则做的，这边踩坑了）
浏览器的缓存策略
跨域问题
项目的技术难点（讲了第一个‘难点’，大佬说，这好像不是难点吧？😀）
JS如何性能监测，如何监测用户页面是否卡顿（不懂，强答，聊了一会大佬说跳过这问题吧）
解决hash冲突的办法
数组和链表的区别
浏览器渲染过程
手头offer情况
为什么选择前端？
反问环节

三面有感：前两面都是做题 + 原理的面试情况，三面回归了聊技术的方式。可能因为是大佬面，总感觉压力很大，一股自己凉了的感觉（可能是因为太🥦了），每个问题面试都会一直追问，问到你答不出来为止才换问题。三面总共有两次被面试官说“不聊这个了，我们换个话题吧”。

三面结束后，真的是慌得一批，复盘完感觉每个问题面试官都不是很满意，感觉凉了😣，焦急得等待结果。恰巧是周五，如果当天等不到结果，那就可能要等到下一周了，果不其然当天没消息🤦‍♂️

周六下午等不住了，发短息问了hr。要特别感谢hr谢谢，非工作时间帮我查询结果，告诉我通过了，第二天会联系我。（啊啊啊啊啊啊啊啊🤓）

后记

从3月份的春招开始到现在，半年多时间的前端学习，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三部分：前端基础，前端进阶，算法题

下面是针对这三个大类下，我个人的一个知识分类
图片说明

我先将剑指offer部分题目的解题思路和代码整理到博客：https://youyingjie114.github.io/ （刚开始的博客，有点简陋，大佬见谅）

后续会持续整理更新前端基础和前端进阶的知识点到博客，欢迎互相学习和交流

PS

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以查看笔记中的参考链接进一步学习。理解之后，日后复习的时候就可以查看笔记快速回顾了。
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要

#字节跳动##校招##前端工程师##面经#