前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。专栏快速地址温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司字节跳动-抖音面试时间4月27日下午2点时长50分钟面试岗位前端暑期三面面试体验回答感觉不好可能要折戟暑期最后一次面试❓面试问题自我介绍为什么选择前端方向你现在最熟悉、最常用的是哪个 AI 模型你平时除了用 AI 写代码还会怎么用 AI流式响应和普通请求响应的主要区别是什么为什么你的 AI 对话项目选择用 SSESSE 相比普通请求模式有哪些优点和缺点AI 对话这种高频流式返回场景前端会遇到哪些性能问题你是怎么做 SSE 渲染性能优化的requestAnimationFrame在你的优化方案里是怎么用的列表和数组这两种数据结构在“判断某个值是否存在”这个场景下应该选哪个从底层存储和缓存角度看数组和链表有什么差别为什么你会觉得链表更快你的依据是什么一个数组里取最大的 K 个数怎么做如果不用排序最大的 K 个数还能怎么做手撕快排100 个人里有 1 个带病毒的人只有 2 张试纸怎么尽量少检测次数找出来来源牛客网 前端死了咩木木有话说刷前先看目前在大厂里我个人认为字节的前端面试题是综合性最强的。如果不考虑定向做一些音视频、可视化、基建等业务内容。建议大家重点刷字节的面试题。相关覆盖度比较高其他大厂也能遇到相同或类似的题目。 字节抖音前端三面·深度解析面试整体画像维度特征面试风格开放提问型 底层追问型 场景推演型难度评级⭐⭐⭐⭐⭐五星底层结构算法智力题考察重心AI对话流式优化、数据结构底层、Top K算法、逻辑推理特殊之处围绕“AI对话项目”深挖流式渲染性能追问数据结构CPU缓存特性逐题深度解析八、AI对话高频流式返回场景前端会遇到哪些性能问题回答思路从渲染、内存、网络三个维度分析。主要问题渲染压力每个chunk都触发DOM更新高频重绘导致掉帧内存累积长对话消息内容不断增长内存占用越来越高布局抖动流式内容高度变化如代码块展开引发频繁重排事件循环阻塞大量同步渲染任务阻塞用户交互Markdown解析开销每收到chunk都重新解析全文CPU占用高// 问题示例每次收到chunk都全量渲染source.onmessage(e){fullContente.data messageDiv.innerHTMLmarked.parse(fullContent)// 性能灾难}九、你是怎么做SSE渲染性能优化的回答思路从节流渲染、增量解析、虚拟滚动、硬件加速四个方向。优化方案问题优化方案高频渲染使用requestAnimationFrame节流合并多个chunk全量解析增量解析Markdown只处理新增部分内存增长限制历史消息数量超出时压缩或摘要布局抖动给动态内容预留占位固定高度代码块闪烁缓存代码块片段完整后再高亮// requestAnimationFrame 节流渲染letpendingContentletrafIdnullsource.onmessage(e){pendingContente.dataif(rafIdnull){rafIdrequestAnimationFrame((){messageDiv.innerHTMLmarked.parse(pendingContent)rafIdnull})}}十、requestAnimationFrame在你的优化方案里是怎么用的回答思路requestAnimationFrame用于合并高频更新与浏览器刷新率同步。使用方式letupdateScheduledfalseletlatestContentfunctiononChunk(newContent){latestContentnewContentif(!updateScheduled){updateScheduledtruerequestAnimationFrame((){render(latestContent)// 每帧最多渲染一次updateScheduledfalse})}}为什么用它与浏览器绘制同步避免多余渲染自动适配刷新率60Hz/120Hz比setTimeout更精确比setInterval更节省资源十一、列表和数组判断某个值是否存在选哪个答案数组确切地说是以数组实现的哈希集合如Set。原因数组查找是O(n)需要遍历哈希集合如Set查找是O(1)但如果特指普通数组 vs 链表数组的CPU缓存局部性更好十二、从底层存储和缓存角度看数组和链表有什么差别核心差别维度数组链表内存布局连续内存块非连续节点分散CPU缓存缓存友好空间局部性缓存不友好跳转访问随机访问O(1)O(n)插入/删除O(n)需移动元素O(1)已找到位置CPU预取特性数组连续存储加载一个元素时相邻元素也会被加载到缓存行Cache Line通常64字节。遍历数组时大部分数据已在缓存中速度快。链表节点分散每次访问可能都要从主存读取。十三、为什么你会觉得链表更快常见误解纠正链表在插入/删除操作已找到位置时O(1)比数组O(n)快。但在遍历查找场景下数组因其缓存连续性通常更快。面试官意图考察你是否理解CPU缓存对性能的影响而非只看时间复杂度。十四、一个数组里取最大的K个数怎么做方案1排序后取前K个functiontopKBySort(arr,k){returnarr.sort((a,b)b-a).slice(0,k)}时间复杂度O(n log n)方案2部分排序冒泡K次functiontopKBubble(arr,k){for(leti0;ik;i){for(letj0;jarr.length-i-1;j){if(arr[j]arr[j1])[arr[j],arr[j1]][arr[j1],arr[j]]}}returnarr.slice(-k)}时间复杂度O(n*k)当k很小时效率高十五、如果不用排序最大的K个数还能怎么做方案小顶堆推荐functiontopKHeap(arr,k){constheap[]for(constnumofarr){if(heap.lengthk){heap.push(num)if(heap.lengthk)buildMinHeap(heap)}elseif(numheap[0]){heap[0]numheapify(heap,0)}}returnheap}functionbuildMinHeap(heap){for(letiMath.floor(heap.length/2)-1;i0;i--){heapify(heap,i)}}functionheapify(heap,i){constnheap.lengthletsmallesticonstleft2*i1constright2*i2if(leftnheap[left]heap[smallest])smallestleftif(rightnheap[right]heap[smallest])smallestrightif(smallest!i){[heap[i],heap[smallest]][heap[smallest],heap[i]]heapify(heap,smallest)}}时间复杂度O(n log k)空间复杂度O(k)适合k远小于n的场景。十六、手撕快排functionquickSort(arr){if(arr.length1)returnarrconstpivotarr[0]constleft[]constright[]for(leti1;iarr.length;i){if(arr[i]pivot)left.push(arr[i])elseright.push(arr[i])}return[...quickSort(left),pivot,...quickSort(right)]}// 原地排序更省内存functionquickSortInPlace(arr,left0,rightarr.length-1){if(leftright)returnconstpivotIndexpartition(arr,left,right)quickSortInPlace(arr,left,pivotIndex-1)quickSortInPlace(arr,pivotIndex1,right)}functionpartition(arr,left,right){constpivotarr[right]letileft-1for(letjleft;jright;j){if(arr[j]pivot){i[arr[i],arr[j]][arr[j],arr[i]]}}[arr[i1],arr[right]][arr[right],arr[i1]]returni1}十七、100人带病毒2张试纸怎么最少检测次数找出病毒携带者经典二分/分组思路不是二分法而是分组检测。最优方案将100人分成两组每组50人用两张试纸分别检测两组混合样本最多需要7次50人组内二分约6次 初始2次 8次实际上最优可达更少更优的“二进制法”给每个人编号0-99用二进制表示7位足够按二进制位分组第i位为1的人为一组用第i张试纸7张试纸即可唯一确定携带者但题目只有2张需优化2张试纸的优化方案分组检测第一轮将100人分成若干组用第一张试纸检测各组混合样本第二轮锁定小组后用第二张试纸在该小组内逐一检测最少次数将100分成约10组每组10人第一轮10次第二轮最多10次 → 最坏20次更好的方案平方根分组第一轮√10010组第二轮10人最坏20次最优解15次左右组合检测优化思路将100人排成10*10矩阵 第一张试纸检测每行的混合样本10次 第二张试纸检测每列的混合样本10次 交叉点即病毒携带者 最坏情况20次但可优化到最坏15次面试官预期看到你能否从二分法延伸到分组检测体现逻辑思维。知识点速查表知识点核心要点流式渲染性能高频DOM更新、内存累积、布局抖动、Markdown解析优化方案rAF节流、增量解析、虚拟滚动、固定占位rAF作用与刷新率同步合并帧内更新数组vs链表连续内存/非连续、缓存友好/不友好、预取特性Top K排序O(n log n)、小顶堆O(n log k)快排分治、选基准、原地排序病毒检测分组检测、矩阵法、二进制编码 最后一句字节抖音这场三面是一场“计算机科学基础”的深度检阅。从流式渲染的rAF优化、到数组链表的CPU缓存特性再到Top K小顶堆、快排实现最后是分组检测的智力题面试官层层递进考察的不仅是会不会写代码更是是否有扎实的CS底层思维。能走到三面说明你已经具备了解决问题的能力剩下的只是运气和缘分。愿每一位走到这里的人都能等来那个“Congratulations”