春招面试总结

写在前面

因为 1.4 放寒假后回字节继续实习，所以在春招的这两三个月里基本上都没有时间准备面试 QWQ 等到四月的时候才意识到再不投递就来不及了才开始陆陆续续投简历。其实一开始也挺佛性，觉得已经有字节实习了，干脆就一直呆在这实习好了，春招不参加也罢。但后来因为各种原因，想返粤的心思更加强烈，所以才决定投简历面试吸吸经验，看看最后能不能去深圳腾讯或阿里。

也是自己前期太佛性的错，太晚投递简历导致很多公司春招都基本上结束了，包括最后投递的腾讯也没赶上提前批，最终走的还是正式批。所以这次春招的重大失误就在于没有事先把握好时机，不然应该可以捞到更多的面试机会和 offer 🐶🐶

前前后后投递的公司只有美团、京东、滴滴、快手、拼多多、百度、阿里、腾讯，除了美团阿里腾讯有面试外其他的都石沉大海了。

美团美团平台一面

4.7，一个小时左右的视频面。

一面挂 Orz

1. 介绍实习项目。介绍项目的上线流程，有没有研究过项目中使用到的第三方后台是如何发布上线的？

说实话，没研究过…

2. 输入 url 到页面显示的过程。

DNS 解析全过程 -> CDN -> TCP 三次握手 -> 资源传输 -> HTML 解析、DOM 和 CSSOM 和渲染树构建 -> 布局渲染 -> TCP 四次挥手（感觉回答的也还不全面）。

3. 帮助中心里有什么缓存措施，离线缓存有吗？

4. Cookie 和 LocalStorage 的区别？

5. 帮助中心的首屏渲染时间、相关的性能统计。

说实话，虽然字节有专门的性能监控平台，但我还没专门去研究过…

6. 写一个函数，判断给的字符串是不是 IP 地址。

• 为什么 IP 地址是以 . 间隔开来，为什么会大于 0 小于或等于 255。

• 0.0.0.0 和 0.0.0.1 是不是 IP 地址，有没有效。

// 面试时写的代码
function judge(str) {
  const arr = str.split('.');
  if (arr.length !== 4) {
    return false;
  }
  for(let i=0; i<arr.length; i++) {
    const num = parseInt(arr[i]);
    if (num < 0 || num > 255) {
      return false;
    }
  }
  return true;
}

事后发现这个判断逻辑是有问题的，比如没有对每组数字中是否包含了非数字字符进行判断；没有判断是否有前导 0 比如可能为 001；如果某一组是空字符串则经过 parseInt 解析为数字后，得到的是 NaN 也会返回 true；

发现 Leecode 上有道题是类似的，判断字符串是 IpV4 地址还是 IpV6 地址，代码实现可以看这里。

7. 重挥重排的区别以及怎么发生的？JS 哪些操作会引起重排？

• JS 设置 style 的宽高等、设置 display。

• JS 获取 offsetTop、scrollTop、getComputedStyle 等数据。

• JS 新增删除一个节点、改变一个节点内容。

8. Less 怎么解析成 CSS 的？具体过程有了解过吗？

使用解析器将 Less 解析成 AST。

讲到了前阵子自己做的颜色规范校验，以及 style-components 也可以解析成 AST 吗？

9. React 的 jsx 语法怎么解析的？

10. Webpack 和 Babel 的工作机制了解过吗？

不会…

11. ES6 平时使用到什么？Promise 自己模拟实现过吗？认为实现过程中哪里比较麻烦？自己是怎么实现的？

12. Event Loop 是什么？setTimeout 和 setInterval 设置的最长时间是多少？两者的底层实现有什么不同？

只知道最短时间，不知道最长时间，底层实现就更不知道了…

13. 哪种数据结构比较熟悉？写一个函数，打印二叉树每一层最左边的那个节点。

当时用层序遍历的方式做，然而编码的时候一直因为粗心写错了好几个地方 Orz

14. 认为自己目前为止做的最好的项目是什么？

15. 跨域解决方案。

16. 静态 CDN、动态 CDN、CICD、前端容器。

动态 CDN 和前端容器直接把我问懵了。

