我的字节跳动面经/工作体验——实习抖音前端开发岗

字节的总体福利和人文关怀感觉还是很不错的，和之前小米的一个很明显区别是实习生能享受到的福利更多了，
比如相同的工卡、夜间打车、租房补助、内购优惠等等，实习生与正式员工基本就没有区别了。
基本的福利是四餐免费（三餐+下午茶送到工位），自助餐按需分配，零食饮料都能随便拿，
这些在网上都能找到视频介绍（包括薪资，感兴趣的可以了解一下），对比小米的完全不够吃的餐补确实是质的飞跃。
配的工作机是全新顶配 mbp16，另外申领了 4k10bit 的显示器，想了想之前在 mi 用的身经百战的 mibook air，懂的都懂 2333

字节与心脏，只有一个能跳动？？至少我不这么觉得——
我所在的部门与团队总体体验还是很好的，Leader 强调七点下班、周末与节假日不加班，无打卡考勤，本人平时早 10 晚 8，去掉午休与用餐的 2h，一天就是 8h 工作时间。
遇到什么不明白的无论是技术上的还是制度与流程上的，问 mentor 或者直接往上级问沟通都很融洽，大家都以同学相称，没有等级 gap。
这边前端的业务 TOB 和 TOC 都有，单纯的写页面、BFF 调库的需求很少，其实十分的偏全栈，不少需求都是需要直接从架构设计开始，和数据库打交道的。
做的东西不少可以直接被所有抖音 app 用户感知——其实客户端除了基础的底层框架，大部分页面都是基于网页的，具体的这里就不细说了。
现有的技术解决方案都挺完善了，上到脚手架、UI 组件库、LowCode 平台，下到代码托管包源管理、CI/CD 敏捷开发等等，内网都有一套十分健全的内部平台与使用文档。
新人上手也相对较快，第一周读读文档、做做 Landing 任务，第二或者第三周就可以直接开始上手写代码、跟需求，不会做就学，学会了接着做，感觉确实是有一定挑战性，能学到不少东西的。
令我感到比较惊奇的是我入职第三周就参与到了个重要的需求，那些说大厂实习都是在打杂，学不到东西的，这一通经历下来我反正是肥肠不认可的。

一面（约 40min

1. 介绍项目

2. jwt 在项目中的具体实现，必要性？为什么不用微信 API 的鉴权？ （答官方文档建议开发者自定登录态）

3. tcp 与 udp 区别？应用场景？

4. get 与 post 区别，应用场景？在项目中的使用？

5. http 缓存控制，协商缓存？

6. https 如何保证安全的？加密方式？公私钥交换过程？

7. 跨域是什么？产生条件？在微信小程序中的运用？解决了什么？

8. jsonp 有了解过吗？ （答没有什么了解，之前看到跨域解决方案的时候有看到过对比，没有深入了解，熟悉的是 cors 和 nginx 反向代理。然后也没有追问下去了）

9. 看输出，解释原因

   // 1.局部作用域与全局作用域
   let val = 1;
   function foo() {
     console.log(val);
   }
   function bar() {
     let val = 2;
     foo();
   }
   bar();
   
   // 2.this指向
   window.name = "ByteDance";
   function A() {
     this.name = 123;
   }
   A.prototype.getA = function () {
     return this.name + 1;
   };
   let a = new A();
   let funcA = a.getA;
   console.log(funcA());
   // 解释完上面答下面这种情况
   console.log(a.getA());
   
   // 3.this指向(call)
   const obj = {
     birth: 1990,
     getAge(year) {
       let fn = (y) => y - this.birth;
       return fn.call({ birth: 2000 }, year);
     },
   };
   console.log(obj.getAge(2020));
   
   // 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(() => {
     console.log("setTimeout");
   }, 0);
   async1();
   new Promise(function (resolve) {
     console.log("promise1");
     resolve();
   }).then(function () {
     console.log("promise2");
   });
   console.log("script end");
   

10. 算法：栈模拟队列 剑指 Offer 09. 用两个栈实现队列 - 力扣（LeetCode） (leetcode-cn.com)

二面（约 70min

1. 介绍项目，看项目后端中某个具体功能的具体代码（图片上传与处理）

2. 实习经历？ （简历上写的 hr 岗怎么就整开发了呢？噢，原来是用 python 编写脚本、使用文档，提升部门某项重复性耗时工作的工作效率）

3. 浏览器不同标签页面通信？同源、跨域情况下？ （可能我一直都没答到点子上，一直让我说有没有其他的方案，说了好几个能想到的，包括 storage api,server 侧配合 websocket 甚至外部应用程序

4. localStorage，sessionStorage 区别？

5. css 实现三角形！ （我答的 transform: rotate(45deg)然后在父元素 overflow: hidden，插问了 rotate 的旋转中心怎么确定。总之是没答到正解 border 的点子上）

6. css position 属性有哪些？区别是什么？详细说说 fixed 的定位方式？

7. 看输出，解释原因

   //1也是关于this的，还有闭包，和一面差不多
   
   //2. 作用域？变量提升？
   for (var i = 0; i < 5; i++) {
     setTimeout(() => {
       console.log(i);
     }, 0);
   }
   //3也是关于event loop的，和一面的执行顺序差不多，让具体解释了一下宏任务和微任务
   

8. 算法：查找 json 中的 children 路径 现有如下 json（简化为对象），已知每个节点 id 唯一，编写 findNode(id)，返回路径，如 findNode(5) 输出 1->4->5 （直接 DFS 就行，当时一下没想好回溯写了半天没写对，面试结束后两分钟搞定了）

   {
     "id": 1,
     "children": [
       { "id": 2, "children": [{ "id": 3, "children": [] }] },
       {
         "id": 4,
         "children": [
           { "id": 5, "children": [] },
           { "id": 6, "children": [] }
         ]
       },
       { "id": 7, "children": [] }
     ]
   }
   

