百度前端笔试这两年一直是校招圈子里讨论度很高的东西尤其“2020校招Web前端工程师笔试卷第二批”这套题我身边不少学弟学妹都刷过。这套题和第一批相比题型分布上做了不少调整考察重心也明显从“死记硬背”转向“底层原理 工程实践”。如果你正在准备大厂前端岗或者想系统自查一下基础功底这套题很适合拿来当一次模拟考。它能帮你快速定位薄弱点也能让你看清大厂校招前端到底在筛选什么样的人。1. 整体拆解这类笔试卷究竟在考察什么先说个很多人容易忽略的点大厂校招笔试的定位从来不是“筛出满分选手”而是在海量简历里快速找出“基础扎实、有潜力、能干活”的人。因此试卷不会只考某一个方向而是覆盖计算机基础、JavaScript、CSS/HTML、框架、算法、网络等多个模块。你不需要每道题都会但必须在核心模块上稳得住。1.1 题型分布与科目占比以2020年这批前端笔试卷为参考常见的题型组合是单选题、多选题、填空题、手写代码题、简答题。其中选择题和填空题多考察“知道不知道”手写题和简答题则重点考察“会不会用”和“为什么这么用”。从科目占比来看JavaScript和前端基础是绝对的大头基本可以占到一半以上。算法题一般会安排1到2道难度在LeetCode中等偏下主要考察数组、字符串、二叉树这类常见数据结构很少出偏题怪题。计算机网络、浏览器原理、性能优化这类“内功题”也常常出现尤其浏览器缓存、渲染机制、跨域方案是高频考点。表格里我列一下常见的模块分布方便你对照自测考察模块常见题型大概占比核心能力要求JavaScript选择/填空/手写题35%左右原型、闭包、异步、手写实现CSS/HTML选择/简答15%左右布局、盒模型、定位、语义化计算机网络选择/简答10%左右HTTP、TCP、缓存、跨域浏览器原理选择/简答10%左右渲染、事件循环、存储框架/Vue/React选择/简答10%左右响应式、虚拟DOM、生命周期数据结构与算法编程题10%左右数组、字符串、树、动态规划工程化/其他选择/简答10%左右Webpack、模块化、Git这个占比不是绝对的每年都会有微调但大方向基本稳定。你如果准备时间有限优先把JavaScript、CSS、浏览器原理这三块吃透性价比最高。1.2 从题目反推大厂前端的用人标准很多人刷题只关注“这道题怎么做”却忽略了题目背后隐含的用人标准。我拆过不少大厂前端笔试卷发现一个明显的规律选择题往往在考察你的知识“边界”是否清晰手写题在考察你的代码“手感”是否熟练简答题则在考察你能否把复杂概念用简洁的语言讲清楚。比如卷子里出现“描述一下浏览器从输入URL到页面展示的整个过程”表面上是在考浏览器原理实际上是考察你的知识体系是否完整。这个问题可以答得很浅也可以一路延伸到DNS解析、TCP建连、HTTP请求、渲染管线、JS执行、性能优化面试官想通过你的回答判断你的技术深度和表达逻辑。再比如出现“谈谈你对闭包的理解”这类题不是让你背定义而是希望你从作用域链、内存、实际应用场景几个维度展开。如果你只回答“函数内部可以访问外部变量”就说明你对JS的理解还停留在“知道”层面没有形成自己的体系。大厂前端岗的核心要求是能写代码、能调性能、能理解框架背后的原理、能和后端顺畅沟通。这套试卷所有题目最终都指向这几点。2. JavaScript 核心考点拆解JavaScript是前端笔试的绝对主角各类题目层出不穷。这一章我把最常考、也最能拉分的几个知识点展开讲讲。2.1 原型链与继承闭卷必考的底层逻辑原型链几乎是每套前端笔试卷都会碰到的内容百度这套也不例外。常见的考法有两种一种是给一段代码问你某个属性/方法的查找路径另一种是让你实现几种继承方式比较它们的优缺点。先看一个典型的选择题套路function Parent() { this.name parent; } Parent.prototype.say function() { console.log(Hello); }; function Child() { Parent.call(this); this.age 18; } Child.prototype Object.create(Parent.prototype); Child.prototype.constructor Child; const child new Child(); console.log(child.name); // parent console.log(child.say()); // Hello这道题背后考察的是三个关键点构造函数的this指向、原型链查找机制、Object.create的作用。Parent.call(this)保证了子类实例拥有父类构造函数里的属性Child.prototype Object.create(Parent.prototype)让子类实例能沿着原型链找到父类原型上的方法而constructor修正则是为了避免原型对象指向混乱。如果让我给备考建议我会说不要把每种继承方式的代码死记硬背而是理解它们各自解决了什么问题。组合继承解决了属性共享问题但会调用两次父类构造函数寄生组合继承是目前最推荐的方案既共享原型方法又不会重复调用构造函数。理解了这一点遇到任何变形题都能应对。2.2 事件循环异步编程的分水岭事件循环是JavaScript笔试中出现频率极高的考点也是最容易“看起来会、一做就错”的题型。大厂特别爱考察setTimeout、Promise、async/await组合在一起时的执行顺序。来看一道很经典的题目console.log(script start); setTimeout(() { console.log(timeout); }, 0); Promise.resolve().then(() { console.log(promise1); }).then(() { console.log(promise2); }); console.log(script end);正确的输出顺序是script start、script end、promise1、promise2、timeout。原因在于JavaScript的执行顺序是先运行同步代码然后处理微任务队列再处理宏任务队列。Promise.then属于微任务setTimeout属于宏任务微任务永远比宏任务先执行。这里有三个易错点需要特别提醒async/await是Promise的语法糖await后面的代码相当于.then里的回调也属于微任务。微任务队列是“清空式”处理的也就是执行完一个微任务后会继续取下一个微任务执行直到队列为空才会去执行宏任务。requestAnimationFrame既不属于微任务也不属于宏任务它有独立的调度时机一般在渲染之前执行笔试中偶尔会作为干扰项出现。这个知识点对实际开发也很重要。你在排查线上问题时如果遇到“数据更新了但页面没变”“接口返回顺序不对”这类现象八成都是对事件循环的理解不到位。2.3 作用域与闭包无处不在的“陷阱题”闭包题几乎年年考变化也最多。最常见的是循环中var和let的差异题for (var i 0; i 5; i) { setTimeout(() { console.log(i); }, 100); }这段代码会输出5个5因为var声明的i是函数作用域循环结束后i已经变成5。如果换成let声明每次循环都会创建一个新的绑定输出就是0、1、2、3、4。更深一层面试官还会追问如何用var实现输出0到4。常见答案有三种使用立即执行函数(IIFE)传参for (var i 0; i 5; i) { (function(j) { setTimeout(() console.log(j), 100); })(i); }使用bind传参setTimeout(console.log.bind(null, i), 100)。在setTimeout的第三个参数上传值setTimeout(() console.log(i), 100, i)。闭包的另一个高频考点是内存泄漏。如果闭包引用了外部大对象而闭包本身长期存续外部对象就无法被回收。在实际项目中全局事件监听器、定时器回调是闭包内存泄漏的重灾区。笔试如果出简答题让你分析某段代码是否存在内存泄漏你只需要抓住“是否还有引用指向大对象”这个核心去判断即可。3. 前端基础HTML/CSS/浏览器这部分内容看起来“简单”实际上特别容易丢分因为考察点非常细而且喜欢出组合题。3.1 CSS布局从盒模型到Flex/GridCSS布局题在笔试里通常不会直接问你“Flex的语法有哪些”而是给出一个视觉稿让你选择用哪种方式实现或者让判断某段CSS会产生什么样的效果。盒模型是基础中的基础。标准盒模型中width只包含内容区而IE怪异盒模型中width包含内容、内边距和边框。通过box-sizing: border-box可以切换到怪异盒模型这也是现在大多数项目全局设置的原因——方便计算宽度避免内边距撑破布局。Flex布局几乎必考其中flex属性的简写规则是一个高频混淆点。flex: 1其实是flex: 1 1 0%的简写表示项目可以放大、可以缩小、基准尺寸为0。flex: auto则是flex: 1 1 auto基准尺寸为内容的原始大小。两者在实际布局中的表现差异很大笔试经常用这两种写法制造迷惑项。Grid布局也在逐渐增多但通常考察得比较基础比如grid-template-columns: repeat(3, 1fr)的作用、grid-area命名区域等。我建议你重点掌握Flex因为它在移动端布局中更通用Grid作为加分项了解基本语法即可。3.2 浏览器渲染与本地存储浏览器渲染机制是简答题的常客。核心的知识链是HTML解析成DOM树CSS解析成CSSOM树两者合并成渲染树然后计算布局、绘制、合成。面试官会在任何一环上提问比如“CSS会阻塞DOM解析吗”“defer和async有什么区别”。这几个问题值得你专门花时间理清楚CSS不会阻塞DOM解析但会阻塞渲染因为渲染树需要CSSOM。defer脚本会等待DOM解析完成后执行并且按顺序执行async脚本下载完成后立即执行不保证顺序。重排(Reflow)一定会引起重绘(Repaint)重绘不一定引起重排。修改width、top、font-size会触发重排修改color、background只会触发重绘。本地存储这块localStorage、sessionStorage、Cookie、IndexedDB的对比也常考。你需要清楚它们的容量上限、生命周期、是否自动携带到请求头。一个容易遗漏的知识点是Cookie设置HttpOnly后前端JS无法读取这是XSS防护的重要手段SameSite属性则影响跨站请求时的携带策略和登录态安全息息相关。每次做这类题我的感受都是不要死记硬背API而是以“整个页面加载到交互”为主轴把每个环节串联起来形成一个完整的流程。这样无论题目从哪个角度切入你都能应对。4. 编程题与框架综合题编程题是笔试中区分度最高的部分也是很多人最头疼的。这一章分享一些实用的答题思路。4.1 手写题防抖、节流、深拷贝手写防抖和节流是前端笔试的“保留节目”。几乎每套卷子都至少出其中一道有些甚至两个都考。它们的实现并不复杂但很考验对this指向和参数传递的理解。先看标准防抖实现function debounce(fn, wait 300) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, wait); }; }关键点在于返回的新函数里必须保留this和参数的传递。很多人在笔试时写掉了apply结果在事件监听场景里this指向出错直接丢分。节流实现类似常见的写法有两种一种基于时间戳一种基于定时器function throttle(fn, interval 300) { let last 0; return function(...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }深拷贝也是高频题。面试官会要求你实现一个函数能够拷贝对象、数组、函数、Date、RegExp等类型同时要处理循环引用。一个相对完整的实现如下function deepClone(value, map new WeakMap()) { if (typeof value ! object || value null) { return value; } if (value instanceof Date) return new Date(value); if (value instanceof RegExp) return new RegExp(value); if (map.has(value)) return map.get(value); const result Array.isArray(value) ? [] : {}; map.set(value, result); for (const key of Object.keys(value)) { result[key] deepClone(value[key], map); } return result; }这个实现里最容易被忽略的就是WeakMap处理循环引用。如果不处理拷贝一个自引用对象时会无限递归最终爆栈。能写出这一步说明你对JS内存模型有真实理解会给面试官留下很好的印象。4.2 框架原理与工程化框架题通常围绕Vue和React展开考察响应式原理、虚拟DOM、组件通信这些核心概念。Vue 2的响应式原理是Object.definePropertyVue 3换成了Proxy。选择题经常考这两者的区别。核心有几点Proxy可以监听对象属性的新增和删除Object.defineProperty不行Proxy可以监听数组索引和长度变化Object.defineProperty需要重写数组方法才能实现Proxy不会递归代理而是在访问时按需代理性能更优。React这边虚拟DOM和Diff算法是重点。你需要理解为什么需要虚拟DOM——直接操作真实DOM代价高JS对象操作代价低。Diff算法的时间复杂度从O(n^3)降到O(n)核心是分层对比、同层比较、key优化。如果简答题让你解释key的作用你要说到“复用节点、减少创建销毁、保证列表更新时状态不丢失”只回答“用于唯一标识”是不够的。工程化方面Webpack的构建流程、Loader和Plugin的区别是高频题。Loader负责对模块源码进行转换是一个函数Plugin则是对打包生命周期的扩展可以监听事件、修改输出。还有一个常考点是打包时为什么需要SplitChunks答案是为了抽离公共代码避免重复打包到多个入口减少最终产物体积。框架和工程化这一块我的建议是不要停留在“会用”要尝试自己读一遍核心源码或者看权威原理分析文章。笔试题目往往不会直接问API而是让你站在设计者的角度思考“为什么这么设计”。有了这层理解答起题来会游刃有余很多。5. 答题策略与常见坑这部分是从我多次做题和面试的经历中总结出来的经验希望能帮你在真实笔试中少踩坑。5.1 做题节奏和时间分配笔试时间一般在一个半小时到两个小时之间题量在30到50道。我的建议是先花3到5分钟快速浏览全卷把题目按“会的”“有点印象的”“完全不会的”分为三类。优先做会做的保证基础分拿全再做有点印象的争取拿到部分分最后对付完全不会的能蒙就蒙不要把时间耗在一道题上。手写代码题要特别留足时间至少留出30分钟。因为这类题不仅要写对还要考虑边界情况、代码规范、注释清晰度。很多同学前面选择题纠结太久后面编程题时间不够只能潦草写几行非常可惜。5.2 高频易错点清单我在批改简历和帮人模拟面试时发现几个反复出现的错误点这里列出来供你自查和的区别没有真正说清楚尤其是null undefined这个结果为true的判断。对let、const存在暂时性死区的理解模糊把“变量提升”和“暂时性死区”混为一谈。分不清slice、splice、split“数组方法”和“字符串方法”张冠李戴。position: fixed是否受父级transform影响这个考点很多人不知道会受影响。HTTP状态码只知道200和404但301、302、304、403、502的含义和使用场景没吃透。这些点不难但属于“基础中的基础”一旦在选择题里出现往往就是整道题的得分点。准备笔试时可以专门花半天时间把这些边界知识点过一遍性价比很高。5.3 从笔试到面试的衔接笔试的作用不仅仅是一张成绩单它还会影响后面的面试走向。据我所知面试官在面你之前会看你的笔试作答情况。如果你在笔试卷上写字迹潦草、逻辑混乱、代码缩进混乱面试官第一印象就会打折扣。反过来面试中也经常出现“你笔试时这道题怎么想的”这种问题。所以在笔试阶段不仅要写对还要在简答题里展现你的思考过程。比如回答“如何实现一个防抖函数”时除了给出代码还可以写一句“这个方案主要考虑了对this和参数的保留以及定时器复用”。这些细节能体现你的工程意识面试官会注意到。最后再分享一个我自己用过的备考方法把做错的题整理成一个“错题对照表”左边写自己当时的错误答案右边写正确思路。不要只写正确答案就完事而是要把错误原因写出来比如“我以为setTimeout在微任务队列”或是“我混淆了slice和splice的返回值”。这样复习时效率非常高考前过一遍错题表比自己盲目翻笔记有用得多。这套笔试卷整体难度中等偏上但每一道题都踩在基本功点上。你如果能把上面这几个板块吃透再配合两套真题模拟训练应对2020年这批笔试卷或同级别的其他大厂前端笔试都会很有底气。 2020百度前端笔试卷解析：从JavaScript到工程实践的核心考点
百度前端笔试这两年一直是校招圈子里讨论度很高的东西尤其“2020校招Web前端工程师笔试卷第二批”这套题我身边不少学弟学妹都刷过。这套题和第一批相比题型分布上做了不少调整考察重心也明显从“死记硬背”转向“底层原理 工程实践”。如果你正在准备大厂前端岗或者想系统自查一下基础功底这套题很适合拿来当一次模拟考。它能帮你快速定位薄弱点也能让你看清大厂校招前端到底在筛选什么样的人。1. 整体拆解这类笔试卷究竟在考察什么先说个很多人容易忽略的点大厂校招笔试的定位从来不是“筛出满分选手”而是在海量简历里快速找出“基础扎实、有潜力、能干活”的人。因此试卷不会只考某一个方向而是覆盖计算机基础、JavaScript、CSS/HTML、框架、算法、网络等多个模块。你不需要每道题都会但必须在核心模块上稳得住。1.1 题型分布与科目占比以2020年这批前端笔试卷为参考常见的题型组合是单选题、多选题、填空题、手写代码题、简答题。其中选择题和填空题多考察“知道不知道”手写题和简答题则重点考察“会不会用”和“为什么这么用”。从科目占比来看JavaScript和前端基础是绝对的大头基本可以占到一半以上。算法题一般会安排1到2道难度在LeetCode中等偏下主要考察数组、字符串、二叉树这类常见数据结构很少出偏题怪题。计算机网络、浏览器原理、性能优化这类“内功题”也常常出现尤其浏览器缓存、渲染机制、跨域方案是高频考点。表格里我列一下常见的模块分布方便你对照自测考察模块常见题型大概占比核心能力要求JavaScript选择/填空/手写题35%左右原型、闭包、异步、手写实现CSS/HTML选择/简答15%左右布局、盒模型、定位、语义化计算机网络选择/简答10%左右HTTP、TCP、缓存、跨域浏览器原理选择/简答10%左右渲染、事件循环、存储框架/Vue/React选择/简答10%左右响应式、虚拟DOM、生命周期数据结构与算法编程题10%左右数组、字符串、树、动态规划工程化/其他选择/简答10%左右Webpack、模块化、Git这个占比不是绝对的每年都会有微调但大方向基本稳定。你如果准备时间有限优先把JavaScript、CSS、浏览器原理这三块吃透性价比最高。1.2 从题目反推大厂前端的用人标准很多人刷题只关注“这道题怎么做”却忽略了题目背后隐含的用人标准。我拆过不少大厂前端笔试卷发现一个明显的规律选择题往往在考察你的知识“边界”是否清晰手写题在考察你的代码“手感”是否熟练简答题则在考察你能否把复杂概念用简洁的语言讲清楚。比如卷子里出现“描述一下浏览器从输入URL到页面展示的整个过程”表面上是在考浏览器原理实际上是考察你的知识体系是否完整。这个问题可以答得很浅也可以一路延伸到DNS解析、TCP建连、HTTP请求、渲染管线、JS执行、性能优化面试官想通过你的回答判断你的技术深度和表达逻辑。再比如出现“谈谈你对闭包的理解”这类题不是让你背定义而是希望你从作用域链、内存、实际应用场景几个维度展开。如果你只回答“函数内部可以访问外部变量”就说明你对JS的理解还停留在“知道”层面没有形成自己的体系。大厂前端岗的核心要求是能写代码、能调性能、能理解框架背后的原理、能和后端顺畅沟通。这套试卷所有题目最终都指向这几点。2. JavaScript 核心考点拆解JavaScript是前端笔试的绝对主角各类题目层出不穷。这一章我把最常考、也最能拉分的几个知识点展开讲讲。2.1 原型链与继承闭卷必考的底层逻辑原型链几乎是每套前端笔试卷都会碰到的内容百度这套也不例外。常见的考法有两种一种是给一段代码问你某个属性/方法的查找路径另一种是让你实现几种继承方式比较它们的优缺点。先看一个典型的选择题套路function Parent() { this.name parent; } Parent.prototype.say function() { console.log(Hello); }; function Child() { Parent.call(this); this.age 18; } Child.prototype Object.create(Parent.prototype); Child.prototype.constructor Child; const child new Child(); console.log(child.name); // parent console.log(child.say()); // Hello这道题背后考察的是三个关键点构造函数的this指向、原型链查找机制、Object.create的作用。Parent.call(this)保证了子类实例拥有父类构造函数里的属性Child.prototype Object.create(Parent.prototype)让子类实例能沿着原型链找到父类原型上的方法而constructor修正则是为了避免原型对象指向混乱。如果让我给备考建议我会说不要把每种继承方式的代码死记硬背而是理解它们各自解决了什么问题。组合继承解决了属性共享问题但会调用两次父类构造函数寄生组合继承是目前最推荐的方案既共享原型方法又不会重复调用构造函数。理解了这一点遇到任何变形题都能应对。2.2 事件循环异步编程的分水岭事件循环是JavaScript笔试中出现频率极高的考点也是最容易“看起来会、一做就错”的题型。大厂特别爱考察setTimeout、Promise、async/await组合在一起时的执行顺序。来看一道很经典的题目console.log(script start); setTimeout(() { console.log(timeout); }, 0); Promise.resolve().then(() { console.log(promise1); }).then(() { console.log(promise2); }); console.log(script end);正确的输出顺序是script start、script end、promise1、promise2、timeout。原因在于JavaScript的执行顺序是先运行同步代码然后处理微任务队列再处理宏任务队列。Promise.then属于微任务setTimeout属于宏任务微任务永远比宏任务先执行。这里有三个易错点需要特别提醒async/await是Promise的语法糖await后面的代码相当于.then里的回调也属于微任务。微任务队列是“清空式”处理的也就是执行完一个微任务后会继续取下一个微任务执行直到队列为空才会去执行宏任务。requestAnimationFrame既不属于微任务也不属于宏任务它有独立的调度时机一般在渲染之前执行笔试中偶尔会作为干扰项出现。这个知识点对实际开发也很重要。你在排查线上问题时如果遇到“数据更新了但页面没变”“接口返回顺序不对”这类现象八成都是对事件循环的理解不到位。2.3 作用域与闭包无处不在的“陷阱题”闭包题几乎年年考变化也最多。最常见的是循环中var和let的差异题for (var i 0; i 5; i) { setTimeout(() { console.log(i); }, 100); }这段代码会输出5个5因为var声明的i是函数作用域循环结束后i已经变成5。如果换成let声明每次循环都会创建一个新的绑定输出就是0、1、2、3、4。更深一层面试官还会追问如何用var实现输出0到4。常见答案有三种使用立即执行函数(IIFE)传参for (var i 0; i 5; i) { (function(j) { setTimeout(() console.log(j), 100); })(i); }使用bind传参setTimeout(console.log.bind(null, i), 100)。在setTimeout的第三个参数上传值setTimeout(() console.log(i), 100, i)。闭包的另一个高频考点是内存泄漏。如果闭包引用了外部大对象而闭包本身长期存续外部对象就无法被回收。在实际项目中全局事件监听器、定时器回调是闭包内存泄漏的重灾区。笔试如果出简答题让你分析某段代码是否存在内存泄漏你只需要抓住“是否还有引用指向大对象”这个核心去判断即可。3. 前端基础HTML/CSS/浏览器这部分内容看起来“简单”实际上特别容易丢分因为考察点非常细而且喜欢出组合题。3.1 CSS布局从盒模型到Flex/GridCSS布局题在笔试里通常不会直接问你“Flex的语法有哪些”而是给出一个视觉稿让你选择用哪种方式实现或者让判断某段CSS会产生什么样的效果。盒模型是基础中的基础。标准盒模型中width只包含内容区而IE怪异盒模型中width包含内容、内边距和边框。通过box-sizing: border-box可以切换到怪异盒模型这也是现在大多数项目全局设置的原因——方便计算宽度避免内边距撑破布局。Flex布局几乎必考其中flex属性的简写规则是一个高频混淆点。flex: 1其实是flex: 1 1 0%的简写表示项目可以放大、可以缩小、基准尺寸为0。flex: auto则是flex: 1 1 auto基准尺寸为内容的原始大小。两者在实际布局中的表现差异很大笔试经常用这两种写法制造迷惑项。Grid布局也在逐渐增多但通常考察得比较基础比如grid-template-columns: repeat(3, 1fr)的作用、grid-area命名区域等。我建议你重点掌握Flex因为它在移动端布局中更通用Grid作为加分项了解基本语法即可。3.2 浏览器渲染与本地存储浏览器渲染机制是简答题的常客。核心的知识链是HTML解析成DOM树CSS解析成CSSOM树两者合并成渲染树然后计算布局、绘制、合成。面试官会在任何一环上提问比如“CSS会阻塞DOM解析吗”“defer和async有什么区别”。这几个问题值得你专门花时间理清楚CSS不会阻塞DOM解析但会阻塞渲染因为渲染树需要CSSOM。defer脚本会等待DOM解析完成后执行并且按顺序执行async脚本下载完成后立即执行不保证顺序。重排(Reflow)一定会引起重绘(Repaint)重绘不一定引起重排。修改width、top、font-size会触发重排修改color、background只会触发重绘。本地存储这块localStorage、sessionStorage、Cookie、IndexedDB的对比也常考。你需要清楚它们的容量上限、生命周期、是否自动携带到请求头。一个容易遗漏的知识点是Cookie设置HttpOnly后前端JS无法读取这是XSS防护的重要手段SameSite属性则影响跨站请求时的携带策略和登录态安全息息相关。每次做这类题我的感受都是不要死记硬背API而是以“整个页面加载到交互”为主轴把每个环节串联起来形成一个完整的流程。这样无论题目从哪个角度切入你都能应对。4. 编程题与框架综合题编程题是笔试中区分度最高的部分也是很多人最头疼的。这一章分享一些实用的答题思路。4.1 手写题防抖、节流、深拷贝手写防抖和节流是前端笔试的“保留节目”。几乎每套卷子都至少出其中一道有些甚至两个都考。它们的实现并不复杂但很考验对this指向和参数传递的理解。先看标准防抖实现function debounce(fn, wait 300) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, wait); }; }关键点在于返回的新函数里必须保留this和参数的传递。很多人在笔试时写掉了apply结果在事件监听场景里this指向出错直接丢分。节流实现类似常见的写法有两种一种基于时间戳一种基于定时器function throttle(fn, interval 300) { let last 0; return function(...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }深拷贝也是高频题。面试官会要求你实现一个函数能够拷贝对象、数组、函数、Date、RegExp等类型同时要处理循环引用。一个相对完整的实现如下function deepClone(value, map new WeakMap()) { if (typeof value ! object || value null) { return value; } if (value instanceof Date) return new Date(value); if (value instanceof RegExp) return new RegExp(value); if (map.has(value)) return map.get(value); const result Array.isArray(value) ? [] : {}; map.set(value, result); for (const key of Object.keys(value)) { result[key] deepClone(value[key], map); } return result; }这个实现里最容易被忽略的就是WeakMap处理循环引用。如果不处理拷贝一个自引用对象时会无限递归最终爆栈。能写出这一步说明你对JS内存模型有真实理解会给面试官留下很好的印象。4.2 框架原理与工程化框架题通常围绕Vue和React展开考察响应式原理、虚拟DOM、组件通信这些核心概念。Vue 2的响应式原理是Object.definePropertyVue 3换成了Proxy。选择题经常考这两者的区别。核心有几点Proxy可以监听对象属性的新增和删除Object.defineProperty不行Proxy可以监听数组索引和长度变化Object.defineProperty需要重写数组方法才能实现Proxy不会递归代理而是在访问时按需代理性能更优。React这边虚拟DOM和Diff算法是重点。你需要理解为什么需要虚拟DOM——直接操作真实DOM代价高JS对象操作代价低。Diff算法的时间复杂度从O(n^3)降到O(n)核心是分层对比、同层比较、key优化。如果简答题让你解释key的作用你要说到“复用节点、减少创建销毁、保证列表更新时状态不丢失”只回答“用于唯一标识”是不够的。工程化方面Webpack的构建流程、Loader和Plugin的区别是高频题。Loader负责对模块源码进行转换是一个函数Plugin则是对打包生命周期的扩展可以监听事件、修改输出。还有一个常考点是打包时为什么需要SplitChunks答案是为了抽离公共代码避免重复打包到多个入口减少最终产物体积。框架和工程化这一块我的建议是不要停留在“会用”要尝试自己读一遍核心源码或者看权威原理分析文章。笔试题目往往不会直接问API而是让你站在设计者的角度思考“为什么这么设计”。有了这层理解答起题来会游刃有余很多。5. 答题策略与常见坑这部分是从我多次做题和面试的经历中总结出来的经验希望能帮你在真实笔试中少踩坑。5.1 做题节奏和时间分配笔试时间一般在一个半小时到两个小时之间题量在30到50道。我的建议是先花3到5分钟快速浏览全卷把题目按“会的”“有点印象的”“完全不会的”分为三类。优先做会做的保证基础分拿全再做有点印象的争取拿到部分分最后对付完全不会的能蒙就蒙不要把时间耗在一道题上。手写代码题要特别留足时间至少留出30分钟。因为这类题不仅要写对还要考虑边界情况、代码规范、注释清晰度。很多同学前面选择题纠结太久后面编程题时间不够只能潦草写几行非常可惜。5.2 高频易错点清单我在批改简历和帮人模拟面试时发现几个反复出现的错误点这里列出来供你自查和的区别没有真正说清楚尤其是null undefined这个结果为true的判断。对let、const存在暂时性死区的理解模糊把“变量提升”和“暂时性死区”混为一谈。分不清slice、splice、split“数组方法”和“字符串方法”张冠李戴。position: fixed是否受父级transform影响这个考点很多人不知道会受影响。HTTP状态码只知道200和404但301、302、304、403、502的含义和使用场景没吃透。这些点不难但属于“基础中的基础”一旦在选择题里出现往往就是整道题的得分点。准备笔试时可以专门花半天时间把这些边界知识点过一遍性价比很高。5.3 从笔试到面试的衔接笔试的作用不仅仅是一张成绩单它还会影响后面的面试走向。据我所知面试官在面你之前会看你的笔试作答情况。如果你在笔试卷上写字迹潦草、逻辑混乱、代码缩进混乱面试官第一印象就会打折扣。反过来面试中也经常出现“你笔试时这道题怎么想的”这种问题。所以在笔试阶段不仅要写对还要在简答题里展现你的思考过程。比如回答“如何实现一个防抖函数”时除了给出代码还可以写一句“这个方案主要考虑了对this和参数的保留以及定时器复用”。这些细节能体现你的工程意识面试官会注意到。最后再分享一个我自己用过的备考方法把做错的题整理成一个“错题对照表”左边写自己当时的错误答案右边写正确思路。不要只写正确答案就完事而是要把错误原因写出来比如“我以为setTimeout在微任务队列”或是“我混淆了slice和splice的返回值”。这样复习时效率非常高考前过一遍错题表比自己盲目翻笔记有用得多。这套笔试卷整体难度中等偏上但每一道题都踩在基本功点上。你如果能把上面这几个板块吃透再配合两套真题模拟训练应对2020年这批笔试卷或同级别的其他大厂前端笔试都会很有底气。