前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。专栏快速地址温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司TME QQ音乐面试时间4月22日下午3点时长1小时面试岗位前端暑期二面面试体验道心破碎项目深度拷问几乎无八股无手撕❓面试问题自我介绍虚拟列表怎么实现的一道性能指标采集代码找错误用户未回忆出具体代码文件上传是怎么实现的大文件分片上传时计算 5MB 分片 MD5 大概要多久如果文件很大计算完整文件 MD5 很耗时有什么性能优化方案Web Worker 在大文件 MD5 计算里能怎么用服务端保存所有分片索引和分片文件会不会导致碎片文件越来越多分片合并完成后服务端临时分片目录应该怎么清理如果清理了分片下次上传同一个文件还能不能做分片级别的秒传秒传应该基于完整文件 hash 还是分片 hash服务端怎么设计分片管理才能避免既存完整文件又存所有分片造成空间浪费如果两个文件部分分片相同、整体文件不同怎么判断和复用分片歌曲列表页点击歌曲后如何打开一个独立播放页如果播放页已经存在列表页怎么通知已有播放页切换歌曲怎么判断播放页是否已经存在或是否被关闭如何用 LocalStorage 实现跨页面通信如何用 LocalStorage 实现页面间心跳检测LocalStorage 轮询方案有什么性能问题除了 LocalStorage跨页面通信还有哪些更好的方案postMessage 和 Service Worker 怎么用于跨页面通信歌曲列表中大量图片加载时如何先展示占位图图片加载成功后怎么切换为真实图片图片加载失败后怎么展示失败图如何通过图片的 load 和 error 事件判断加载状态你接触过 React Native 或 Flutter 这类跨端技术吗Vite 相比 Webpack为什么开发阶段启动更快Webpack 能不能也配置成使用 ES ModuleVite 的热更新 HMR 是怎么实现的WebSocket 和 SSE 有什么区别来源牛客网 前端死了咩木木有话说刷前先看TME QQ音乐这场二面是一场“实战场景深度拷问”。30个问题中前13题围绕大文件上传/分片/MD5/秒传/服务端设计层层递进后10题围绕跨页面通信/图片加载场景展开最后是工程化基础。面试官显然不满足于“会不会用”而是要考察你在大文件上传、跨页面通信等真实场景下的系统设计能力。用户反馈“道心破碎”可见难度之高。这份面经适合有一定项目经验、准备冲击中大厂的同学反复研读。 TME QQ音乐前端二面·深度解析面试整体画像维度特征面试风格实战场景深挖型 系统设计型 前后端协作型难度评级⭐⭐⭐⭐⭐五星大文件上传设计链路极深考察重心大文件分片上传、MD5计算优化、秒传设计、跨页面通信、图片加载、Vite原理特殊之处无八股无手撕围绕真实业务场景层层追问设计细节逐题深度解析二、虚拟列表怎么实现的回答思路参考之前面经。核心是只渲染可视区域动态计算起始索引。// 核心实现functionVirtualList({items,itemHeight,containerHeight}){const[startIndex,setStartIndex]useState(0)constvisibleCountMath.ceil(containerHeight/itemHeight)consthandleScroll(e){constscrollTope.target.scrollTopconstnewStartIndexMath.floor(scrollTop/itemHeight)setStartIndex(newStartIndex)}constvisibleItemsitems.slice(startIndex,startIndexvisibleCount)constpaddingTopstartIndex*itemHeightreturn(div onScroll{handleScroll}style{{height:containerHeight,overflow:auto}}div style{{paddingTop,height:items.length*itemHeight}}{visibleItems.map(itemdiv key{item.id}{item.content}/div)}/div/div)}四、文件上传是怎么实现的回答思路分片上传 断点续传 秒传。核心流程文件分片Blob.prototype.slice计算文件/分片MD5用于秒传和校验并发上传分片控制并发数服务端记录已上传分片支持断点续传全部分片上传完成后服务端合并五、大文件分片上传时计算 5MB 分片 MD5 大概要多久回答思路取决于设备性能和算法大约20-100ms。现代PC5MB数据约20-40ms移动端/低端设备50-100ms使用Web Crypto API比纯JS实现快2-3倍六、如果文件很大计算完整文件 MD5 很耗时有什么性能优化方案优化方案抽样计算只计算开头、中间、结尾部分数据而非全量增量计算读取文件流边读边更新hash不一次性加载到内存Web Worker在Worker线程计算不阻塞主线程分片复用使用分片MD5完整MD5由分片MD5组合得到采样秒传先快速计算采样hash命中后再计算完整hash// 增量计算示例asyncfunctioncomputeMD5(file){constchunkSize1024*1024// 1MBconsthashernewCryptoJS.algo.MD5()for(leti0;ifile.size;ichunkSize){constchunkfile.slice(i,ichunkSize)constbufferawaitchunk.arrayBuffer()hasher.update(CryptoJS.lib.WordArray.create(buffer))// 更新进度}returnhasher.finalize().toString()}七、Web Worker 在大文件 MD5 计算里能怎么用回答思路将耗时的MD5计算移到Worker线程避免阻塞UI。// main.jsconstworkernewWorker(md5-worker.js)worker.postMessage({file})worker.onmessage(e){console.log(MD5:,e.data)}// md5-worker.jsself.onmessageasync(e){constfilee.data.fileconstmd5awaitcomputeMD5(file)self.postMessage(md5)}优势UI不卡顿用户可继续操作可同时计算多个文件。八~十三大文件分片服务端设计链路8. 服务端保存分片会导致碎片文件越来越多吗会。每个未合并的分片都会占用存储空间尤其是上传中断、未完成合并的分片成为碎片。9. 分片合并完成后服务端临时分片目录应该怎么清理合并后立即删除临时分片定时任务扫描超时未合并的分片如上传中断超过24小时自动删除上传取消时主动触发删除10. 清理了分片下次上传同一个文件还能做分片级别的秒传吗不能。秒传依赖于分片hash分片被删除后无法定位解决方案上传完成后保存分片hash索引合并后保留分片hash记录但不保留分片文件11. 秒传应该基于完整文件 hash 还是分片 hash两者结合完整文件hash用于整文件秒传分片hash用于断点续传和分片级秒传12. 服务端怎么设计分片管理避免既存完整文件又存分片造成空间浪费分片重用完整文件存储后将分片hash指向完整文件的位置引用计数同一分片被多个文件共享时计数管理去重存储分片内容唯一存储文件由分片引用组成13. 两个文件部分分片相同、整体文件不同怎么判断和复用分片分片级去重每个分片独立存储用hash标识文件分片表文件A[hash1, hash2, hash3]文件B[hash1, hash4, hash5]复用逻辑上传分片前检查hash是否已存在存在则跳过十四、歌曲列表页点击歌曲后如何打开一个独立播放页方案window.open(player.html)打开新标签页如果是SPA可以用路由跳转 新标签页十五、如果播放页已经存在列表页怎么通知已有播放页切换歌曲跨页面通信方案LocalStorage storage事件最常用BroadcastChannel现代浏览器推荐postMessage需维护目标窗口引用Service Worker复杂用于离线场景// 列表页localStorage.setItem(play-song,JSON.stringify({id:123,name:稻香}))// 播放页window.addEventListener(storage,(e){if(e.keyplay-song){constsongJSON.parse(e.newValue)playSong(song)}})十六、怎么判断播放页是否已经存在或是否被关闭方案心跳检测播放页每N秒写入LocalStorage时间戳列表页轮询检查超时则认为已关闭BroadcastChannel监听close事件SharedWorker维护活动页面计数十七、如何用 LocalStorage 实现跨页面通信// 发送消息localStorage.setItem(message,JSON.stringify({type:play,data:song}))// 接收消息window.addEventListener(storage,(e){if(e.keymessage){const{type,data}JSON.parse(e.newValue)handleMessage(type,data)}})十八、如何用 LocalStorage 实现页面间心跳检测// 播放页每5秒更新时间戳setInterval((){localStorage.setItem(player_heartbeat,Date.now())},5000)// 列表页轮询检查setInterval((){constlastHeartbeatlocalStorage.getItem(player_heartbeat)if(lastHeartbeatDate.now()-lastHeartbeat10000){console.log(播放页已关闭)localStorage.removeItem(player_heartbeat)}},5000)十九、LocalStorage 轮询方案有什么性能问题问题主线程阻塞storage事件监听本身无性能问题但轮询检查会占用主线程频繁读写高频率写入localStorage会有同步I/O开销不适合高实时性场景延迟约几十毫秒二十~二十一、更好的跨页面通信方案方案优点缺点BroadcastChannelAPI简单低延迟同源限制不支持跨域postMessage双向通信跨域需维护窗口引用SharedWorker可维护状态支持多页面实现复杂Service Worker离线支持可做中转生命周期管理复杂BroadcastChannel示例// 列表页constchannelnewBroadcastChannel(player)channel.postMessage({type:play,song})// 播放页constchannelnewBroadcastChannel(player)channel.onmessage(e){playSong(e.data.song)}二十二~二十五图片加载占位图方案functionLazyImage({src,alt}){const[status,setStatus]useState(loading)useEffect((){constimgnewImage()img.srcsrc img.onload()setStatus(success)img.onerror()setStatus(error)},[src])if(statusloading)returnSkeleton/if(statuserror)returnErrorIcon/returnimg src{src}alt{alt}/}二十七~二十九Vite vs Webpack27. Vite为什么启动更快利用浏览器ESM开发环境不打包直接按需编译预构建依赖esbuild比Webpack快10-100倍28. Webpack能不能配置成使用ES Module能通过experiments.outputModule: true但生态兼容性一般29. Vite HMR怎么实现的基于ESM的HMR只更新变更的模块Webpack HMR需要重新打包相关模块三十、WebSocket和SSE区别维度SSEWebSocket方向单向服务端→客户端双向协议HTTPWS/WSS自动重连内置需手动实现二进制数据需编码原生支持知识点速查表知识点核心要点虚拟列表可视区域渲染、动态起始索引大文件上传分片(slice)、MD5、断点续传、秒传MD5优化Web Worker、增量计算、采样分片服务端设计临时分片清理、分片hash复用、引用计数跨页面通信LocalStoragestorage事件、BroadcastChannel、postMessageLocalStorage心跳定期写时间戳轮询检测超时图片加载load/error事件、占位图/失败图Vite启动快利用ESM不打包、esbuild预构建SSE vs WS单向/双向、协议、自动重连 最后一句TME QQ音乐这场二面是一场“实战场景课”。从大文件上传的分片MD5计算、秒传设计、服务端分片管理到跨页面通信、图片加载、构建工具原理面试官用30个问题构建了一个完整的前端知识体系树。用户感慨“道心破碎”但这样的面试即使挂了也是收获巨大的——它划出了大厂对前端工程师的能力期望不仅要会写代码更要懂系统设计、懂前后端协作、懂性能优化。