9. 算法：合并两个有序数组88. 合并两个有序数组 - 力扣（LeetCode） (leetcode-cn.com)，要求时间 O(m+n)。 改进：输入的两个数组各自有序，有可能分别是升序，降序情况

三面（约 40min

1. 项目整体设计思路与逻辑、架构 （感觉很棒的是面试官从项目本身的需求出发，一起探讨了项目的设计和方向，还给项目提出了建设性意见，而不是模板式的让我说有什么难点、解决方案）
2. 前端是怎么学的？
3. promise 原理与实现 （我答了发布订阅模式的实现方法，说逻辑没让写代码）
4. 那已经有发布订阅模式了，为什么还要 promise （我答 promise 是用这个模式来解决异步回调地狱问题 balabala，扯到了事件循环）
5. 事件队列保存在哪？执行栈呢？

HR 面（约 20min

时间不长，主要聊了爱好、为什么选择前端？学习方法？之前的实习经历的工作？读不读研、职业规划？可以实习的时间，公司待遇方面的介绍。

我投简历的时间是 21 年 10 月中旬（大三上），是一个学长给了内推。我当时没有海投，就只投了字节，之前也没有过研发岗相关的实习经历。投递当天 hr 就来和我约面试了。本来希望约到 12 月中，打算在期末考试前完成面试，如果 oc 的话考完后入职。但学校政策调整提前考试，而且假期不让住校了，我也就把一面的时间一直推迟到了 1 月末。总共的准备时间大概是两个月的刷题背八股、复盘项目。
这里需要注意的是虽然可以自拟时间面试，但是字节 HR 的系统里面试只能约一个月内的日期，也就是每次最晚只能拟订在一个月后，HR 给出的方案是每个月在拟订日期前两天和她沟通，续日期。我这约了三个月后，所以改了三次时间，感觉挺不好意思的了。
面试的话是全程线上，用飞书视频会议。看输出题和算法题用了内部的网页平台，还有飞书会议内嵌的，和 leetcode 差不多，左边是题目和描述，右边有代码编辑区和输出控制台，可以自行选择做题语言，面试官是能看到编辑区的代码的，你也能看到他的光标，类似云文档，方便随时交流。
一面结束后面试官说 2-3 个工作日给回复，实际上当天傍晚 hr 就来和我约二面了；二面结束的时候，本来面试官想直接让我接着三面，可惜也比较晚了，三面 leader 没能到，就让我到时等通知了，第二天 hr 跟我约的三面；三面结束第二天 hr 就来和我约 hr 面了。hr 面结束后隔天就收到了 offer call。不算节假日的话，面试推进的效率其实非常高，隔天面，一周左右就能搞定四次面试。
就我面的字节抖音前端来说，完全没问前端框架方面的东西。不过还是建议准备的时候学一下 react，和字节的技术栈更相关，应该可以是加分项。
一面的时候涉及到了不少 http 协议相关的内容，反问环节面试官建议我看多一些 HTTP 方面的资料和书，表示今后要经常和 http 打交道的。
三面是 leader 面，我在回答怎么学习的前端的时候，表示我是跟着 b 站视频的学习路径，对着官方文档（如 mozilla MDNJavaScript MDN (mozilla.org)，vue 框架文档介绍 Vue.js (vuejs.org)），完成学习路径里的一些实践项目，边做边学的。面试官就问有没有看过书，我回答学习前端的时候没有看过，他表示还是需要系统学习，弄明白 js 引擎的特性和框架的原理，还是得看书来学的，我存在的问题就是求快，求会用就行。 我有幸能入职实习也确实是有一定运气成分，目前部门比较缺人，能看出来题目的难度相比网上的其他面经确实有所下降。

我目前的面试经历也不算丰厚，但结合前辈们的资料和自身实战经历，还是能总结出些受用的点的：
简历不仅仅是用来过简历筛的，更重要的是引导面试官的提问，面试官想在短时间内了解你的技术栈，以及得出你对这个技术掌握到什么程度，简历中项目经历的技术细节越多提问方向就越明确了。切忌为了饱满而在简历里堆料，只了解过或者听说过的玩意就别往上写，前边还加个”精通”，写了的基本都会问到，一问三不知会使面评大打折扣，如果算法之类的题目再答不出来，那就是纯纯的送人头了 orz 基于此，如果你在回答某个问题的时候，说了另一个东西，面试官就很有可能接着朝着这个方向问，探究你到底掌握到什么程度。所以不懂的技术尽量不要说出来给自己挖坑，或者可以反其道而行，假装不经意提起你熟悉的东西来引导提问。
就大厂实习来说，我觉得上面的题目，或者是网上其他岗位的面经，至少要能答出个七成左右才能算是有所准备吧。基础知识还是相当重要的，项目经理再丰富那也只是锦上添花，引导提问，技术面真正考察的还是对基础的掌握程度。没有准备好千万不要急于投简历，各大厂都会有自己的”人才库”，给自己攒下来的黑面评可能对以后再投产生影响。

几个准备面试有用的网站：（我是两个月靠这些速成了

算法系统学习（leetcode 刷题顺序）：代码随想录 (programmercarl.com)

面试抱佛脚（真的好多原题）：

算法常考题：CodeTop 企业题库 前端/全栈八股常考题：web 前端面试 - 面试官系列 (vue3js.cn) 牛客前端面经：前端工程师精选面经汇总校招实习社招牛客网_牛客网 (nowcoder.com)