抖音前端实习面试经历：大二学生的一面通关记

背景介绍

先说说我自己的情况吧。我是某985高校计算机专业大二学生，大一的时候自学了前端，从HTML/CSS一路学到React，期间做了两个个人项目放在GitHub上。说实话，投抖音前端实习的时候我心里完全没底——毕竟我才大二，身边投实习的基本都是大三甚至研究生学长学姐。

但我想着，反正投了也不亏，大不了就是被拒嘛。于是在抖音校招实习通道开放的第一天就投了简历，岗位是前端开发实习生。没想到大概一周后就收到了面试邀请，当时激动得差点从椅子上跳起来。

面试安排的是线上视频面，用的飞书会议。面试官是一位看起来很年轻的小哥，后来知道是抖音电商部门的前端开发。整场面试大概55分钟，节奏紧凑但不压迫，体验还是不错的。

面试流程复盘

自我介绍环节（约3分钟）

面试官让我先做个自我介绍。我提前准备了一个1分钟左右的版本，重点说了技术栈和项目经历。这里建议大家自我介绍不要太长，突出重点就行，面试官后面会根据你的介绍来追问。

CSS布局部分（约10分钟）

面试官先问了CSS布局相关的问题，这部分我回答得还算顺利。

问题1：flex和grid布局的区别是什么？分别适合什么场景？

我说flex是一维布局，适合单行或单列的排列；grid是二维布局，适合复杂的行列交叉布局。然后举了个例子，比如导航栏用flex就很方便，而整个页面的栅格布局用grid更合适。面试官追问了flex的常用属性，我提到了justify-content、align-items、flex-grow、flex-shrink这些，还特别说了flex: 1其实是flex-grow: 1、flex-shrink: 1、flex-basis: 0%的简写。

问题2：如何实现一个元素水平垂直居中？

这个太经典了，我说了四种方式：flex的justify-content + align-items、grid的place-items: center、绝对定位+transform、绝对定位+margin auto。面试官点了点头，没有继续追问。

JavaScript基础部分（约15分钟）

这部分问得比较深，也是我觉得最有挑战的环节。

问题3：说说你对闭包的理解。

我说闭包就是函数能够访问其外部作用域的变量，即使外部函数已经执行完毕。然后举了个经典的计数器例子。面试官追问：闭包会导致什么问题？我说内存泄漏，因为被引用的变量不会被垃圾回收。他又问怎么解决，我说手动将引用设为null。

问题4：原型链是什么？

我从__proto__和prototype的关系讲起，说了对象通过__proto__指向其构造函数的prototype，一直往上直到null。面试官让我画了一下原型链的图，我就在纸上画了obj -> Foo.prototype -> Object.prototype -> null这条链。他还问instanceof的原理，我说就是沿着原型链查找右边构造函数的prototype是否在左边对象的原型链上。

问题5：var、let、const的区别？

这个比较基础，我说了var有变量提升、let和const有块级作用域、const声明后不能重新赋值。面试官追问const声明的对象能不能修改属性，我说可以，因为const保证的是引用地址不变，不是值不变。

React基础部分（约10分钟）

问题6：React中key的作用是什么？

我说key帮助React识别哪些元素发生了变化，在diff算法中用来提高复用率。如果用index作为key可能会出问题，比如列表重新排序时会导致不必要的渲染甚至bug。面试官追问了具体什么bug，我说了比如删除列表项时可能把状态绑定到错误的元素上。

问题7：useState和useEffect的执行时机？

我说useState在组件渲染时初始化state，后续调用返回最新值；useEffect在DOM更新后异步执行，相当于componentDidMount + componentDidUpdate + componentWillUnmount的组合。面试官还问了useLayoutEffect和useEffect的区别，这个我答得不太好，只说了useLayoutEffect是同步执行的，在DOM更新后立即执行，可能会阻塞渲染。

手写代码部分（约12分钟）

问题8：手写防抖函数。

这个我准备过，写起来还算顺利。核心思路就是每次调用先clearTimeout，然后重新设置一个定时器。面试官让我解释一下代码，我说了防抖的原理是只在最后一次触发后的延迟时间到了才执行，适合搜索框输入这种场景。

问题9：手写节流函数。

节流我也写出来了，用的是时间戳的方式。核心是记录上一次执行时间，如果当前时间减去上次执行时间大于间隔就执行。面试官问防抖和节流的区别，我说防抖是等最后一次，节流是固定间隔执行一次。

算法部分（约5分钟）

问题10：LeetCode 1 两数之和。

这道题太经典了，我直接用哈希表的方式写出来了，时间复杂度O(n)。面试官让我说了下思路，我说遍历数组，对每个元素检查target - nums[i]是否在哈希表中，如果在就返回两个索引，不在就把当前元素加入哈希表。

真题汇总

1. flex和grid布局的区别及适用场景

2. 元素水平垂直居中的多种实现方式

3. 闭包的概念、应用场景及内存问题

4. 原型链的原理及instanceof的实现

5. var、let、const的区别

6. React中key的作用及使用index作为key的问题

7. useState和useEffect的执行时机

8. useLayoutEffect和useEffect的区别

9. 手写防抖函数

10. 手写节流函数

11. 两数之和（LeetCode 1）

心得建议

1. 基础真的很重要。这次面试虽然没问特别难的问题，但每个知识点都问得比较深入。比如闭包不只是概念，还要知道内存泄漏的问题；原型链不只是说一句话，还要能画图、能解释instanceof。所以学基础的时候一定要理解透彻，不能只背概念。

2. 手写代码一定要练。防抖节流这种高频手写题，光看懂不够，必须能手写出来。建议大家在面试前至少把常见的20道手写题都写一遍，形成肌肉记忆。

3. 算法不要怕。实习面试的算法题一般不会太难，像两数之和这种easy题出现的概率很高。把LeetCode hot 100的easy和medium刷一遍基本够用了。

4. 项目经历要准备好。虽然这次面试没怎么深挖项目，但自我介绍的时候面试官明显对我的项目感兴趣。建议大家准备2-3个有亮点的项目，能说清楚技术选型、遇到的难点和解决方案。

5. 大二也可以投实习。不要觉得自己年级低就不敢投，很多公司对实习生的基础要求没有想象中那么高。只要基础扎实、有项目经历，大二拿实习offer完全有可能。

FAQ

Q：抖音实习面试一般几面？

A：前端实习一般1-2面技术面，我这次只有一面就拿到offer了，可能是因为实习岗位的要求相对低一些。

Q：面试用的什么平台？

A：飞书会议，视频面试。代码是在飞书的在线文档里写的，不是LeetCode那种在线编辑器。

Q：没有实习经验能过吗？

A：能。我之前没有任何实习经历，主要靠项目和个人技术博客。面试官更看重基础和潜力。

Q：面试结果多久出？

A：我面完大概3天就收到HR电话了，效率还是挺高的。

Q：大二实习和大三实习有什么区别？

A：基本没有区别，面试流程和考察内容是一样的。大二的优势是时间更充裕，劣势是课程可能还没学完，需要自己补基础。