17. 有什么想问的吗？

• 面试官负责的业务和项目是什么，以及使用的技术栈。

• 最近遇到过什么技术难题吗，是怎么解决的？联系到自己实习过程中貌似没有遇到什么技术难题。

其实不管实习工作中在做什么，只要给自己定一个目标就会发现技术难题。比如帮助中心的首屏时间，、如何优化等，只要多想想就能发现问题。

小结

不知道因为这是隔了大半年后的第一次面试还是啥的，面试的时候贼紧张，感觉话都说不清了 Orz（感觉这次美团一面比后面腾讯的其他几轮面试都难）

阿里深圳 ICBU 一面

4.14，五十多分钟的电话面，面试官是直接打电话过来当场面试的。

问的范围很广，从为什么要学习前端、平时怎么学习、自己性格怎么样、遇到过什么挫折、JS、CSS、React、浏览器安全、计算机网络、操作系统到挑自己做过的一个项目系统地说下。几乎都是面试官问一个问题，我回答完之后就直接问下一个问题了，并没有深入去问某个知识点，问的也都是常规的基础知识。还问我我有什么亮点他没有问到的吗 QWQ

答得不好的地方有：

1. 有用过 Node 吗，了解多少？我对 Node 还没深入研究，为了避免给自己挖坑就直接说只简单用 Node 去读写文件、搭建 Http 服务器而已，其他的就不了解了。

2. 操作系统方面的内容，进程和线程的区别，进程之间是怎么通信的？因为没复习到位，所以没能答全面。

3. 有学其他的后端语言吗？大一的时候学过 C++，Go 和 Java 都不会。

阿里深圳 ICBU 二面

4.15，只有十多分钟的电话面

1. 学校教过什么课？

2. 对于一个百万级别的数组，怎么排序和去重？

3. 二叉树说一下？

4. 链表说一下？

5. 实习期间的收获是什么？

6. 在学校有获得什么大的奖项？

二面后隔了两个多星期都没有回复，官网状态也是一直显示面试中。之后问了阿里小蜜转人工客服后，就秒发拒绝邮件了…

腾讯 csig 笔试

4.26，五道题。是专门给前端开发的笔试题，不是研发的统一笔试题。

1. 给出一个虚拟 DOM 结构，将虚拟 DOM 中的 h1、h2、h3、h4、h5、h6 节点提取出来，按给定的格式构造出真实 DOM。

2. 给出两个域名 a 和 b，判断 a 是否是 b 的二级域名。

3. 实现一个栈结构，包括常规的 top、push、pop、clear、size 方法。

其他题记不起来了，当时笔试完忘了及时记录下来。五道题差不多只做了一半，其他一两道题想了一些时间还是没思路就干脆没做直接交卷了。

腾讯 csig 一面

5.12，一个小时的电话面

4.20 投的简历，4.26 笔试，等到现在才忽然通知面试

1. 在字节的实习收获？自我介绍，如果拿到 offer 了什么时候可以来实习？

实习收获还是照旧从技术掌握、编码意识两个方面说了下有哪些提高。

2. 为什么选择 csig？

3. 怎么理解原型链的？如何让 a 继承 b？

4. new 做了什么？

5. 箭头函数和普通函数的区别？有什么其他绑定 this 的方法？

6. 浏览器存储有哪几种？之间的区别是？localstorage 和 sessionstorage 可以存储私密数据吗？

7. 为什么会跨域？CORS 是什么以及怎么做？

8. Vue 双向数据绑定原理？

去年看过相关的源码解析并动手实现过，大致说了 Observer、Watcher、Compiler 三个模块的作用。不过感觉虽然自己知道这是怎么一回事，但说出来的时候就说不连贯了，日后还是需要再对此组织一下语言准备准备才是。

9. Vue 的 Diff 算法？时间复杂度是多少？之前的 O(n^3) 是怎么计算出来的？

这几天刚好在看 Vue Diff 的源码，大致从同级比较、深度递归、双端遍历这三个角度说了下我的理解。

10. React 的生命周期函数有哪些？

哎尴尬，感觉说的零零散散，没能说完全和连贯。

