1. 先说这套卷子题型分布与考察逻辑2023年腾讯音乐春招前端岗的第一批笔试我印象挺深的。整套题做完大概花了90分钟题量不算特别大但覆盖面很广从JS基础到浏览器原理、再到框架和手写代码基本把前端开发的核心知识体系都过了一遍。和我之前刷过的其他大厂笔试相比它有一个很明显的特点不刻意刁难人但非常考验基础是否扎实。先说整体结构。整张卷子大致分成三块客观题单选多选、编程题两道左右、主观题一道场景设计或项目思路题。客观题大概占总分的40%左右编程题占40%主观题占20%。客观题里JS基础占了最大头其次是CSS、浏览器原理和网络基础框架相关的题反而比我想象中少。编程题两道一道偏算法字符串处理或数组操作一道偏手写API比如防抖节流、Promise封装这类。主观题是让描述一个你做过的项目或者给一个具体业务场景让你设计方案。这里我想先给一个总体的判断这套笔试的核心不是“会不会背API”而是“能不能在限制条件下稳定地写出可运行的代码、并解释清楚为什么这么写”。准备过校招的同学应该能感觉到近几年大厂前端的笔试风向一直在变前几年特别爱考偏题怪题这几年明显回归到了工程实用场景腾讯音乐这套卷子就是比较典型的“回归基础”风格。对准备笔试的同学来说这套卷子的参考价值很高。不是说原题会再考而是它的考点分布、难度梯度、出题思路能帮你校准自己的复习重点。哪怕你目标不是腾讯音乐把这套卷子的考点彻底吃透再去面其他中大厂的前端岗心态上会稳很多。我下面会按题型逐块拆解每块都尽量还原现场做题时的思路和踩坑记录方便你对照自己的情况查漏补缺。2. 客观题高频考点从JS基础到浏览器原理2.1 JS基础与进阶变量提升、闭包、this指向客观题里JS相关题目占比最高大概有三分之一左右。我拿到题目以后扫了一圈发现考点集中在几个方向变量提升与作用域、闭包、this指向、事件循环、原型链。变量提升那道题我印象很深题目大概长这样var a 1 function foo() { console.log(a) var a 2 } foo()很多人第一反应是输出1但正确答案是undefined。问题就出在变量提升。函数内部的var a会被提升到函数作用域顶部但赋值操作留在原地所以执行console.log(a)时a已经声明了只是还没赋值。这题挺基础的但暴露了不少人复习时的一个盲区只看“变量提升”这个概念却没真正理解“声明提升、初始化不提升”的区别。var是声明提升let和const会进入暂时性死区这几个差异在笔试里经常成对出现。闭包作为面试必考题笔试里同样没缺席。这轮出现的形式是“请解释以下代码的输出并说明为什么”代码大致是for (var i 0; i 5; i) { setTimeout(() { console.log(i) }, 1000) }如果对闭包和事件循环理解不透很容易凭记忆写出“输出0,1,2,3,4”的答案这题考察的就是你能否识别出来这一题的坑在别处。这是考察闭包和事件循环的经典基础题想拿稳分数关键不是记住这个题而是搞清楚两个层面的机制。首先是var没有块级作用域i是全局变量其次是setTimeout回调是异步执行的等事件循环轮到它们时同步代码已经跑完了此时i已经变成5。如果把var换成let每个循环迭代会创建一个独立绑定输出就会变成0到4。再往深一层说用var改造成闭包IIFE传参也能得到同样结果这就是闭包在“保存变量副本”上的经典应用。事件循环几乎是每次笔试必覆盖的考点。腾讯音乐的题长这样console.log(script start) setTimeout(() { console.log(setTimeout) }, 0) Promise.resolve().then(() { console.log(promise1) }).then(() { console.log(promise2) }) console.log(script end)正确答案是script start、script end、promise1、promise2、setTimeout。考察点很清楚微任务Promise.then会在一轮宏任务结束前全部执行完而setTimeout属于宏任务即使延迟设为0也要等微任务队列清空后才能执行。这里我建议大家复习时把执行顺序的规则彻底理解而不要背输出顺序。我当时在草稿纸上按“同步代码 → 微任务队列 → 下一轮宏任务”的顺序推了一遍40秒内就能确定答案比硬记要稳得多。this指向的题目也是常规考法const obj { name: TME, getName: function() { return this.name } } const fn obj.getName console.log(fn())这里的关键判断依据是“调用时如何被调用”。obj.getName()调用时this指向obj但题目里先把方法赋值给fn再以普通函数调用this就指向了undefined严格模式或全局对象非严格模式。这题坑在很多人容易凭感觉选“TME”实际考察的是this绑定的本质。2.2 原型链与继承一张老生常谈却高频踩坑的图原型链在笔试里的出现频率也很高腾讯音乐这轮考的是function Parent() {} Parent.prototype.say function() { return parent } function Child() {} Child.prototype new Parent() let c new Child() console.log(c.say()) console.log(c instanceof Parent) console.log(c.constructor Parent)这题没啥悬念输出是parent、true、true核心考点有两个层面。第一层是原型链查找机制。实例c自身没有say方法沿着__proto__找到Child.prototype而Child.prototype被赋值成了new Parent()实例它的__proto__又指向Parent.prototype所以能找到say方法。第二层是constructor的指向变化。默认情况下Child.prototype.constructor应该是Child但一旦重新赋值Child.prototype new Parent()constructor就跟着变成Parent了。这个细节平时写业务代码根本不会碰到但对理解原型链的底层机制很关键。复习原型链时我建议不要死记结论自己在浏览器控制台把c.__proto__、Child.prototype、Parent.prototype这几个对象逐个打印出来看看比看十篇文章都管用。笔试时如果时间紧张直接忽略constructor那层也能拿到多半分数但你想冲高分的话最好一上来就把这个问题考虑全面。2.3 CSS与浏览器渲染布局、层叠上下文、回流重绘CSS部分占比大概15%到20%考点比较固定盒模型、flex布局、定位、层叠上下文、回流与重绘。整体难度不算高但容易在细节上失分。我印象最深的是box-sizing这题。题目问一个div设置了width: 200px; padding: 20px; border: 1px solid #000;在标准盒模型下实际占用的宽度是多少。答案是242px因为标准盒模型下width只包含内容区宽度实际渲染宽度要加上左右padding和左右border。如果设置了box-sizing: border-box那width就直接覆盖整个盒子padding和border会在内部挤压内容区域。flex布局考了一道常见的居中题目问如何让子元素在父容器中水平垂直居中。答案是.parent { display: flex; justify-content: center; align-items: center; }这题虽然是基础但不少人在justify-content和align-items到底哪个管水平哪个管垂直上容易混淆。教大家一个不容易忘的记忆方式justify-content的主轴方向由flex-direction决定默认row时是水平方向align-items永远作用在交叉轴方向默认情况下就是垂直方向。只要抓住“先确认主轴方向再判断哪个属性控制哪个轴”这个逻辑就不会搞混。层叠上下文那题出了一道比较经典的题目一个元素设置了position: absolute; z-index: 2它内部的子元素设置了z-index: 999问谁盖在谁上面。答案是看父元素在整体层叠上下文中的位置父元素z-index是2那整个包含块都在z-index为3的元素下面子元素z-index再大也超不出父容器的层叠上下文。回流和重绘也考到了问哪些操作会触发回流。选项里有修改width、修改color、修改transform、读取offsetHeight。正确答案是修改width和读取offsetHeight。修改transform不会触发回流因为它走的是合成线程这也是为什么现在性能优化总是强调用transform代替top/left做动画。2.4 网络基础TCP握手、HTTPS、HTTP缓存网络基础题量不大大概5到8道但考点很集中。TCP三次握手几乎是必考问法是“为什么需要三次握手而不是两次”。答案是两次握手无法确认双方收发能力是否都正常存在历史重复连接初始化的风险。第三次握手本质上是为了让服务端确认客户端收到了自己的SYNACK防止已失效的连接请求突然传到服务端造成资源浪费。HTTPS也考了一道问HTTPS比HTTP多了什么能力。答案是加密传输和身份验证。具体来说HTTPS通过TLS/SSL协议对HTTP报文进行加密防止中间人窃听和篡改同时通过证书体系验证服务端身份防止钓鱼。这里我建议大家复习时注意一个容易混淆的点HTTPS的加密方式是“对称加密非对称加密”混合使用握手阶段用非对称加密协商对称密钥之后的传输都走对称加密。HTTP缓存的题目出现在多选题里。问哪些情况下浏览器会重新向服务端请求资源。选项有Cache-Control为no-cache、Expires过期、强缓存命中、资源URL变化。答案是no-cache、Expires过期、资源URL变化。强缓存命中时浏览器直接用本地缓存不发起请求。这道题能拉开差距的地方在于很多同学只知道“强缓存和协商缓存”这两个名字但没有真正理清它们的触发条件和判断顺序。复习的时候建议画一张判断流程图先看Cache-Control/Expires是否在有效期内在就直接用缓存不在就带上ETag/Last-Modified发请求由服务端判断。2.5 Vue考点响应式原理与组件通信框架相关题目占比不高大概10%左右Vue为主。腾讯音乐这轮有一道很经典的Vue题问Vue 2的响应式原理是什么下列哪个选项描述正确。答案是Object.defineProperty对data中的每个属性进行getter/setter劫持配合发布订阅模式实现响应式更新。这题的知识点很常规但后面跟了个考察细节的追问Vue 2中对数组的哪些操作不会触发视图更新。选项是直接按下标修改元素、push、pop、splice。正确答案是直接按下标修改元素因为Object.defineProperty无法拦截数组索引变化所以Vue 2需要重写数组的7个变异方法push、pop、shift、unshift、splice、sort、reverse直接用arr[0] xxx赋值是侦测不到的。组件通信也考了一道题目大意是在Vue中父组件向子组件传值用什么子组件向父组件通信用什么。答案很简单props和$emit。但背后还隐含了一个多选题可能考的点Vue 2中还有哪些通信方式常见的有$refs、$parent/$children、EventBus、Vuex、$attrs/$listeners、provide/inject。建议把这几种都整理一下至少要能说出各自适用场景和限制。3. 编程题实战手写题与算法的解题套路3.1 手写题防抖、节流、深拷贝编程题是笔试的重头戏。腾讯音乐这轮的第一道题是手写防抖函数要求实现一个debounce并说明应用场景。function debounce(fn, delay 300) { let timer null return function(...args) { if (timer) clearTimeout(timer) timer setTimeout(() { fn.apply(this, args) }, delay) } }这道题评分点主要看三点第一是否清除了上一次的定时器第二是否能正确传递参数和this指向第三边界情况是否考虑到位。这里fn.apply(this, args)是关键因为返回的函数被谁调用this就应该传给原函数否则可能出现this丢失问题。扩展问是“防抖和节流的区别”。防抖是触发后延迟执行如果期间再次触发就重新计时节流是规定时间内只执行一次不管触发多少次。业务场景上防抖适合搜索框输入联想、窗口resize后重新计算节流适合滚动加载、鼠标移动等高频事件。深拷贝也是手写题的高频选手。这轮虽然没直接考但我强烈建议重点准备因为它太常出现了。面试官一般会一步步追问从最简单的JSON方案开始到考虑函数、Symbol、循环引用再到Map/WeakMap处理递归爆栈function deepClone(obj, map new WeakMap()) { if (obj null || typeof obj ! object) return obj if (obj instanceof Date) return new Date(obj) if (obj instanceof RegExp) return new RegExp(obj) if (map.has(obj)) return map.get(obj) const clone Array.isArray(obj) ? [] : {} map.set(obj, clone) Reflect.ownKeys(obj).forEach(key { clone[key] deepClone(obj[key], map) }) return clone }用Reflect.ownKeys可以同时拿到字符串键和Symbol键用WeakMap存储已拷贝的对象解决循环引用问题。3.2 算法题数组、字符串、双指针对撞算法题考了两道一道是找出数组中和为target的两个数返回下标另一道是字符串去重并保持原有顺序。两数之和是老牌题了常规解法用哈希表function twoSum(nums, target) { const map new Map() for (let i 0; i nums.length; i) { const diff target - nums[i] if (map.has(diff)) { return [map.get(diff), i] } map.set(nums[i], i) } return [] }时间复杂度O(n)空间复杂度O(n)。这里有个注意点题目要求返回下标所以不能先用sort排序再用双指针因为排序会打乱原始下标。这是笔试里一个很经典的坑审题时一定要先看清楚要求的是下标还是元素值。字符串去重保持顺序的题用Set一行就能解决function removeDuplicate(str) { return [...new Set(str)].join() }但如果你直接用这个答案可能会被追问Set的去重是按什么顺序来的答案是按插入顺序。如果字符串里有大小写字母比如“aAbB”Set会认为它们不同因为比较的是值而不是忽略大小写后的值。这种细节在笔试环境里很可能不会被编译执行所以代码写完一定要自己“人肉跑一遍”。更稳妥的做法是遍历字符串用Map判断是否已出现function removeDuplicate(str) { const seen new Set() let result for (const char of str) { if (!seen.has(char)) { seen.add(char) result char } } return result }3.3 编程题的踩坑记录笔试编程题最痛苦的不是不会写而是写了但无法通过用例。我复盘时发现几个常见的失分原因这里分享给大家。第一个是没注意题目对输入输出的格式要求。在线笔试系统一般要求自行处理输入输出有些同学在本地IDE跑通了一提交就报错多半是input读取方式不对。建议提前熟悉牛客网和赛码网这两种主流笔试平台的输入输出模板不要等到考试时再现场翻文档。第二个是边界条件考虑不周。数组为空、长度为1、元素为负数或0、target比所有元素之和还大这些情况都要在写代码时顺手处理。我当年踩过最冤枉的一坑是两数之和没考虑数组只有一个元素的情况直接导致数组越界。第三个是时间复杂度过高。笔试的用例往往包含大数据量场景如果你第一反应是暴力双层循环即使能跑通小用例也可能在大数据量用例上超时。建议提交前先估算一下复杂度双层循环O(n²)在n为10万级别时基本必挂。4. 主观题与场景设计怎么答才能拿高分4.1 性能优化场景题的答题框架主观题这轮是一道场景设计题大致是假设页面上有一个长列表包含几千条数据要求设计一个方案保证页面流畅渲染请描述你的思路。这类开放题没有标准答案但评分是有套路的。阅卷人看的是你能否有层次地描述一个完整方案而不是只说一个零散的知识点。我的答题思路是分层展开。先分析瓶颈几千条DOM同时渲染会造成什么首屏加载时间变长、内存占用升高、滚动时频繁触发回流和重绘。然后按渲染时机和交互流程提出方案。如果只是纯展示最直接的方案是虚拟滚动只渲染可视区域内的几十条数据通过计算滚动的偏移量动态更新渲染列表。虚拟滚动的核心是外层容器固定高度内层用一个高度为总数据量的“占位元素”撑起滚动条真正渲染的只是一个绝对定位在可视区域内的子列表。这个方案能大幅降低DOM节点数量从几千降到几十。如果不需要一次性加载全部数据也可以考虑分页加载或无限滚动。分页最简单但体验不够现代无限滚动本质上是分批追加配合IntersectionObserver监听底部是否进入视口进入后再加载下一批数据。这个方案实现简单、兼容性好但数据量特别大时依然会有DOM积压的问题。如果数据还会频繁更新那还要考虑渲染粒度和diff优化。比如用requestAnimationFrame批量更新避免同步渲染卡顿或者用DocumentFragment批量插入DOM减少重排次数再或者给列表项套上memo/shouldComponentUpdate避免无关数据更新导致全列表重新渲染。答题时最好再提一个监控指标如何在线上确认方案是否生效。可以用PerformanceObserver观察Long Task或者用Chrome DevTools的Performance面板记录滚动时的FPS和脚本执行时间。提这些能体现出你不仅会做方案还会验证效果。4.2 项目经历的描述技巧如果主观题是让描述一个项目那答题逻辑基本等同于面试时的项目介绍。这里有一个通用的框架项目背景、我的职责、核心难点、我的解法、最终成果。背景不要啰嗦一两句话交代清楚项目是什么、服务谁。职责部分要突出个人贡献不要说“参与了XX模块开发”要说“独立负责XX模块从技术选型到落地”。核心难点一定要具体比如“页面数据量从一千涨到一万后首屏进入耗时从800ms涨到3s”。解法要按“我考虑到A方案因为B原因否决最终选了C方案效果是D”的结构来写。成果最好有数据支撑哪怕只是“LCP从3.2s优化到1.1s”这种相对数字也比“性能明显提升”有说服力。这道题其实考察的不只是技术还有表达能力和项目管理思维。建议提前准备两个项目一个偏业务功能一个偏技术基建或性能优化这样不管题目怎么出都能对上。5. 备考经验与避坑指南5.1 复习时间线与资料推荐针对腾讯音乐这类中大厂前端笔试题我给一个相对通用的复习时间线建议大家根据自己的基础灵活调整。如果距离笔试还有四周我的建议是这样分配第一周主攻JS核心基础变量提升、作用域、闭包、this、原型链、事件循环每天刷30道相关选择填空题第二周主攻CSS和浏览器原理布局、层叠上下文、回流重绘、缓存机制、渲染流程结合一些demo验证第三周主攻框架和手写题Vue响应式原理、组件通信、虚拟DOM和diff手写防抖节流、深拷贝、Promise、数组去重第四周做整体模拟找几套往年的笔试题按真实时间模拟一遍重点训练时间分配和心态。资料方面我比较推荐《JavaScript高级程序设计第4版》作为基础知识底子配合MDN查细节。面试题集锦类的资料可以看但不要只背题一定要理解背后的原理。算法部分建议刷LeetCode Hot 100中的简单和中等题数组、字符串、链表、二叉树、双指针、哈希表这些高频题型覆盖住就够用了。框架部分Vue就把官方文档的“深入响应式原理”和“组件通信”章节吃透React的话把Hooks的底层逻辑和setState的批处理机制搞明白。不管投的公司用什么框架这些底层原理都是笔试的高频考察点。5.2 笔试现场的几个实用技巧最后聊几个实战中验证过的技巧。第一先做会的题不会的先跳过。客观题部分经常有卡壳的难题不要在一道题上耗太久先标记出来把后面能拿的分全部拿到再回头啃硬骨头。时间分配上我建议客观题控制在35分钟内编程题每道20分钟主观题15分钟留5到10分钟检查。第二编程题即使写不出最优解也要写出暴力解。很多在线笔试系统是部分用例通过就给部分分数暴力解至少能过掉小数据量的用例比空着拿0分强。写完代码后花一两分钟自己跑一个简单用例检查有没有数组越界、空值处理这些低级错误。第三注意看题目要求和考试环境。比如编程题通常支持多语言选择题有的是多选、有的是单选这些细节决定了你的答题策略。另外提前检查一下机器的网络和浏览器兼容性在线笔试的代码编辑器偶尔会出现兼容问题避免因为环境原因影响发挥。5.3 笔试结束后的复盘方法笔试结束后别急着放松趁记忆还热乎赶紧复盘。我自己的习惯是先把考场上拿不准的题目和选项记录下来不管最终结果如何这些就是你知识盲区的直接线索。然后逐个回去翻文档、查原理最好能整理成笔记把考点扩展到相关知识体系。比如考了变量提升就把作用域、闭包、执行上下文、暂时性死区全串起来复习一遍考了HTTP缓存就把强缓存、协商缓存、启发式缓存、缓存优先级全过一遍。这种“由点及面”的复盘方式比机械地刷题效率高很多而且能让你在下一次笔试或面试时有更系统的知识框架。还有一个小技巧如果笔试平台允许看到错题和参考解析一定要利用好。有些平台的解析写得比较泛这时候自己去查一遍资料用自己的话把题讲一遍讲得清楚才说明真正懂了。6. 写在最后笔试完的几句心里话这些年陆陆续续面过不少公司也帮学弟学妹们看过不少笔试题我最大的感受是前端笔试越来越不靠“背诵”越来越靠“理解”。腾讯音乐这套卷子恰好是个很好的样本考点全是前端开发里绕不开的基础但没有一道题是“背了就能答对”的都需要你真正理解背后的机制。准备笔试的过程本质上也是把前端知识体系重新梳理一遍的过程。哪怕最终没通过这轮复习带来的知识沉淀对你后续的面试和实际工作都是实打实的积累。我自己当年笔试某家大厂时挂在了手写Promise上但那次复盘让我彻底搞懂了微任务和宏任务的执行顺序后来在另一家的面试里直接派上了用场真就是“考挂了但长本事了”。如果你正在准备春招或秋招的前端笔试建议别追求刷题数量把手上的每一道题做透做深。一道防抖函数能讲清楚this指向、参数传递、应用场景、和节流的对比远比闷头刷十道题更有价值。祝各位都能顺利拿下心仪的offer。