每年秋招季都有不少学弟学妹来问我“前端笔试到底怎么准备”“看了好多面经一上考场还是懵。”我通常都会推荐他们去找几家典型公司的真题做一遍。如果只能选一套题来模拟我会首推58集团这套前端岗秋招笔试题。原因很简单这套题覆盖了前端笔试几乎所有的经典题型——计算机基础、JavaScript 核心、框架原理、手写代码、场景设计题难度梯度也拉得比较开。基础扎实的人能在 30 分钟内解决大半但最后一道场景题能把真正有工程经验的人和只会刷题的人区分开。换句话说这套题就是一面镜子能把你的前端水平照得明明白白。这篇文章我会从试卷结构、核心考点、典型题目拆解、备考策略四个维度完整复盘这套题。不管你是准备秋招的应届生还是想检验自己前端基础的社招选手这篇文章都能给你一个清晰的参考坐标。我会尽量还原真实的笔试场景和答题思路有些地方也会补充我在实际开发中的一些体会希望能帮你少走弯路。1. 笔试整体架构与考察逻辑拆解1.1 试卷结构与时间分配58 集团这套前端笔试题考试时长是 90 分钟总分 100 分。从题型分布来看大概可以分为四个板块单选选择题约 20 题每题 2 分、多选题约 5 题每题 3 分、手写代码题2 题每题 10 分、场景设计题1 题20 分。先说整体感受题量不算特别大但时间并不宽裕。选择题部分如果基础扎实基本能控制在 25 分钟内多选题稍难错选、漏选都不得分这个是拉开差距的地方建议留出 15 分钟手写题两道题至少要留 30 分钟最后 20 分钟给场景题。这是我考下来觉得比较合理的时间切分。可能有同学会问为什么明明有手写题还要考这么多选择题我的理解是选择题能快速覆盖大量知识点——从 HTML 语义化到 HTTP 状态码从事件循环到浏览器渲染原理一道题就是一个知识点切片。而手写题和场景题才是真正考察工程能力的部分。这种“组合拳”式的出题方式也符合大厂笔试的通用逻辑先筛掉基础不牢的再从剩下的人里挑工程思维好的。1.2 出题逻辑58 到底在考什么很多同学备考时容易陷入一个误区疯狂刷 LeetCode、背八股文结果笔试分数还是不高。原因在于没有读懂出题人的意图。58 这套题的核心考察目标其实是三个维度。第一个维度是语言功底也就是 JavaScript 的掌握深度包括原型链、作用域、this 指向、闭包、异步编程这些内容。第二个维度是浏览器与网络基础包括页面渲染过程、缓存机制、HTTP 协议、跨域解决方案等。第三个维度是工程化思维也就是面对真实业务场景时你能否设计出合理的方案。从实际经验来看前两个维度靠刷题和背诵能提升得很快但第三个维度往往被很多人忽视。比如场景题里经常出现的“首屏加载优化”“大列表渲染优化”这种题目没有标准答案考官看的是你的分析路径——你能不能从网络请求、资源加载、渲染性能、代码层面多个角度给出完整方案以及有没有考虑过边界情况。这一点在后面拆解真题的时候我会详细讲。2. 高频核心考点逐项拆解2.1 JavaScript 基础这次是真的考功底先说选择题里出现的 JavaScript 考点。58 这套题对 JS 的考察密度很高几乎占了选择题的一半。其中反复出现的知识点有几个我按优先级列一下。第一个是事件循环机制这个可以说是必考。题目一般会给你一段代码里面有 setTimeout、Promise、async/await 的混用让你判断输出顺序。做这类题的关键是理清“同步任务—微任务—宏任务”的执行顺序。我当时的答题思路是先找同步代码再找微任务Promise 回调、queueMicrotask最后找宏任务setTimeout、setInterval。要注意 async 函数内部的 await 会把它后面的代码放进微任务队列这个细节很容易被忽略。第二个是闭包与作用域。有一道题我记得比较清楚定义一个for循环里面用var声明变量然后给多个元素绑定点击事件问点击后输出什么。答案是所有元素都输出同一个值因为var是函数作用域循环结束后变量已经被修改。正确的做法是用let或者 IIFE 包裹。这种题目就是典型的“考察基础是否扎实”没有太多技巧就是看你有没有真正理解作用域和闭包。第三个是原型链与继承。这里要掌握prototype、__proto__、constructor三者之间的关系以及new操作符到底做了什么。笔试中比较容易出的是“判断两个对象是否相等”“利用原型链实现继承”这类问题。我个人建议在准备时手写一遍原型链继承的实现比单纯背诵几个概念要管用得多。第四个是 this 指向问题。这个也是高频考点核心就是记住一句话“函数被调用时this 指向调用它的对象。”箭头函数没有自己的 this它继承外层作用域的 this。题目喜欢考 apply、call、bind 的区别以及 setTimeout 回调里 this 的丢失问题。把这些理清楚基本就能应付笔试里的 this 相关题目了。2.2 框架与工程化Vue/React 的前端考察重点框架部分的考察力度在逐年加大58 这套题也不例外。虽然选择题里直接考框架语法的题目不多但手写题和场景题都会涉及到框架的应用能力。先说 Vue 部分。考察方向主要集中在响应式原理Object.defineProperty 和 Proxy 的区别Vue 2 和 Vue 3 的差异、生命周期钩子create、mount、update、destroy 各阶段能做什么、组件通信方式props/$emit、provide/inject、Vuex/Pinia、事件总线、computed 与 watch 的区别。其中响应式原理是必考中的必考。我当时被问到的是一道选择题Vue 2 中通过数组下标方式修改数组元素能否触发视图更新答案是“不能”因为 Vue 2 的响应式系统没有对数组下标做劫持。要知道解决方法——用Vue.set或者splice。这道题的变体还会问使用this.arr[0] 1是否生效原理都是一样的。React 部分则更偏向 Hooks 相关。useEffect 的依赖数组机制、useState 的异步更新、useRef 与 useMemo 的使用场景都是选择题里的常客。这类题的核心是理解“渲染”和“副作用”的边界。我在实际项目里见过不少同学把副作用写进 render body导致重复执行的问题所以这块基础知识不牢固的话笔试容易出洋相。工程化部分的考察比较轻量主要是 webpack 的打包流程、loader 与 plugin 的区别、tree-shaking 的原理。不过这几年 esbuild/vite 逐渐普及题目也开始出现与 Vite 相关的内容。如果时间允许还是建议了解清楚 esbuild 为什么快、Vite 的 dev server 为什么能做到秒开。2.3 计算机网络与浏览器渲染前端必修课网络与浏览器相关的内容在选择题里大概占 4~6 题。我把常考的考点整理一下方便大家对照复习。HTTP 状态码是送分题200 成功、301 永久重定向、302 临时重定向、304 协商缓存生效、401 未认证、403 无权限、404 资源不存在、500 服务器错误、502 网关错误、504 网关超时。58 这道题里有一道就是给一个场景判断状态码比如“访问一个不存在于服务器的接口返回什么状态码”答案是 404。浏览器缓存机制也是高频考点。要分清楚强缓存Cache-Control 和 Expires与协商缓存Last-Modified/If-Modified-Since 和 ETag/If-None-Match的区别。特别是优先级问题Cache-Control 优先于 ExpiresETag 优先于 Last-Modified。这些都是选择题的常见陷阱。跨域问题是实际开发中经常遇到的笔试中也必考。CORS跨域资源共享是后端设置响应头JSONP 是动态创建 script 标签加载外部脚本还有代理转发方案。考察方式通常是当前端访问某个接口被浏览器拦截应该怎么解决注意 JSONP 只支持 GET 请求这个限制在选项里经常出现。浏览器渲染原理这块要理解关键渲染路径HTML 解析成 DOM 树、CSS 解析成 CSSOM 树、两者合并成渲染树、布局计算、绘制。脚本的位置会影响页面加载所以script标签要不要加defer或async这背后都是渲染原理在支撑。准备时把这条链路理解透了性能优化类的题目至少能答对一半。3. 典型真题实操复盘3.1 手写题第一弹实现防抖与节流函数这套题的手写题第一道就是防抖和节流。题目要求说得很简单但在考场环境下能写对的人其实不足一半。为什么因为很多人只知道“防抖是最后一次生效节流是固定频率执行”这个模糊概念一落到代码上就露馅。我当时写的防抖函数是这样function debounce(fn, delay 300) { let timer null; return function (...args) { const context this; if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); }, delay); }; }关键在于两点一是要用闭包保存 timer二是要处理 this 指向。有些版本不处理 this绑定的事件回调里 this 就丢掉了严格模式下直接报错。还有一点容易被忽略——第一次点击要不要立即执行这个叫做immediate参数。完整的防抖函数会加一个立即执行选项我在实际开发中做搜索框联想的时候就会配置成 leading 模式让第一次输入立刻触发请求。节流的实现方式有两种时间戳和定时器我当时写的是时间戳版function throttle(fn, delay 300) { let last 0; return function (...args) { const context this; const now Date.now(); if (now - last delay) { last now; fn.apply(context, args); } }; }这个版本能保证在时间窗口内至少执行一次但最后一次触发可能会被丢掉。如果需要保证尾触发就要结合定时器版本。笔试的时候先把基础版本写对、边界情况想清楚已经能拿到大部分分数。如果还想展示能力可以补充一句“这种写法适合滚动事件能保证首尾都执行。”这个细节很容易让面试官对你产生好感。3.2 手写题第二弹深拷贝的两种实现思路另一道手写题是深拷贝。题目不限定方式但要求能处理Date、RegExp等特殊对象。一开始我以为只要JSON.parse(JSON.stringify(obj))就能解决但考官的出题点恰恰在这个方案的弱点上。用JSON方案有两个致命缺陷第一undefined、function、symbol会被直接忽略或转为 null第二Date对象会被转成字符串RegExp对象变成空对象。所以在笔试中我选择了递归实现function deepClone(target, map new WeakMap()) { if (typeof target ! object || target null) return target; if (target instanceof Date) return new Date(target); if (target instanceof RegExp) return new RegExp(target.source, target.flags); const cloned Array.isArray(target) ? [] : {}; if (map.has(target)) return map.get(target); map.set(target, cloned); for (const key in target) { if (Object.prototype.hasOwnProperty.call(target, key)) { cloned[key] deepClone(target[key], map); } } return cloned; }注意我用到了WeakMap来解决循环引用的问题。如果没有这个处理对象a.self a这种结构会导致递归爆栈。这个细节很关键也是最容易拿分的一个点。笔试时能写出递归版并处理循环引用已经是中上水平。其实笔试场景下先写JSON.parse(JSON.stringify())再说“这种方案有局限性平时项目中适合处理纯数据结构”然后再展示递归版本反而能体现你的全面思考。考官要的不是一个死记硬背的函数而是你能根据场景选择方案的工程判断力。3.3 场景设计题首屏加载性能优化方案最后一道 20 分的场景题题目大概意思是某移动端页面首屏加载太慢用户反馈白屏时间超过 3 秒请给出完整的优化方案并说明理由。这个题目考察的很综合我通常会把答案分成几个层面来组织。网络层面开启 Gzip 压缩减小传输体积使用 HTTP/2 多路复用减少连接数合理设置 CDN把静态资源分发到离用户最近的节点对于弱网环境可以考虑 HTTP/3QUIC来降低连接建立时延。资源层面对图片进行压缩使用 WebP 格式替代 JPG/PNG小图片转 Base64 内联减少请求数关键 CSS 内联到 HTML非关键 CSS 异步加载JavaScript 代码按路由拆分用动态 import 实现代码分割只加载首屏需要的模块。渲染层面给关键资源加preload非关键资源加prefetch骨架屏技术可以有效减少白屏焦虑让用户感觉页面加载更快首屏接口并行请求多个接口用Promise.all合并等待时间。缓存层面强缓存配合不可变文件名文件名带 hash 值这样重新发版后旧缓存自动失效没变动的模块继续命中缓存Service Worker 缓存应用外壳二次访问时首屏甚至可以直接从本地读取。这里最忌讳的就是只回答一两点就停笔。“优化”本身是一个系统问题你需要证明自己能覆盖到网络请求到浏览器渲染的完整链路。同时方案要贴近“移动端”这个场景比如弱网环境要考虑资源体积CPU 较弱的设备上要考虑降低 JavaScript 执行开销。把场景分析清楚比堆砌术语要加分得多。4. 备考策略与常见失分点记录4.1 考前的有效冲刺路线经历过这次笔试我复盘了一下自己的备考过程发现有几个阶段性的关键动作很值得分享。特别是如果你只有一到两周的冲刺时间建议按照下面的优先级来安排。第一优先级把 JavaScript 基础再过一遍。包括事件循环、原型链、闭包、this 指向、手写 call/apply/bind、深拷贝、防抖节流。这些是笔试里的“保命项”只要你把这些做扎实了哪怕后面的大题答得不理想总分也不会太难看。第二优先级框架核心原理。挑一个你熟悉的框架把响应式原理或渲染机制吃透。笔试通常不会要求你写一个完整的组件但会通过选择题考察你对框架心智模型的理解。注意 Vue 2 和 Vue 3 的差异点React 18 的新特性也要了解。第三优先级浏览器与网络。缓存、跨域、HTTP 状态码、渲染路径、事件循环这个是 JS 和浏览器交叉的知识点大概花一天就能过完性价比极高。最后的阶段可以拿真题做模拟演练。我建议用 90 分钟完整计时做一套卷子训练自己做题的时间分配。这一条真的非常重要我见过不少同学不是不会做而是在某道题上纠结太久导致后面的手写题来不及写。4.2 我在笔试中踩过的坑第一次做这套题时我在多选题上栽了跟头。多选题的规则是“多选、少选、错选均不得分”所以风险很高。有一个选项描述得模棱两可我犹豫了很久最终选了它结果掉坑里了。后来我总结出一个经验在不确定的选项上宁可少选也不要冒险。因为多选和少选都是零分但你确定正确的选项本来能拿到的分数不会因为你少选而扣掉。从策略上讲只选有把握的选项是确定性最高的做法。第二个坑是手写题里忘记写代码注释。有些同学觉得笔试时间紧写完直接交卷。但我的体会是手写题不仅是考代码正确性还在考验你的解题思路。在关键步骤上简单写两句注释比如“防抖函数清除上一次的定时器”“深拷贝使用 WeakMap 解决循环引用”反而能帮助阅卷人理解你的意图也是给自己加印象分。第三个坑是场景题没有写“衡量指标”。优化不是空口说方案你需要有数据支撑。比如“优化后白屏时间从 3 秒降低到 1.2 秒”“图片压缩后总体积下降了 40%”。即便笔试里没有真实数据你也可以描述“通过 Lighthouse 的 Performance 指标验证优化效果”。这会让你的答案看起来更像一个真实做过优化的工程师而不是背书的学生。4.3 从笔试题反推复习方向最后我想说一点个人体会。做完这套题我觉得最大的收获不是那几道题本身而是它帮我重新校准了前端的知识体系。刚开始准备笔试的时候我走了弯路天天刷算法题、背框架源码以为面面俱到就能高分。但做过这套题之后我意识到大厂前端笔试真正考察的是基础是否扎实和思路是否清晰而不是你背了多少内容。“基础是否扎实”就是知道闭包为什么会产生内存泄漏、知道浏览器缓存是怎么运作的、知道 setTimeout 的最小延迟时间为什么是 4ms。“思路是否清晰”就是面对一个现实问题你能不能从多个维度去拆解给出有理有据的结论。如果你现在正在准备秋招我的建议是不要只盯着“前端面试题大全”去刷花点时间亲手写出一个完整的小项目——从前端工程搭建、页面开发、性能优化到部署上线把完整链路走一遍。这条路虽然慢但打下的底子是巩固的。笔试考的是你的积累而积累从来不是靠最后几天的突击能弥补的。祝正在准备笔试的你顺利拿到心仪的 offer。 前端笔试怎么准备？58集团秋招真题复盘：从JS核心到性能优化
每年秋招季都有不少学弟学妹来问我“前端笔试到底怎么准备”“看了好多面经一上考场还是懵。”我通常都会推荐他们去找几家典型公司的真题做一遍。如果只能选一套题来模拟我会首推58集团这套前端岗秋招笔试题。原因很简单这套题覆盖了前端笔试几乎所有的经典题型——计算机基础、JavaScript 核心、框架原理、手写代码、场景设计题难度梯度也拉得比较开。基础扎实的人能在 30 分钟内解决大半但最后一道场景题能把真正有工程经验的人和只会刷题的人区分开。换句话说这套题就是一面镜子能把你的前端水平照得明明白白。这篇文章我会从试卷结构、核心考点、典型题目拆解、备考策略四个维度完整复盘这套题。不管你是准备秋招的应届生还是想检验自己前端基础的社招选手这篇文章都能给你一个清晰的参考坐标。我会尽量还原真实的笔试场景和答题思路有些地方也会补充我在实际开发中的一些体会希望能帮你少走弯路。1. 笔试整体架构与考察逻辑拆解1.1 试卷结构与时间分配58 集团这套前端笔试题考试时长是 90 分钟总分 100 分。从题型分布来看大概可以分为四个板块单选选择题约 20 题每题 2 分、多选题约 5 题每题 3 分、手写代码题2 题每题 10 分、场景设计题1 题20 分。先说整体感受题量不算特别大但时间并不宽裕。选择题部分如果基础扎实基本能控制在 25 分钟内多选题稍难错选、漏选都不得分这个是拉开差距的地方建议留出 15 分钟手写题两道题至少要留 30 分钟最后 20 分钟给场景题。这是我考下来觉得比较合理的时间切分。可能有同学会问为什么明明有手写题还要考这么多选择题我的理解是选择题能快速覆盖大量知识点——从 HTML 语义化到 HTTP 状态码从事件循环到浏览器渲染原理一道题就是一个知识点切片。而手写题和场景题才是真正考察工程能力的部分。这种“组合拳”式的出题方式也符合大厂笔试的通用逻辑先筛掉基础不牢的再从剩下的人里挑工程思维好的。1.2 出题逻辑58 到底在考什么很多同学备考时容易陷入一个误区疯狂刷 LeetCode、背八股文结果笔试分数还是不高。原因在于没有读懂出题人的意图。58 这套题的核心考察目标其实是三个维度。第一个维度是语言功底也就是 JavaScript 的掌握深度包括原型链、作用域、this 指向、闭包、异步编程这些内容。第二个维度是浏览器与网络基础包括页面渲染过程、缓存机制、HTTP 协议、跨域解决方案等。第三个维度是工程化思维也就是面对真实业务场景时你能否设计出合理的方案。从实际经验来看前两个维度靠刷题和背诵能提升得很快但第三个维度往往被很多人忽视。比如场景题里经常出现的“首屏加载优化”“大列表渲染优化”这种题目没有标准答案考官看的是你的分析路径——你能不能从网络请求、资源加载、渲染性能、代码层面多个角度给出完整方案以及有没有考虑过边界情况。这一点在后面拆解真题的时候我会详细讲。2. 高频核心考点逐项拆解2.1 JavaScript 基础这次是真的考功底先说选择题里出现的 JavaScript 考点。58 这套题对 JS 的考察密度很高几乎占了选择题的一半。其中反复出现的知识点有几个我按优先级列一下。第一个是事件循环机制这个可以说是必考。题目一般会给你一段代码里面有 setTimeout、Promise、async/await 的混用让你判断输出顺序。做这类题的关键是理清“同步任务—微任务—宏任务”的执行顺序。我当时的答题思路是先找同步代码再找微任务Promise 回调、queueMicrotask最后找宏任务setTimeout、setInterval。要注意 async 函数内部的 await 会把它后面的代码放进微任务队列这个细节很容易被忽略。第二个是闭包与作用域。有一道题我记得比较清楚定义一个for循环里面用var声明变量然后给多个元素绑定点击事件问点击后输出什么。答案是所有元素都输出同一个值因为var是函数作用域循环结束后变量已经被修改。正确的做法是用let或者 IIFE 包裹。这种题目就是典型的“考察基础是否扎实”没有太多技巧就是看你有没有真正理解作用域和闭包。第三个是原型链与继承。这里要掌握prototype、__proto__、constructor三者之间的关系以及new操作符到底做了什么。笔试中比较容易出的是“判断两个对象是否相等”“利用原型链实现继承”这类问题。我个人建议在准备时手写一遍原型链继承的实现比单纯背诵几个概念要管用得多。第四个是 this 指向问题。这个也是高频考点核心就是记住一句话“函数被调用时this 指向调用它的对象。”箭头函数没有自己的 this它继承外层作用域的 this。题目喜欢考 apply、call、bind 的区别以及 setTimeout 回调里 this 的丢失问题。把这些理清楚基本就能应付笔试里的 this 相关题目了。2.2 框架与工程化Vue/React 的前端考察重点框架部分的考察力度在逐年加大58 这套题也不例外。虽然选择题里直接考框架语法的题目不多但手写题和场景题都会涉及到框架的应用能力。先说 Vue 部分。考察方向主要集中在响应式原理Object.defineProperty 和 Proxy 的区别Vue 2 和 Vue 3 的差异、生命周期钩子create、mount、update、destroy 各阶段能做什么、组件通信方式props/$emit、provide/inject、Vuex/Pinia、事件总线、computed 与 watch 的区别。其中响应式原理是必考中的必考。我当时被问到的是一道选择题Vue 2 中通过数组下标方式修改数组元素能否触发视图更新答案是“不能”因为 Vue 2 的响应式系统没有对数组下标做劫持。要知道解决方法——用Vue.set或者splice。这道题的变体还会问使用this.arr[0] 1是否生效原理都是一样的。React 部分则更偏向 Hooks 相关。useEffect 的依赖数组机制、useState 的异步更新、useRef 与 useMemo 的使用场景都是选择题里的常客。这类题的核心是理解“渲染”和“副作用”的边界。我在实际项目里见过不少同学把副作用写进 render body导致重复执行的问题所以这块基础知识不牢固的话笔试容易出洋相。工程化部分的考察比较轻量主要是 webpack 的打包流程、loader 与 plugin 的区别、tree-shaking 的原理。不过这几年 esbuild/vite 逐渐普及题目也开始出现与 Vite 相关的内容。如果时间允许还是建议了解清楚 esbuild 为什么快、Vite 的 dev server 为什么能做到秒开。2.3 计算机网络与浏览器渲染前端必修课网络与浏览器相关的内容在选择题里大概占 4~6 题。我把常考的考点整理一下方便大家对照复习。HTTP 状态码是送分题200 成功、301 永久重定向、302 临时重定向、304 协商缓存生效、401 未认证、403 无权限、404 资源不存在、500 服务器错误、502 网关错误、504 网关超时。58 这道题里有一道就是给一个场景判断状态码比如“访问一个不存在于服务器的接口返回什么状态码”答案是 404。浏览器缓存机制也是高频考点。要分清楚强缓存Cache-Control 和 Expires与协商缓存Last-Modified/If-Modified-Since 和 ETag/If-None-Match的区别。特别是优先级问题Cache-Control 优先于 ExpiresETag 优先于 Last-Modified。这些都是选择题的常见陷阱。跨域问题是实际开发中经常遇到的笔试中也必考。CORS跨域资源共享是后端设置响应头JSONP 是动态创建 script 标签加载外部脚本还有代理转发方案。考察方式通常是当前端访问某个接口被浏览器拦截应该怎么解决注意 JSONP 只支持 GET 请求这个限制在选项里经常出现。浏览器渲染原理这块要理解关键渲染路径HTML 解析成 DOM 树、CSS 解析成 CSSOM 树、两者合并成渲染树、布局计算、绘制。脚本的位置会影响页面加载所以script标签要不要加defer或async这背后都是渲染原理在支撑。准备时把这条链路理解透了性能优化类的题目至少能答对一半。3. 典型真题实操复盘3.1 手写题第一弹实现防抖与节流函数这套题的手写题第一道就是防抖和节流。题目要求说得很简单但在考场环境下能写对的人其实不足一半。为什么因为很多人只知道“防抖是最后一次生效节流是固定频率执行”这个模糊概念一落到代码上就露馅。我当时写的防抖函数是这样function debounce(fn, delay 300) { let timer null; return function (...args) { const context this; if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); }, delay); }; }关键在于两点一是要用闭包保存 timer二是要处理 this 指向。有些版本不处理 this绑定的事件回调里 this 就丢掉了严格模式下直接报错。还有一点容易被忽略——第一次点击要不要立即执行这个叫做immediate参数。完整的防抖函数会加一个立即执行选项我在实际开发中做搜索框联想的时候就会配置成 leading 模式让第一次输入立刻触发请求。节流的实现方式有两种时间戳和定时器我当时写的是时间戳版function throttle(fn, delay 300) { let last 0; return function (...args) { const context this; const now Date.now(); if (now - last delay) { last now; fn.apply(context, args); } }; }这个版本能保证在时间窗口内至少执行一次但最后一次触发可能会被丢掉。如果需要保证尾触发就要结合定时器版本。笔试的时候先把基础版本写对、边界情况想清楚已经能拿到大部分分数。如果还想展示能力可以补充一句“这种写法适合滚动事件能保证首尾都执行。”这个细节很容易让面试官对你产生好感。3.2 手写题第二弹深拷贝的两种实现思路另一道手写题是深拷贝。题目不限定方式但要求能处理Date、RegExp等特殊对象。一开始我以为只要JSON.parse(JSON.stringify(obj))就能解决但考官的出题点恰恰在这个方案的弱点上。用JSON方案有两个致命缺陷第一undefined、function、symbol会被直接忽略或转为 null第二Date对象会被转成字符串RegExp对象变成空对象。所以在笔试中我选择了递归实现function deepClone(target, map new WeakMap()) { if (typeof target ! object || target null) return target; if (target instanceof Date) return new Date(target); if (target instanceof RegExp) return new RegExp(target.source, target.flags); const cloned Array.isArray(target) ? [] : {}; if (map.has(target)) return map.get(target); map.set(target, cloned); for (const key in target) { if (Object.prototype.hasOwnProperty.call(target, key)) { cloned[key] deepClone(target[key], map); } } return cloned; }注意我用到了WeakMap来解决循环引用的问题。如果没有这个处理对象a.self a这种结构会导致递归爆栈。这个细节很关键也是最容易拿分的一个点。笔试时能写出递归版并处理循环引用已经是中上水平。其实笔试场景下先写JSON.parse(JSON.stringify())再说“这种方案有局限性平时项目中适合处理纯数据结构”然后再展示递归版本反而能体现你的全面思考。考官要的不是一个死记硬背的函数而是你能根据场景选择方案的工程判断力。3.3 场景设计题首屏加载性能优化方案最后一道 20 分的场景题题目大概意思是某移动端页面首屏加载太慢用户反馈白屏时间超过 3 秒请给出完整的优化方案并说明理由。这个题目考察的很综合我通常会把答案分成几个层面来组织。网络层面开启 Gzip 压缩减小传输体积使用 HTTP/2 多路复用减少连接数合理设置 CDN把静态资源分发到离用户最近的节点对于弱网环境可以考虑 HTTP/3QUIC来降低连接建立时延。资源层面对图片进行压缩使用 WebP 格式替代 JPG/PNG小图片转 Base64 内联减少请求数关键 CSS 内联到 HTML非关键 CSS 异步加载JavaScript 代码按路由拆分用动态 import 实现代码分割只加载首屏需要的模块。渲染层面给关键资源加preload非关键资源加prefetch骨架屏技术可以有效减少白屏焦虑让用户感觉页面加载更快首屏接口并行请求多个接口用Promise.all合并等待时间。缓存层面强缓存配合不可变文件名文件名带 hash 值这样重新发版后旧缓存自动失效没变动的模块继续命中缓存Service Worker 缓存应用外壳二次访问时首屏甚至可以直接从本地读取。这里最忌讳的就是只回答一两点就停笔。“优化”本身是一个系统问题你需要证明自己能覆盖到网络请求到浏览器渲染的完整链路。同时方案要贴近“移动端”这个场景比如弱网环境要考虑资源体积CPU 较弱的设备上要考虑降低 JavaScript 执行开销。把场景分析清楚比堆砌术语要加分得多。4. 备考策略与常见失分点记录4.1 考前的有效冲刺路线经历过这次笔试我复盘了一下自己的备考过程发现有几个阶段性的关键动作很值得分享。特别是如果你只有一到两周的冲刺时间建议按照下面的优先级来安排。第一优先级把 JavaScript 基础再过一遍。包括事件循环、原型链、闭包、this 指向、手写 call/apply/bind、深拷贝、防抖节流。这些是笔试里的“保命项”只要你把这些做扎实了哪怕后面的大题答得不理想总分也不会太难看。第二优先级框架核心原理。挑一个你熟悉的框架把响应式原理或渲染机制吃透。笔试通常不会要求你写一个完整的组件但会通过选择题考察你对框架心智模型的理解。注意 Vue 2 和 Vue 3 的差异点React 18 的新特性也要了解。第三优先级浏览器与网络。缓存、跨域、HTTP 状态码、渲染路径、事件循环这个是 JS 和浏览器交叉的知识点大概花一天就能过完性价比极高。最后的阶段可以拿真题做模拟演练。我建议用 90 分钟完整计时做一套卷子训练自己做题的时间分配。这一条真的非常重要我见过不少同学不是不会做而是在某道题上纠结太久导致后面的手写题来不及写。4.2 我在笔试中踩过的坑第一次做这套题时我在多选题上栽了跟头。多选题的规则是“多选、少选、错选均不得分”所以风险很高。有一个选项描述得模棱两可我犹豫了很久最终选了它结果掉坑里了。后来我总结出一个经验在不确定的选项上宁可少选也不要冒险。因为多选和少选都是零分但你确定正确的选项本来能拿到的分数不会因为你少选而扣掉。从策略上讲只选有把握的选项是确定性最高的做法。第二个坑是手写题里忘记写代码注释。有些同学觉得笔试时间紧写完直接交卷。但我的体会是手写题不仅是考代码正确性还在考验你的解题思路。在关键步骤上简单写两句注释比如“防抖函数清除上一次的定时器”“深拷贝使用 WeakMap 解决循环引用”反而能帮助阅卷人理解你的意图也是给自己加印象分。第三个坑是场景题没有写“衡量指标”。优化不是空口说方案你需要有数据支撑。比如“优化后白屏时间从 3 秒降低到 1.2 秒”“图片压缩后总体积下降了 40%”。即便笔试里没有真实数据你也可以描述“通过 Lighthouse 的 Performance 指标验证优化效果”。这会让你的答案看起来更像一个真实做过优化的工程师而不是背书的学生。4.3 从笔试题反推复习方向最后我想说一点个人体会。做完这套题我觉得最大的收获不是那几道题本身而是它帮我重新校准了前端的知识体系。刚开始准备笔试的时候我走了弯路天天刷算法题、背框架源码以为面面俱到就能高分。但做过这套题之后我意识到大厂前端笔试真正考察的是基础是否扎实和思路是否清晰而不是你背了多少内容。“基础是否扎实”就是知道闭包为什么会产生内存泄漏、知道浏览器缓存是怎么运作的、知道 setTimeout 的最小延迟时间为什么是 4ms。“思路是否清晰”就是面对一个现实问题你能不能从多个维度去拆解给出有理有据的结论。如果你现在正在准备秋招我的建议是不要只盯着“前端面试题大全”去刷花点时间亲手写出一个完整的小项目——从前端工程搭建、页面开发、性能优化到部署上线把完整链路走一遍。这条路虽然慢但打下的底子是巩固的。笔试考的是你的积累而积累从来不是靠最后几天的突击能弥补的。祝正在准备笔试的你顺利拿到心仪的 offer。