前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。专栏快速地址温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司TME QQ音乐面试时间4月24日下午6点55时长23分钟面试岗位前端暑期电话三面面试体验二面觉得太烂了居然过了可能是运气好或排序❓面试问题介绍一下项目里你觉得最有难度的点是什么依旧虚拟列表你平常学习前端开发主要是自学还是参加培训你有做过自己的开源项目或者参与过开源项目研发吗讲一下你后台管理系统里大文件分片上传的完整流程计算文件 hash 本身是强 IO 操作可能会导致卡顿你会怎么优化如果想在 Web 里嵌入 C 的逻辑一般会用什么方式你了解 WebAssembly 吗你接触过 C 或端侧 App 开发吗如果让你实现一个快速排序你会怎么做Web 端常见的持久化机制有哪些TCP 和 UDP 有什么区别HTTP/1.1 和 HTTP/2 的区别是什么HTTP/2 和 HTTP/3 的区别是什么Web 上实现动画一般有哪几种方式你了解 Canvas 吗你对 Web 性能指标了解多少如果要评价一个页面快不快、用户体验好不好你会看哪些指标如果发现页面性能有问题你一般会从哪些方向分析你实际项目里有遇到过性能问题吗怎么解决的来源牛客网 前端死了咩木木有话说刷前先看三面还在问一些计算机原理遇到的比较少一般三面技术侧的问题比例就变少了收录做个补充吧 TME QQ音乐前端三面·深度解析面试整体画像维度特征面试风格广度考察型 底层追问型 实战导向型难度评级⭐⭐⭐⭐四星WebAssembly、HTTP/3、性能指标全覆盖考察重心项目难点、性能优化、底层技术WASM/C、网络协议、动画、性能指标特殊之处电话面试23分钟快速覆盖20知识点考察知识广度逐题深度解析四、大文件分片上传的完整流程回答思路参考之前面经从分片、hash、上传、合并、秒传完整链路说明。完整流程文件分片Blob.prototype.slice将文件切成N个分片如5MB计算Hash使用Web Worker计算完整文件MD5用于秒传和分片MD5用于断点续传上传前检查请求服务端获取已上传的分片列表并发上传控制并发数如3-5个上传缺失分片携带分片索引和MD5断点续传上传中断时下次只传缺失分片合并通知所有分片上传完成后通知服务端合并秒传完整文件MD5已存在时直接跳过上传// 核心流程代码asyncfunctionuploadFile(file){constchunkSize5*1024*1024constchunksMath.ceil(file.size/chunkSize)constfileHashawaitcomputeMD5InWorker(file)// 秒传检查const{exists,uploadedChunks}awaitcheckFile(fileHash)if(exists)returnalert(秒传成功)for(leti0;ichunks;i){if(uploadedChunks.includes(i))continueconstchunkfile.slice(i*chunkSize,(i1)*chunkSize)constchunkHashawaitcomputeMD5(chunk)awaituploadChunk({index:i,chunk,chunkHash})}awaitmergeChunks(fileHash,chunks)}五、计算文件Hash是强IO操作会导致卡顿怎么优化优化方案从之前面经提炼优化方向具体方法效果Web Worker在Worker线程计算不阻塞主线程UI保持响应增量计算分块读取边读边更新hash减少内存占用采样计算只计算开头/中间/结尾部分数据快速秒传牺牲准确性降低优先级使用requestIdleCallback在空闲时计算不影响交互分片复用用分片MD5推导完整文件MD5避免重复计算// 空闲时计算functioncomputeHashIdle(file){requestIdleCallback(async(){consthashawaitcomputeMD5(file)localStorage.setItem(fileHash,hash)})}六、如果想在Web里嵌入C的逻辑一般会用什么方式回答思路主要有三种方式。方案WebAssembly将C编译成.wasm通过JavaScript调用性能接近原生Web Worker 本地服务通过WebSocket与本地C服务通信复杂NPAPI/PPAPI老旧浏览器插件技术已淘汰推荐WebAssembly现代浏览器标准。七、你了解WebAssembly吗回答思路WebAssembly是一种二进制指令格式可在浏览器中高效运行。特点高性能接近原生的执行速度多语言C/C/Rust/Go等可编译成WASM安全沙箱隔离遵循同源策略体积小二进制格式比JS小适用场景视频/音频编解码、图像处理、游戏引擎、加密计算。// 加载WASM模块constresponseawaitfetch(module.wasm)constbufferawaitresponse.arrayBuffer()constmoduleawaitWebAssembly.instantiate(buffer)module.exports.add(1,2)// 调用C函数九、如果让你实现一个快速排序你会怎么做快速排序分治算法选取基准分区递归。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}时间复杂度平均O(n log n)最坏O(n²)空间复杂度O(log n)递归栈十、Web端常见的持久化机制有哪些机制容量特点localStorage5-10MB同步永久存储sessionStorage5-10MB同步标签页关闭清除IndexedDB大250MB异步支持索引/事务CacheStorage取决于配额Service Worker缓存Cookies4KB自动携带有过期时间File System Access API大读写本地文件十一、TCP和UDP的区别维度TCPUDP连接面向连接三次握手无连接可靠性可靠确认重传不可靠顺序保证不保证拥塞控制有无速度慢快适用场景HTTP、文件传输实时音视频、DNS、游戏十二、HTTP/1.1和HTTP/2的区别特性HTTP/1.1HTTP/2连接模型串行需多个TCP连接并发多路复用单连接并发头部压缩无HPACK压缩服务器推送无支持二进制分帧文本协议二进制协议优先级无支持请求优先级十三、HTTP/2和HTTP/3的区别特性HTTP/2HTTP/3传输层TCPUDPQUIC协议队头阻塞TCP层仍存在解决独立流连接建立TCPTLS2-3 RTT0-RTT / 1-RTT连接迁移不支持IP变化需重连支持Connection ID十四、Web上实现动画一般有哪几种方式方式CSS动画transition、animationkeyframesJS动画requestAnimationFrame 手动更新样式Web Animations APIelement.animate()Canvas/SVG动画逐帧绘制GSAP等库更强大的控制能力性能建议优先用CSS动画GPU加速复杂用requestAnimationFrame避免setTimeout/setInterval。十五、你了解Canvas吗Canvas通过JS绘制2D图形的HTML元素。特点像素级控制适合复杂图形、游戏、图表高性能直接操作像素无事件系统需配合坐标计算constcanvasdocument.getElementById(myCanvas)constctxcanvas.getContext(2d)ctx.fillStyleredctx.fillRect(10,10,100,50)十六~十七Web性能指标与页面评价核心指标Web VitalsFCPFirst Contentful Paint首次内容绘制 ≤1.8sLCPLargest Contentful Paint最大内容绘制 ≤2.5sINPInteraction to Next Paint交互延迟 ≤200msCLSCumulative Layout Shift累积布局偏移 ≤0.1TTFBTime To First Byte首字节时间 ≤800ms评价页面体验加载速度LCP、TTFB交互性INP、FID视觉稳定性CLS资源利用CPU占用、内存占用十八发现页面性能问题从哪些方向分析分析维度网络Chrome DevTools Network面板查看请求耗时、资源大小、是否阻塞渲染Performance面板录制分析长任务、重排重绘运行时Memory面板检查内存泄漏、DOM节点数代码层面React DevTools Profiler查看组件渲染次数日志监控查看错误上报、性能指标LCP/INP十九实际项目里遇到的性能问题及解决回答思路结合具体项目说明。示例“在后台管理系统的长列表页面滚动时卡顿严重。通过Performance面板发现每次滚动都会触发大量重排。解决方案实现虚拟滚动只渲染可视区域的DOM节点滚动帧率从20fps提升到60fps。”知识点速查表知识点核心要点大文件上传分片MD5断点续传秒传合并Hash优化Web Worker、增量计算、采样、空闲计算WebAssemblyC编译成wasm高性能浏览器运行快速排序选基准、分区、递归O(n log n)持久化localStorage/IndexedDB/CacheStorageTCP vs UDP可靠/不可靠、连接/无连接、顺序/不保证HTTP/2多路复用、头部压缩、服务器推送HTTP/3QUIC、解决TCP队头阻塞、0-RTT动画方式CSS/JS/requestAnimationFrame/Canvas性能指标FCP/LCP/INP/CLS/TTFB性能分析Network/Performance/Memory面板 最后一句TME QQ音乐这场三面是一场“知识广度”的快速检阅。从大文件上传优化、WebAssembly嵌入C到快速排序实现、HTTP版本演进、性能指标分析面试官在23分钟内快速扫描了你的技术雷达。用户自述“对这些知识点不怎么熟”但能走到三面说明决心和基础被认可。技术面试有时不是要你全对而是看你是否具备解决问题的潜力和学习能力。