原作者是一名比较优秀的22届毕业生，前端知识也掌握的很不错，不过由于学历原因，最后没有拿到字节的实习offer，确实很可惜。

由于原文较长，我们将分为上、下两篇为大家分享。

第一个部门

这个面试机会来的挺意外的：先在 Boss 投递过简历，之后牛客网看到了内推的信息，便加了内推人的微信，让他帮忙问了一下简历的进度，果然是简历挂了。

内推人后来给我打电话，根据简历简单询问了一下情况，最后和 hr 沟通捞了我一下，才有了第一个部门的面试机会。

一面 - 6 月 9 日 16:00

• 自我介绍

• 怪异盒模型和标准盒模型的区别

• 给了一段代码说两个盒子背景为蓝色的区域

• 两个盒子分别设置了 box-sizing: border-box, box-sizing: content-box

• 如何触发 BFC

• 给一段代码问效果是什么样的

• 会有一个外边距合并的问题，怎么解决这个问题

• 垂直水平居中

• 数组遍历方式有哪些，你觉得哪一个性能最优？

• this 指向谁，如何更改 this 的指向

• // 非原题，大概是这个意思
  const o1 = {
      text: 'o1',
      fn: function() {
          return this.text;
      }
  }
  const o2 = {
      text: 'o2',
      fn: o1.fn
  }
  console.log(o2.fn());
  

• 你常用的 React Hooks 有哪些，描述功能

• 服务端渲染了解吗 和 SPA(单页面应用) 的区别

• Commonjs 和 ES6 Module 的区别

• 还了解过其他的吗，不了解(AMD、CMD、UMD...)

• 算法题

• 题不难，但是思路跑偏了。先用的递归O(n ^ 2)

• 面试官：可以优化一下吗？

• 改成了循环可以提前终止

• 面试官：其实你思路跑偏了，O(n)的复杂度就可以，用栈(瞬间顿悟)，不过解出来就好

• 你有什么问题想问我的？

一面大概面了 45 分钟，然后给我说一面过了，等会 17:00 二面

二面

• 讲讲项目，说说你的亮点

• 亮点，性能优化吧，怎么测量的，怎么优化的，优化前后的对比

• Network, Lighthouse, Performace, Memory, Webpack、网络

• 面试官也会提出一些问题，问我怎么优化，原理是什么

• 有写过 webpack 的 plugins 吗

• 没有

• 看代码，css 选择器权重