11. React 的 setState 原理？

只略微提到了合成事件而已。没办法，setState 相关原理还在我这两个月的 TODO 列表里，还没去研究过。

12. React Hook 怎么理解？有哪些 Hook？

13. React 和 Vue 的区别？

14. TypeScript 和 JavaScript 有什么区别？使用 TypeScript 有什么感受？

15. XSS 攻击和 CSRF 攻击是什么？对应的场景是？分别有什么预防措施？

XSS 可以再谈谈 CSP，CSRF 可以再谈谈 Cookie 的 SameSite 和谷歌前几个月对 SameSite 做的改变。

16. CDN 的请求过程？

17. 输入 url 回车到页面渲染的全过程？

感觉说的不是很好，没有把细节说清楚。日后还是需要再专门深入理解并整理成 Blog 下。

18. 状态码？301 和 302 有什么区别？502 具体是指什么错误？

502 只知道是服务器错误，具体是哪里出错了就回答不上来了。

19. 快排的思想是什么？最坏情况是什么？最坏的时间复杂度是多少？对此有什么优化措施？

最坏的情况是，所有的数都分布在基数的一边，此时划分左右序列就相当于是插入排序，此时的时间复杂度是 O(n^2)。优化措施是不要取第一个数组元素作为基数，可以取中位数作为基数，避免一边倒的情况（快排的基数选择印象中有好几种方法，不过忘了没说具体）。

20. 时针和分针的夹角问题，06:15 的时候分针和时针的夹角是多少？

典型的智力题面试题，前阵子有专门看过十几道常见的智力题，刚好看过时针分针夹角问题。我的回答是：假如时间是 m 时 n 分，我推出了两者夹角的公式为 |30 * m - 5.5 * n|，具体过程可参考我的 notes。

但面试官说我想的太复杂，他跟我解释说：06:15 时假如时针没有随着分针移动，那么两者之间夹角为 90°。而每分钟时针走的度数是 0.5°，所以 15 分钟里时针随分针走了 7.5°，即 06:15 的时候分针和时针的夹角是 97.5°。

最后我顽抗了下，说面试官你的这种解法只适用于特殊情况，普适情况下还是得靠那条公式才行。面试官说他就是特意出 06:15 这种特殊情况，考察我的反应能力…

小结

今晚顾着玩阴阳师都玩了还有项目管理的课要上 Orz，等到距离下课还有五分钟的时候才想起有课… 赶紧打开 QQ 上课才发现有个人自称是腾讯的面试官加我（没办法，家里信号对联通极度不友好，我的手机在家里基本上都是无服务的），过了会加上好友后约了十分钟后的 QQ 电话面试。面试官人也挺好，我回答问题后他都会 ”嗯“ 一声（这里发四声，而且是重重的 ”嗯“ 一声的那种），也很和蔼。刚开始面试的时候我有些紧张，他有说有笑，我也随之不紧张了哈哈。之后那道时针分针夹角问题也帮我解释了可以怎么做，他解释了一遍后问我听懂了吗，我老实说没听懂，他也耐心再解释了一遍。最后他说想看看我代码能力怎么样，约了明天上午十一点笔试。BTW，明天要笔试了，我面完试就马上去朋友家喝茶等到十二点才回来，有点浪呀。

腾讯 csig 笔试

5.13，早上五十多分钟的笔试，开 QQ 共享屏幕。

还是一面的面试官，刚开始 QQ 发给我前两道题后他就开静音让我有问题随时问他就行，全程都没催我。我写完后跟他解释了一下代码思路，他说没什么大问题（就是代码还可以优化 QWQ），接着就发第三道题给我了。

1. 实现一个树结构的深度优先遍历。打印每个节点的 tag 或者 name。节点的数据结构参考：

let tree = [{
  tag: 'div',
  isComponent: false,
  children: [{
    name: 'Panel',
    isComponent: true,
    children: [{
      tag: 'div',
      isComponent: false,
      children: [{
        tag: 'span',
        isComponent: false,
      }]
    }]
  }, {
    tag: 'input',
    isComponent: false,
  }]
}]

