【前端】腾讯TME秋招凉经

字节跳动Data AML部门前端实习一面面经本次面试时长1小时，主要涵盖项目经历、技术原理、基础知识和算法编程等方面，具体内容如下：一、项目经历面试官首先询问了实习项目相关内容，围绕项目背景、技术实现、遇到的问题及解决方案展开交流，考察对实际项目的参与度与理解深度。二、Suspense原理及实现1. 原理：Suspense 是 React 用于处理异步渲染的组件，可在数据加载或组件渲染完成前展示加载指示器，提升用户体验。2. 实现方式：被问到在 useEffect 中存在 fetch 请求时，如何让顶层组件感知组件存在异步请求。回答可通过 React Context 实现信息透传，但存在更优方案，可从 React 的新特性或状态管理库角度进一步优化 。三、JS基础1. var、let和const的区别：var 存在变量提升，会导致变量在声明前可被访问；let 和 const 具有块级作用域，更加安全。2. var逐渐被弃用原因：var 没有块级作用域，在复杂代码中容易引发变量覆盖等意外问题，使用 let 和 const 可避免此类风险，提高代码的可读性和稳定性。四、CSS基础1. 三列瀑布布局（两边固定，中间自适应）：纯CSS可通过浮动或绝对定位实现；使用flex布局更优雅，flex: 1 表示该元素会自动分配剩余空间。2. flex常用属性：主要涉及主轴和横轴方向设置，如 flex-direction 定义主轴方向；常用的居中属性包括 justify-content: center（主轴居中）和 align-items: center（交叉轴居中） 。3. CSS动画：通过 animation 属性实现，配合关键帧 @keyframes 定义动画的起始和结束状态、变化函数（如线性变化）以及时间等参数。animation 在渲染进程的合成线程执行，不会阻塞JS执行，效率较高。五、算法编程题1. 合并有序链表// 定义链表节点结构function ListNode(val, next) {this.val = (val === undefined? 0 : val);this.next = (next === undefined? null : next);}var mergeTwoLists = function(l1, l2) {const dummy = new ListNode(0);let current = dummy;while (l1 && l2) {if (l1.val < l2.val) {current.next = l1;l1 = l1.next;} else {current.next = l2;l2 = l2.next;}current = current.next;}current.next = l1 || l2;return dummy.next;};2. 二叉树寻找公共父节点（节点有parent指针）function lowestCommonAncestor(p, q) {const set = new Set();while (p) {set.add(p);p = p.parent;}while (q) {if (set.has(q)) {return q;}q = q.parent;}}3. 实现sum函数curry化

了解背景自我介绍拷打实习哪个部门，哪个团队，团队有多少人你主要负责哪个模块接口迁移的背景和原因是什么接口迁移的架构是怎么样的新服务领域模型是怎么样的接口的 QPS 是多少，有高并发问题吗对账系统怎么做的为什么需要用到 Redis分布式锁怎么设计，详细说说MQ 是怎么使用的八股文Redis 的基本数据结构Redis 的持久化方式详细说说 AOF Redis 的过期淘汰策略有哪些LRU 怎么实现的前端发起一个请求，整个链路是怎么样的，到后端服务之后，会怎么进行，按你实习时候看到的东西详细说说TCP 和 UDP的区别为什么说 TCP 面向连接TCP 和 UDP 会有什么应用场景HTTP 请求怎么做幂...

没有自我介绍，直接从项目开始结合八股开始介绍一下项目1. 你对 React 底层有了解过吗我以为这是在问我有没有看过 React 源码，开始还有点想放弃回答的，后来我硬着头皮开始讲声明式编程，组件化之类的。。。突然觉得不管怎么样，我觉得都可以讲讲和这些东西沾点边的，起码让面试官了解你知道什么吧哈哈（仅个人观点）2. 讲讲 React 的生命周期3. 刚才你在讲生命周期时提到了 useEffect 依赖数组不为空的情况，如果我想进行数据请求这些操作应该怎么处理依赖数组呢4. 那么你还用过什么其他的 hooks 吗5. useCallback 和 useMemo 之间的区别6. 组件之间的通信我只讲了父组件向子组件之间的 props 传递和状态提升进行子组件之间同一变量状态的同步7. 那么如果我不想使用状态提升应该怎么办呢我说可以使用 forwardRef 和 useImperative hooks 来实现将子组件中特定 DOM 元素暴露给父组件还有一些状态管理工具 zustand,Redux8. 有使用过 Redux 吗9. 你的项目中有使用过 antd，讲讲你对它的一些看法这里有点尴尬了，我一直以为只能`npm install antd`将所有的组件的下载，但是面试官说我玩的不够溜实际也可以向 Shadcn UI 一样实现按需下载10. 你的 webpack 是怎么配置的，是使用了默认配置吗，还是使用了自己的配置呢11. 你是如何实现的自动化部署呢（这个问题我觉得还挺频繁的，基本只要看了我的简历的面试官都问了，得仔细总结一下这个问题）12. 你使用过 vite 和 webpack，这两者你觉得有什么区别呢我个人只从了开发环境下和一些其他小的方面的区别进行讲述，后来面试结束觉得可以再深入讲讲13. 你写到你会 flex 讲讲 flex 的一些常见属性14. 我有一个盒子，左侧元素在屏幕缩放时不变，右侧元素会按照缩放而变化15. Sass 的使用感受16. Sass 中样式的深度嵌套应该怎么写（应该是好奇发问，面试官应该没用过 Sass）17. 使用过的 git 的常见命令18. 合作开发中遇到冲突怎么解决19. git rebase 和 git merge 之间的区别20. 你为什么会觉得 git merge 会比 git rebase 更适合合作开发21. 你做过一些外包项目，这些项目是什么Hugo,PHP 然后面试官听到我写过 PHP 再那里笑了好久：“哈哈哈，PHP，世界上最好的语言”貌似没了，然后写了一道很简单的算法这几次面试下来，我觉得我自己在知识方面上有进步之外，我也渐渐体会到了如何去把握面试节奏，面试不应该是一场严肃的知识问答而是一场畅快的技术交流。要去引导面试官问你会的问题，可以在对一个问题的讲解时将另一个（你熟悉的）知识点进行相关联，这样的话大概率面试官会去你问你提到的另外一个知识点，来把握面试节奏。当然我还是一个小白，只是将自己的理解分享，也希望给大家带来帮助

1. 自我介绍2. 为什么参与开源项目（vtable）3. git使用情况4. git merge和git rebase区别5. 拷打项目6. 为什么做性能优化，怎么判断的性能优化，收益是什么7. 收益是怎么量化的8. 怎么优化反映全部用户的性能9. lighthouse关注哪些指标10. 这个指标包含接口请求吗11. 优化的性能具体源自于哪一部分12. 性能数值绝对值变化是多少13. 网络传输占比大还是前后端请求？14. 前端页面实际上是有缓存的，怎么对二次打开此页面的用户进行性能优化15. 平常怎么学习，看哪些前端文章16. 为什么有时候height：50%不生效（前端文章提及）17. 手...