• 算法：二叉树

      有这么一个数据结构:
  
      const data = [
        {
          "id": "1",
          "sub": [
            {
              "id": "2",
              "sub": [
                {
                  "id": "3",
                  "sub": null
                },
                {
                  "id": "4",
                  "sub": [
                    {
                      "id": "6",
                      "sub": null
                    }
                  ]
                },
                {
                  "id": "5",
                  "sub": null
                }
              ]
            }
          ]
        },
        {
          "id": "7",
          "sub": [
            {
              "id": "8",
              "sub": [
                {
                  "id": "9",
                  "sub": null
                }
              ]
            }
          ]
        },
        {
          "id": "10",
          "sub": null
        }
      ]
      现在给定一个id，要求实现一个函数
  
      findPath(data, id) {
  
      }
      返回给定id在 data 里的路径
      示例:
  
      id = "1" => ["1"]
      id = "9" => ["7", "8", "9"]
      id = "100"=> []
      PS: id 全局唯一，无序
      ```
      
  

• 考点递归回溯，非原题

• 说下 EventLoop

• 看代码

       async function async1() {
           console.log('async1 start');
           await async2(); 
           console.log('async1 end');
       }
       async function async2() {
           console.log('async2');
           // 注意：这里如果返回 Promise 的话执行顺序就不一样了
       }
       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');
  

• 非原题

大概 40 分钟吧，等会 18:00 三面

三面

• 自我介绍

• 几几年的

• 哪里人啊

• 高考是出现了什么状况吗

• 没有啊，就是当时没那个想法

• 这个学历对你产生了多少影响

• 还是聊聊技术吧，给一个场景，二分查找

  // 当时用的 js，用 ts 只是为了表达的更清晰一点
  interface Barrage {
    time: Number;
    barrage: String;
  }
  const binarySearch = (arr: Barrage[], time: number) => {
    let l = 0;
    let r = arr.length - 1;
    while (l <= r) {
      const mid = (l + r) / 2;
      if (arr[mid].time === time) {
        return arr[mid].barrage;
      } else if (arr[mid].time < time) {
        l = mid + 1;
      } else {
        r = mid - 1;
      }
    }
    return null;
  }
  

• 面试官：那数组的边界

• 我就在那看，看了大概十几秒吧，会越界吗...

• 面试官：好吧，那我们先下一题

• 写出来了

• 你还能在优化一下吗

• 额，时间复杂度O(logn), 空间复杂度 O(1)，这挺优的啊(有点懵)

• 不，这个优化不止是时间和空间复杂度，可以从工程化的角度出发

• 还是有点懵

• 提点了我一下(l 和 r 为什么要定义在外面)

• 哦哦，关联太多，所以耦合就高，您是指的这个吗(没回复)

• 一个异步任务调度器，最多同时执行两个异步任务

• 有思路吗？

• 用个数组先存起来，判断执行的数量，需要就取出来，

• 好，那你写吧

• 结果写了好久，半个小时起步，还没写出个结果

• 执行逻辑大概写出来了，但返回的逻辑没写出来

• 提点我一下，我改了一下

• 又提点我一下，我又改了一下

• 逻辑上离成功就差一步了(还差一个异步)，但我傻呵呵的对着 C++ 的控制台打了半天 js 代码，给的是类我还少打了好几个 this，唉...

• 时间问题打断了，确实写的太久了

• 为什么学前端

• 一个用户活跃度几千万的网站你会做哪些优化

• 有点懵，说实话我对几千万和几十个人没什么概念，说了些关于首屏，用户体验的优化，减少请求...

• 反问

• 学习建议

• 做题之前先想清楚，不要错在一些不该错的地方

每轮面试官问的问题都很开放，引导你自己说，再根据你所说的东西再去问一些问题

连着三面，因为三面比较惨所以对其他两面问题印象不是很深

复盘

异步任务调度器

这个异步任务调度器调用机制实际和 Proimse 的 reslove 触发 then 方法是相同的，reslove 内的执行逻辑需异步触发，等待 then 方法中的内容执行完(存储好)再触发，只是方法内部执行逻辑有细微的差异而已。

二分查找

// 这除出来可有可能是个分数啊
const mid = (l + r) / 2; // Math.floor((l + r) / 2);
// l + r 也可能超出数字范围
const mid = l + Math.floor((r - l) / 2);

这心一下就哇凉哇凉的，之前的 Promise 白手写了，索引还不取整，脑袋跟进了水一样，灌得满满的那种。

第二天下午，hr 和我说面试通过，但因学历 offer 审批有些困难，会努力帮我争取。很感谢，说实话能得到这个认可，我已经很开心了。

三月开始投递简历到现在，大专不要，必须本科，学历不符，BOSS 上投递大多回复都没有，大多的公司面试机会都没有，学历问题的我也早已经习惯了。

6月15日，收到 hr 通知，最终还是不行...

原文作者：小丶k

原文链接：https://juejin.cn/post/6972751722410147854#heading-8

面试官点评

这位同学在第一个部门的面试经历，其实不算简单。

一面都是八股文上的题目，再加一个算法题，能考察出一个人的基础能力。

二面由项目展开，再加上webpack相关的问题，算法题是二叉树相关，以及两道看代码说出输出结果的题目，这些对于一个有过真实项目经历的实习生而言，确实有些难度。

三面则是对该同学的一些基本情况进行了解，并出了2个场景题，这也是字节比较常见的考察方式。

我们可以看到，每一面的侧重点都不一样。

这位同学的大专学历确实对面试结果会造成一些影响，真实的面试中，对于学历低一些的同学，要求往往会更高一些。

最后

7月初，大厂秋招的提前批已经开始了。祝应届的同学们都能在秋招中，收获让自己满意的offer。

这儿也打个广告，《前端面试题宝典》经过一年多的迭代，现已推出 小程序 和 电脑版刷题网站 （https://fe.ecool.fun/），欢迎大家使用~

同时，我们还推出了面试辅导的增值服务，可以为大家提供 “简历指导” 和 “模拟面试” 服务，感兴趣的同学可以联系小助手（微信号：interview-fe）进行报名。