2. 根据以上结构生成一个简单的 jsx 语法的字串，例如上例的导出结果为：

<div>
  <Panel>
    <div>
      <span />
    </div>
  </Panel>
  <input />
</div>

3. 设计一个数据结构实现 undo 和 redo 功能，类似于编辑文本时的撤销（Ctrl + z）和撤销本次撤销操作（Ctrl + shift + z）操作。

面试时的解题代码

第一题：

function fn(head) {
  const res = [];
  function fn1(root) {
    if (root.children) {
      for(let i=0; i<root.children.length; i++) {
        const item = root.children[i];
        fn1(item);
      }
    }
    root.isComponent ? res.push(root.name) : res.push(root.tag);
  }
  fn1(head);
  return res;
}
const ans = fn(tree[0]);
console.log(ans);

第二题：

function fn2(head) {
  function fn3(root) {
    const tag = root.isComponent ? root.name : root.tag;
    if (root.children) {
      let allChildren = '';
      for(let i=0; i<root.children.length; i++) {
        const child = fn3(root.children[i]);
        allChildren += child;
      }
      return `<${tag}>${allChildren}</${tag}>`;
    } else {
      return `<${tag} />`;
    }
  }
  return fn3(head);
}
const ans2 = fn2(tree[0]);
console.log(ans2);

第三题：

function Demo() {
  this.preOps = [];
  this.value = '';
  this.reOps = [];
}
Demo.prototype.doSomething = function(fn) {
  const res = fn(this.value);
  this.preOps.push(this.value);
  this.value = res;
}
Demo.prototype.undo = function() {
  const pre = this.preOps.pop();
  if(pre !== undefined) {
    this.reOps.push(this.value);
    this.value = pre;
  }
}
Demo.prototype.redo = function() {
  const pre = this.reOps.pop();
  if(pre !== undefined) {
    this.value = pre;
  }
}

/* test */
const demo = new Demo();
const fn = val => {
  val += '1';
  return val;
};
demo.doSomething(fn);
demo.doSomething(fn);
demo.doSomething(fn);
demo.undo();
demo.undo();
demo.redo();
console.log(demo.value); // 11
demo.redo();
console.log(demo.value); // 111
demo.redo();
console.log(demo.value); // 111

腾讯 csig 二面

5.13，中午三十分钟的面试

太突然了，早上刚笔试完，我还以为得明天才能面试，刚在玩阴阳师突然就收到了电话…

1. JQuery 的源码看过吗？

2. JQuery 的 DOM 对象和原生 JavaScript 的 DOM 对象有什么区别？

不会…

3. JQuery 的 document.querySelector 怎么实现的？如果 document.getElementsByClassName 浏览器不支持，要怎么 polyfill?

判断 document.querySelector 的参数是 ID 选择器还是类选择器，再在方法内部使用对应的方法。如果要 polyfill 的话，我的回答是去遍历 DOM，判断有没有符合条件的 DOM 节点。

4. 简历中写的中国象棋这个项目，如何做性能优化？

Orz 这个中国象棋就一个 HTML 页面还只用到了JQuery 而已，性能优化没想到有多少方法 QWQ

5. 长轮询和 WebSocket 有什么区别？

6. 简历中写的 Vue 项目，对于首页的瀑布流图片，即使做了图片懒加载，如果用户一直往下拉，还是会一次性加载很多图片怎么办？

我想到用一个 loading 变量去标志。如果屏幕内的图片还没有加载完成，屏幕底部就显示这个 loading 态阻止用户继续向下拉，这样可以避免用户一直往下滚动页面。但面试官对这个方法不满意，他说的点我也没有 get 到，我就老实说不会了。

7. 如何用 JavaScript 实现一个 MVVM？
   回答了 Vue 双向数据绑定的原理，还是那三个模块。

8. Object.defineProperty 的缺陷是什么？

9. 对 Diff 算法的理解？

10. 对 GraphQL 的理解？

11. 对 PWA 的理解？

12. DNS 解析原理？

13. CDN 请求过程？

14. Http1.0 和 Http2.0 的区别？

15. 有三道门分别为 a、b、c，其中只有一道门是正确的。路人甲打算选择 a 门进入，路人乙说 c 门是错误的，并且路人乙没有说谎。问路人甲应该重新选择另一扇门进入吗？

我人都懵了。既然 c 门是错误的，那么 a 门和 b 门各自正确率不都是 50% 吗？那选 a 还是选 b 不一样吗（泣不成声.jgp）

解析看这里。

16. 水平垂直居中的方法有哪些？

小结

总结下这次面试吧，自我感觉挺糟糕的。不管是在我玩阴阳师时突击面试带来的紧张感、面试过程中两三次没听清楚面试官的问题，还是好些问题回答不上来。通过本轮面试暴露的知识点漏洞有：

• 对 GraphQL 认识不足，延伸出去的还有 Service Worker、Severless、Webassembly 等新技术、我都只是旧闻大名而已，没有具体了解它们应用。

• 简历中有个老项目用到了 JQuery，导致面试官问了 JQuery 相关的几个问题，而我都没能答上来。该考虑之后把这个老项目从简历中除名，避免给自己挖坑了。

• 性能优化成体系的归纳整理，包括对简历上写的项目的性能优化思考。（这已经在 TODO 列表里了，然而还没开始）以及具体的业务场景缺少实战经验，比如上文说到的图片懒加载问题。

• 概率题直接跪了。

腾讯 csig 三面

5.14，早上二十多分钟的腾讯会议面试（不用开视频）

1. 挑一个做过的项目来说说中间遇到过什么问题以及是如何解决的。

2. 在实习过程中，遇到了项目中使用到的自己不会的技术，是怎么学习的？遇到问题怎么解决？

3. 实习前后你觉得有什么变化吗？

小结

本来以为是 HR 面，因为邮件上写着面试时间是十点半到十一点，结果是技术三面。不过好在面试官也没问技术问题，都是在问我项目中遇到的问题和解决方法。因为简历上的个人项目都是很早之前了，已经忘得七七八八。所以就挑了在字节实习的项目来说，结果几乎就变成了我一直在谈我在字节这半年来的一些简要实习经验。还好之前在字节的时候已经准备了转正答辩的 PPT，对这半年的实习经历已经有过一些总结，包括做的工作、遇到的问题，这次就直接排上用场了。而且之前也在公司写过一些需求的技术文档，对做需求过程中遇到的一些难点和对应的原理、解决方案有过整理，所以这次面试就回答地很顺了，基本上都是我在说，面试官在听。

腾讯 csig HR 面

5.16，三十多分钟的腾讯会议视频面

5.15 晚上先来电话约面试

1. 前面几轮面试感觉怎么样，自我发挥如何？

2. 对投递的这个部门了解吗？

才发现我被调到了 pcg 腾讯看点的部门，投递时的意向事业群我选的是 csig。

3. 选择公司时，会看中哪些点？

4. 在接手项目的时候，有什么困难点吗？

技术面也会被问到这个问题，但 HR 也不懂相关技术。所以 HR 面中遇到这个问题最好不要谈技术难题，而是要尽量突出自己上手一个项目时的综合能力。

5. 如果现在再来一遍，你会怎么做来更好地接手项目？

6. 在学校成绩怎么样？

7. 职业规划是怎么打算的？

8. 对工作内容有什么目标吗？

9. 有直系亲属在腾讯工作？

10. 打算考研吗？

11. 有投递其他公司吗？自我感觉怎么样？

对我投递的深圳阿里的那个部门怎么看的？

12. 如果拿到了腾讯的 offer，字节那边是怎么打算的？

13. 在字节实习过程中，自己担任了什么角色？

14. 体检结果怎么样？

15. 如果面试通过了有什么打算？面试不过的话怎么打算？

16. 腾讯和字节怎么选择？

5.22 收到了 offer call ~

结语

阿里面试挂了后，腾讯又长期没有通知面试，本来都以为春招要 0 offer 了，没想到五月多了腾讯还在捞人，所以也就捞到了春招的唯一一份 offer~

打算六月十号左右就过去实习，先实习上两个多月后申请转正答辩。如果转正不了的话才能早点出来准备秋招，免得拖得太晚时间和秋招冲突了。