2026/9/1 21:48:50
FEATURED · 精选文章 
浩鲸科技2020届前端类A卷这个标题对很多经历过校招的人来说应该不陌生。浩鲸科技的前身是中兴软创在运营商BSS/OSS领域做了很多年后来和阿里云合作之后整体技术栈和研发体系也逐步向互联网靠拢。2020届的这套前端A卷虽然过去几年了但它考察的知识点结构、出题思路放在今天的前端面试题里依然很有参考价值——尤其是如果你想投的是To B/企业服务方向的前端岗位。这篇文章我就以这套A卷为切入点把前端校招笔试里最高频的考点、每类题的答题思路、以及我踩过的坑系统梳理一遍。不管你是正在准备2026年校招还是工作后想跳槽补基础这套拆解都值得一看。1. 这套前端A卷到底想筛选什么样的人1.1 浩鲸科技的招聘背景与前端团队画像先搞清楚公司背景你才能理解它为什么这么出题。浩鲸科技脱胎于中兴软创2018年前后引入阿里投资后开始从传统通信软件厂商向数字化服务商转型。它服务的客户主要是电信运营商、政府和大型企业这类客户的项目有几个鲜明特点项目周期长、业务逻辑复杂、对稳定性要求极高、需要大量定制化开发。这意味着前端团队在实际工作中做的东西非常杂——可能是内部运营管理平台、数据可视化大屏、工单系统、低代码配置界面也可能是面向最终用户的H5应用。它不要求你去做特别前沿的视觉动效但要求你能把复杂业务抽象成清晰的前端架构能处理各种浏览器兼容问题能写出可维护的代码。所以A卷的出题逻辑就很清晰了不考偏题怪题聚焦在前端工程师日常开发中真正会用到的基础能力。比起考察你背了多少新框架API它更想确认你的JavaScript功底扎不扎实、浏览器原理懂不懂、遇到实际问题有没有清晰的解决思路。1.2 A卷的整体结构与题型分布2020届前端类A卷的题型大致分为四类客观选择题单选多选、简答题、手写代码题、综合设计题。分值分布上选择题占比约30%简答约20%手写代码约35%综合设计约15%。选择题覆盖面很广从HTML语义化到CSS布局从JavaScript作用域到浏览器缓存基本就是前端面试八股文里最核心的那些点。简答题侧重原理阐述比如让你解释事件委托、描述跨域解决方案、说清楚从输入URL到页面渲染的完整过程。手写代码题是这个卷子的重头戏常见的组合是手写防抖节流手写深拷贝手写一个简单的Promise或者数组去重有些场次还会出一两道数组或字符串相关的算法题。综合设计题一般是给一个业务场景让你设计方案比如“在一个大型后台管理系统中如何设计一套可复用的权限控制方案”。整套卷子做下来感受就是它不追求让你一道题都答不上来但每个模块都设置了梯度——基础题你能拿分进阶题看你的理解深度手写代码题直接拉开差距。1.3 试卷覆盖的知识点地图把A卷覆盖的知识点拆开来看可以画成一张清晰的地图知识模块具体考点考题形式权重HTML/CSS语义化标签、盒模型、flex/grid、BFC、层叠上下文选择题简答15%JavaScript原型链、this指向、闭包、事件循环、Promise、深浅拷贝、防抖节流选择题简答手写40%浏览器与网络渲染原理、缓存机制、跨域、HTTP/HTTPS选择题简答20%框架基础Vue/React生命周期、响应式原理、组件通信选择题简答10%工程化与安全webpack基础、模块化、XSS/CSRF选择题简答10%算法与综合设计数组字符串处理、业务方案设计手写代码设计5%JavaScript占比接近一半这说明试卷命题人非常清楚前端面试的核心在哪里——语言基础决定你的上限。把JavaScript吃透这套卷子你就拿下了大半。2. 前端基础考点每一分都要拿稳2.1 HTML/CSS选择题里的常客这类题目看似简单丢分很亏但每年都有不少人在里面翻车。HTML部分的考点几乎都在语义化标签和SEO的配合上比如header、nav、main、article这些标签的正确使用场景以及h1标签在一个页面中出现几次算是合理。CSS部分的坑就更多了盒模型的两种计算方式content-box和border-box必有一道flex布局里flex: 1到底意味着什么grid的fr单位和%的区别这些都要做到条件反射级别的熟练。有一个高频考点值得单独拎出来说——BFC块级格式化上下文。它经常以“如何解决margin塌陷”或者“如何实现两栏自适应布局”这类形式出现。BFC的触发条件overflow: hidden、display: inline-block、position: absolute等一定要背下来同时要能解释清楚BFC解决了什么问题内部元素不会影响外部布局这在实际开发中处理浮动塌陷和margin重叠时太常用了。多选题是这类题里最让人头疼的因为多选少选都没分。对策只有一个把知识点学得“绝对化”对就是对、错就是错不能只记个大概印象。比如问你哪些属性可以触发GPU加速你得准确知道transform、opacity、filter可以而width、height的动画不会问你哪些是CSS3新特性你要把calc()、flex、grid、custom properties这些边界都弄清楚。2.2 JavaScript从原型链到异步编程JavaScript部分是整张卷子的灵魂。选择题层面最常见的是原型链和this指向的混合考察一句话描述就是“谁调用this就指向谁”。但笔试里不会这么温柔它会给你一段代码里面既有普通函数调用、又有对象方法调用、还混着箭头函数让你判断最终输出。做这类题我建议先画调用栈把每个函数的调用者标记出来再结合new绑定和显式绑定call/apply/bind的优先级来判断准确率能高不少。异步编程的题基本围绕事件循环展开会考察宏任务和微任务的执行顺序。这里有一个特别容易踩坑的点Promise构造函数里的代码是同步执行的只有then里的回调才是微任务。所以new Promise((resolve) { console.log(a); resolve(); }).then(() console.log(b))的输出顺序是a → b但如果中间夹了setTimeout和async/await次序就需要仔细推演了。建议找几道经典的“打印顺序题”练到闭着眼都能写对为止。闭包和作用域也是高频考点。它最经典的考法是一个for循环里用var声明变量setTimeout回调里打印索引问输出是什么、怎么修复。这题背后的原理是词法作用域和闭包捕获的是变量引用而不是值。修复方案有两个方向用let形成块级作用域或者用IIFE立即执行函数传参。之前有人在网上争论这两种方案哪种更好实测下来在循环这种场景下let更符合直觉但IIFE能体现你理解得更深笔试简答时两者都写出来才是最优解。2.3 手写代码题的解题思路手写代码题是整张卷子里拉开差距的关键。虽然考察的函数名都耳熟能详但真正动笔写的时候很多人会暴露两个问题边界条件处理不全、代码风格不干净。以手写防抖函数为例标准答案大概是这个样子的function debounce(fn, delay, immediate false) { let timer null; let isInvoked false; return function(...args) { const context this; if (immediate !isInvoked) { fn.apply(context, args); isInvoked true; return; } if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); isInvoked false; }, delay); }; }这里有几个细节是阅卷人非常看重的一是要用...收集剩余参数而不是简单用arguments二是要apply(context, args)保存调用时的this指向三是immediate参数对应了“立即执行版”防抖这超出了大多数人背的模板能写出来说明你是真的理解防抖而不是背代码。手写深拷贝也是一个经典的拉分题。初级答案是用JSON.parse(JSON.stringify(obj))但你要知道这种方案会丢失undefined、function、Symbol类型的属性也不能处理循环引用。更好的答案是递归实现并在递归过程中用WeakMap记录已经拷贝过的对象来解决循环引用。笔试时间有限不用写到完美的生产级代码但至少要体现出“我知道有循环引用问题并给出了解决方案”这个程度。还有些卷子会出现算法题比如求数组最大连续子序列和、字符串去重后按字典序排列、两数之和。这类题考的是JS语言基本功和基础算法思维不需要刷LeetCode困难题。我的建议是每道题先想清楚时间复杂度和空间复杂度再动笔。如果你写出来的解法是O(n²)而你能说清楚为什么可以优化到O(n)阅卷人会觉得你的算法意识是过关的。3. 框架与工程化从八股文到实战认知3.1 Vue/React核心原理怎么答不扣分2020届前后浩鲸科技的前端主力栈是Vue所以A卷在框架部分会更偏向Vue但React的生命周期和Hooks也可能出现。框架题的考察方式通常是简答题比如“简述Vue响应式原理”或者“Vue中v-if和v-show的区别”。回答Vue响应式原理时切忌只答“Vue用Object.defineProperty劫持数据”。更完整的回答框架是数据初始化时Vue递归遍历data中每个属性用Object.defineProperty把它们转成getter/setter每个组件实例有一个Watcher当组件渲染时把Watcher收集到对应属性的Dep订阅器里当属性被修改时setter触发Dep通知所有订阅的Watcher执行更新。如果追问Vue 3为什么改用Proxy要能答出两点Proxy可以监听对象属性的新增和删除而Object.defineProperty做不到Proxy直接代理整个对象不需要递归遍历默认属性性能更好。这种“不仅知道是什么还能对比为什么”的答案分数自然就上去了。v-if和v-show的区别是前端面试必考题但在笔试里想拿满分需要答出三层第一层是渲染机制不同——v-if是真正条件渲染不满足条件时DOM节点不存在v-show只是切换display属性DOM节点始终存在。第二层是编译过程不同——v-if在编译时会生成三元表达式v-show生成指令直接操作样式。第三层是使用场景建议——频繁切换用v-show运行时条件很少改变用v-if。能答出第三层的人就说明他不是单纯背答案而是真的在项目里遇到过这个选型问题。组件通信也是高频考点。Vue里的通信方式包括props向下传值、$emit向上抛事件、provide/inject跨层级共享、EventBus任意组件间通信、Vuex做全局状态管理。答题时最好结合场景说明比如“封装一个通用表组件用props传入配置项、用$emit暴露排序和筛选事件、用Vuex管理跨页面的筛选条件”。3.2 浏览器与网络常考但容易翻车的地方浏览器原理和网络基础是很多前端面试者的重灾区因为它不像JavaScript能天天写知识点偏底层经常是“好像知道但说不完整”。A卷里这类题的考察重点是“从输入URL到页面渲染的完整过程”这道题几乎每年出现但很多人能写出来的核心步骤不超过三步DNS解析→请求HTML→渲染引擎渲染。完整回答应该覆盖七个环节URL解析与编码、DNS查询浏览器缓存→系统缓存→路由器缓存→根服务器迭代查询、TCP连接建立三次握手HTTPS还要加TLS握手这就要提到对称加密和非对称加密的配合、发送HTTP请求包含请求头和请求体、服务器响应并返回资源此时会涉及状态码和缓存策略、浏览器解析HTML构建DOM树、解析CSS构建CSSOM树、合并成渲染树、计算布局、绘制页面JS的解析和执行会阻塞DOM构建所以要放在body底部或者加defer/async。另一个高频点是HTTP缓存。选择题和简答都可能考重点是两大缓存策略强缓存Expires和Cache-Control命中后不发请求和协商缓存Last-Modified/If-Modified-Since和ETag/If-None-Match需要请求服务器确认资源是否变化。笔试时只要把这两种缓存策略的触发条件、首部字段、交互过程写清楚基本就是满分答案。跨域问题也是必考项。要答清楚什么是同源策略、为什么需要跨域方案、有哪些方案——JSONP利用script标签不受同源限制、CORS通过在响应头加Access-Control-Allow-Origin来实现、postMessage用于父子窗口通信、反向代理常用于开发环境。尤其要分清CORS和JSONP的适用场景JSONP只支持GET请求且需要服务端配合返回特定格式CORS支持各种HTTP方法但需要服务端设置响应头。理解“哪些是前端能解决的哪些必须后端配合”面试官听到这里就会点头。3.3 工程化与安全体现项目经验的分水岭工程化和安全类的题目在A卷里占比不算高但它很好地起到了“区分度”的作用。前端基础好的人不一定有工程化认知工程化认知到位的人往往是在真实项目中摔打过的。webpack的考察点集中在两个方向概念辨析和配置理解。概念辨析的经典考题是“loader和plugin的区别”loader是用来对模块的源代码进行转换的处理的是文件级别的输入输出plugin是用来扩展webpack功能的可以监听编译生命周期事件在打包的某个阶段做额外的事情。这个回答一旦展开很多人的短板就暴露了——说不清楚一个常用的loader和plugin的具体作用。如果笔试问到这里建议优先答babel-loaderES6转ES5和html-webpack-plugin自动生成HTML并注入打包后的资源这两个是最常见的。前端安全的知识点相对固定XSS和CSRF是两座大山。XSS要答出三种类型存储型恶意脚本存到数据库、反射型恶意脚本由URL参数带入、DOM型通过修改DOM节点触发每种都要给出一个例子。防御手段的核心是转义和消毒不能用用户输入拼HTML。CSRF要答出攻击原理诱导用户携带cookie访问恶意构造的请求。防御手段包括校验Referer、使用CSRF Token、设置SameSite Cookie属性。这两块知识的表达要精练因为笔试简答的空间有限每个点说到位即可不需要长篇大论。4. 综合题与开放题怎么答才显得有思考4.1 设计方案题的答题框架综合设计题是A卷里最让人犯怵的部分因为它没有标准答案考察的是你面对模糊需求时的拆解能力。常见考题有“设计一个前端错误监控系统”、“为一个大型后台系统设计权限控制方案”、“如何优化一个首屏加载超过5秒的H5页面”。这类题目有一个通用的答题框架我按照实际经验给你梳理一下第一步是需求澄清。不要上来就写方案先用两三句话定义问题边界。比如设计错误监控系统你要说明监控的范围是运行时JS错误、资源加载错误还是HTTP请求错误数据上报的时机是实时还是批量影响的范围是哪些环境和哪些页面。这一步的目的是让阅卷人看到你有需求分析能力。第二步是技术选型。给出方案时要有取舍的理由。还是以错误监控系统为例你可以说“考虑到公司内部项目体量优先使用window.onerror捕获运行时错误配合addEventListener(error, handler, true)捕获资源加载错误通过sendBeacon接口在页面卸载时上报日志而不是使用new Image().src埋点因为sendBeacon在页面关闭时更可靠”。这种带理由的选型比罗列概念强十倍。第三步是细节展开。选一个模块深入说一下实现要点比如“存储错误信息的buffer设置上限超过100条就触发一次批量上报避免频繁请求”。细节越具体说明你越接近真实的工程实践。第四步是风险兜底。提出自己方案的局限性和优化方向比如“由于跨域脚本无法拿到具体堆栈需要服务端在Access-Control-Allow-Origin中放开策略并配合crossorigin属性使用”。开放题没有唯一答案但答题框架完整、逻辑自洽是拿高分的关键。4.2 算法题的准备策略前端笔试里的算法题难度普遍低于后端和算法岗。浩鲸这套A卷里的算法题大概率是数组去重、字符串翻转、两数之和、斐波那契数列这类基础题偶有进阶版本会考到二叉树遍历或者动态规划入门。但我建议不要因为题目简单就掉以轻心准备时要做到“一题多解”。拿数组去重来说至少要知道四种解法Set一行流、双重循环、reduceincludes、利用对象键唯一性。笔试时如果时间足够优先写时间和空间复杂度最优的解法并且在注释里补一句“使用Set时间复杂度O(n)”如果时间紧张写最简单的解法也比留空强。遇到没见过的题也有策略。第一步是先用暴力解法写出一版能跑通的代码保证拿到基础分然后分析是否有更优解如果不能短时间想出来就在注释里写出优化思路。阅卷人看的是你的思考过程不是最终答案本身。4.3 大厂校招笔试的通用方法论我做过的前端校招笔试题不止浩鲸这一套回过头来看这些卷子有一个共同规律基础题占60%左右进阶题占30%难题占10%。很多人的策略是本末倒置的——花大量时间准备那10%的难题结果前面60%的基础题因为粗心或者记忆模糊丢了不少分。正确的打法是先保证基础题的正确率再谈难题的突破。笔试现场的时间分配也很关键建议拿到卷子先花两分钟把全部题目扫一遍标记出哪些是必拿分题、哪些是需要思考的题先做必拿分题把该得的分稳定装进口袋再啃硬骨头。还有一个小技巧多选和填空的题目如果对某个选项不确定尽量用排除法缩小范围。多选题宁少选不多选因为你多选一个错误的整道题就是零分少选一个虽然可能不满分但多少还能保住一点。5. 实战复盘这套A卷暴露出的备考共性问题5.1 做题时的踩坑清单结合我自己做题和帮别人批改简历/模拟面试的经历这套A卷暴露出的共性问题高度集中在以下五个方面。第一对“闭包”的理解停留在定义层面。很多人能说出“闭包就是函数内部访问外部变量”但一上手写代码就懵。笔试里闭包最常见的坑是循环中var变量被共享的问题见到就要条件反射想到let或者IIFE。第二对“事件循环”只会背结论不会推演。宏任务和微任务的顺序很多人能背出来但一旦题目给你一段混合了await、Promise.then、setTimeout、process.nextTickNode场景的代码就乱了。建议平时就用node环境跑几段代码亲手验证输出顺序比死记硬背强多了。第三手写代码时不注意函数入参校验。比如手写防抖函数很多人不处理immediate参数不判断fn是否为函数类型。虽然这不是核心考点但代码的健壮性反映了一个人的开发习惯。第四网络相关的术语理解不准确。比如“TCP三次握手、四次挥手”能写出来但“为什么是三次而不是两次”解释不清。“为什么是三次”的答案是三次握手可以避免历史重复连接初始化造成的混乱可以同步双方的初始序列号。这个理解到位了网络题的深度就出来了。第五综合题容易答得“大而空”。比如“如何优化页面性能”很多人写“使用CDN、压缩图片、代码分割”但缺少数据支撑和量化指标。更理想的回答是“首屏加载时间从3.2秒优化到1.5秒其中CDN贡献了30%的提速代码分割让首屏JS体积从800KB降到250KB图片转WebP并加懒加载让图片体积下降了60%”。数字比形容词有说服力得多。5.2 从A卷出发的学习路线建议以备考这套A卷为起点整理一条自己的前端学习路线后劲儿会非常大。第一阶段是JavaScript语言核心。不急着上框架先把《JavaScript高级程序设计》前几章吃透再把“作用域、闭包、this、原型、Promise、事件循环”这几个专题逐个攻破每个专题都用代码验证一遍。这个阶段是地基花多少时间都值。第二阶段是浏览器和网络基础。把从输入URL到页面渲染的完整链路弄明白每个环节都能画出图并说清原理。HTTP缓存、跨域方案、Web安全这三块要独立成笔记随时能复述。第三阶段是框架源码入门。不是让你啃源码而是理解框架的核心机制的“是什么”和“为什么”。Vue的响应式原理、虚拟DOM和diff策略要能讲清楚React的Fiber架构和Hooks实现原理了解即可。这个阶段能让你在框架题的简答中写出有深度的答案。第四阶段是工程化实践。手动搭一次webpack配置搞懂loader、plugin、devServer、代码分割、Tree Shaking这些概念哪怕项目很小也比背十篇webpack教程有效果。第五阶段才是刷题。有了前面四个阶段的积累再刷真题和LeetCode热门题你会发现很多题就是“换了个壳”的旧知识做起来轻松很多。5.3 简历、笔试和面试如何打配合通常笔试过了就是面试但很多人没有意识到简历上写的内容和笔试考的内容是强关联的。面试官会拿着你的简历对照笔试的答题情况来提问。比如你简历上写“熟悉webpack优化”面试官看到你笔试时loader和plugin的题答得一般就大概率会追问你项目里到底怎么做的代码分割、做了之后有什么量化的提升。所以简历上写的每一个技术点都要问自己一句“如果面试官问三个为什么我能答上来吗”。答不上的要么现在补要么别写。笔试题里暴露的短板也会成为面试环节的重灾区。如果你笔试时手写Promise写得磕磕绊绊面试官极大概率会让你现场再写一遍还会延伸问“Promise.all和Promise.race有什么区别”。所以考完试别急着放松先把卷子里不确定的题全部复盘一遍把自己短板的周边知识也顺带复习了。还有一个容易被忽略的点题量大的卷子字迹和排版会直接影响分数。手写代码时建议先把大概思路用一两句注释写在旁边再开始写代码这样即使代码有小问题阅卷人也能看出你的思维是清晰的。写在最后的个人体会做这套A卷最大的感受就是前端面试题虽然千变万化但内核始终一致——语言功底是否扎实、原理是否真的理解、工程化是否有实战经验。浩鲸科技这套A卷没有什么偏门怪题但每一道送分题背后都站着一个需要你真正理解的知识点。如果你正在准备2026年校招我建议不要去背现成的面试题答案库而是把功夫下在理解上。用这套卷子当镜子照一照自己哪个模块还虚把虚的地方补实了等到真正面对笔试题的时候你会发现那些题都不难。毕竟笔试考察的从来不是一个“背过多少题”的人而是一个“能写出多少靠谱代码”的人。
浩鲸科技前端A卷拆解：校招笔试高频考点与答题思路
浩鲸科技2020届前端类A卷这个标题对很多经历过校招的人来说应该不陌生。浩鲸科技的前身是中兴软创在运营商BSS/OSS领域做了很多年后来和阿里云合作之后整体技术栈和研发体系也逐步向互联网靠拢。2020届的这套前端A卷虽然过去几年了但它考察的知识点结构、出题思路放在今天的前端面试题里依然很有参考价值——尤其是如果你想投的是To B/企业服务方向的前端岗位。这篇文章我就以这套A卷为切入点把前端校招笔试里最高频的考点、每类题的答题思路、以及我踩过的坑系统梳理一遍。不管你是正在准备2026年校招还是工作后想跳槽补基础这套拆解都值得一看。1. 这套前端A卷到底想筛选什么样的人1.1 浩鲸科技的招聘背景与前端团队画像先搞清楚公司背景你才能理解它为什么这么出题。浩鲸科技脱胎于中兴软创2018年前后引入阿里投资后开始从传统通信软件厂商向数字化服务商转型。它服务的客户主要是电信运营商、政府和大型企业这类客户的项目有几个鲜明特点项目周期长、业务逻辑复杂、对稳定性要求极高、需要大量定制化开发。这意味着前端团队在实际工作中做的东西非常杂——可能是内部运营管理平台、数据可视化大屏、工单系统、低代码配置界面也可能是面向最终用户的H5应用。它不要求你去做特别前沿的视觉动效但要求你能把复杂业务抽象成清晰的前端架构能处理各种浏览器兼容问题能写出可维护的代码。所以A卷的出题逻辑就很清晰了不考偏题怪题聚焦在前端工程师日常开发中真正会用到的基础能力。比起考察你背了多少新框架API它更想确认你的JavaScript功底扎不扎实、浏览器原理懂不懂、遇到实际问题有没有清晰的解决思路。1.2 A卷的整体结构与题型分布2020届前端类A卷的题型大致分为四类客观选择题单选多选、简答题、手写代码题、综合设计题。分值分布上选择题占比约30%简答约20%手写代码约35%综合设计约15%。选择题覆盖面很广从HTML语义化到CSS布局从JavaScript作用域到浏览器缓存基本就是前端面试八股文里最核心的那些点。简答题侧重原理阐述比如让你解释事件委托、描述跨域解决方案、说清楚从输入URL到页面渲染的完整过程。手写代码题是这个卷子的重头戏常见的组合是手写防抖节流手写深拷贝手写一个简单的Promise或者数组去重有些场次还会出一两道数组或字符串相关的算法题。综合设计题一般是给一个业务场景让你设计方案比如“在一个大型后台管理系统中如何设计一套可复用的权限控制方案”。整套卷子做下来感受就是它不追求让你一道题都答不上来但每个模块都设置了梯度——基础题你能拿分进阶题看你的理解深度手写代码题直接拉开差距。1.3 试卷覆盖的知识点地图把A卷覆盖的知识点拆开来看可以画成一张清晰的地图知识模块具体考点考题形式权重HTML/CSS语义化标签、盒模型、flex/grid、BFC、层叠上下文选择题简答15%JavaScript原型链、this指向、闭包、事件循环、Promise、深浅拷贝、防抖节流选择题简答手写40%浏览器与网络渲染原理、缓存机制、跨域、HTTP/HTTPS选择题简答20%框架基础Vue/React生命周期、响应式原理、组件通信选择题简答10%工程化与安全webpack基础、模块化、XSS/CSRF选择题简答10%算法与综合设计数组字符串处理、业务方案设计手写代码设计5%JavaScript占比接近一半这说明试卷命题人非常清楚前端面试的核心在哪里——语言基础决定你的上限。把JavaScript吃透这套卷子你就拿下了大半。2. 前端基础考点每一分都要拿稳2.1 HTML/CSS选择题里的常客这类题目看似简单丢分很亏但每年都有不少人在里面翻车。HTML部分的考点几乎都在语义化标签和SEO的配合上比如header、nav、main、article这些标签的正确使用场景以及h1标签在一个页面中出现几次算是合理。CSS部分的坑就更多了盒模型的两种计算方式content-box和border-box必有一道flex布局里flex: 1到底意味着什么grid的fr单位和%的区别这些都要做到条件反射级别的熟练。有一个高频考点值得单独拎出来说——BFC块级格式化上下文。它经常以“如何解决margin塌陷”或者“如何实现两栏自适应布局”这类形式出现。BFC的触发条件overflow: hidden、display: inline-block、position: absolute等一定要背下来同时要能解释清楚BFC解决了什么问题内部元素不会影响外部布局这在实际开发中处理浮动塌陷和margin重叠时太常用了。多选题是这类题里最让人头疼的因为多选少选都没分。对策只有一个把知识点学得“绝对化”对就是对、错就是错不能只记个大概印象。比如问你哪些属性可以触发GPU加速你得准确知道transform、opacity、filter可以而width、height的动画不会问你哪些是CSS3新特性你要把calc()、flex、grid、custom properties这些边界都弄清楚。2.2 JavaScript从原型链到异步编程JavaScript部分是整张卷子的灵魂。选择题层面最常见的是原型链和this指向的混合考察一句话描述就是“谁调用this就指向谁”。但笔试里不会这么温柔它会给你一段代码里面既有普通函数调用、又有对象方法调用、还混着箭头函数让你判断最终输出。做这类题我建议先画调用栈把每个函数的调用者标记出来再结合new绑定和显式绑定call/apply/bind的优先级来判断准确率能高不少。异步编程的题基本围绕事件循环展开会考察宏任务和微任务的执行顺序。这里有一个特别容易踩坑的点Promise构造函数里的代码是同步执行的只有then里的回调才是微任务。所以new Promise((resolve) { console.log(a); resolve(); }).then(() console.log(b))的输出顺序是a → b但如果中间夹了setTimeout和async/await次序就需要仔细推演了。建议找几道经典的“打印顺序题”练到闭着眼都能写对为止。闭包和作用域也是高频考点。它最经典的考法是一个for循环里用var声明变量setTimeout回调里打印索引问输出是什么、怎么修复。这题背后的原理是词法作用域和闭包捕获的是变量引用而不是值。修复方案有两个方向用let形成块级作用域或者用IIFE立即执行函数传参。之前有人在网上争论这两种方案哪种更好实测下来在循环这种场景下let更符合直觉但IIFE能体现你理解得更深笔试简答时两者都写出来才是最优解。2.3 手写代码题的解题思路手写代码题是整张卷子里拉开差距的关键。虽然考察的函数名都耳熟能详但真正动笔写的时候很多人会暴露两个问题边界条件处理不全、代码风格不干净。以手写防抖函数为例标准答案大概是这个样子的function debounce(fn, delay, immediate false) { let timer null; let isInvoked false; return function(...args) { const context this; if (immediate !isInvoked) { fn.apply(context, args); isInvoked true; return; } if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); isInvoked false; }, delay); }; }这里有几个细节是阅卷人非常看重的一是要用...收集剩余参数而不是简单用arguments二是要apply(context, args)保存调用时的this指向三是immediate参数对应了“立即执行版”防抖这超出了大多数人背的模板能写出来说明你是真的理解防抖而不是背代码。手写深拷贝也是一个经典的拉分题。初级答案是用JSON.parse(JSON.stringify(obj))但你要知道这种方案会丢失undefined、function、Symbol类型的属性也不能处理循环引用。更好的答案是递归实现并在递归过程中用WeakMap记录已经拷贝过的对象来解决循环引用。笔试时间有限不用写到完美的生产级代码但至少要体现出“我知道有循环引用问题并给出了解决方案”这个程度。还有些卷子会出现算法题比如求数组最大连续子序列和、字符串去重后按字典序排列、两数之和。这类题考的是JS语言基本功和基础算法思维不需要刷LeetCode困难题。我的建议是每道题先想清楚时间复杂度和空间复杂度再动笔。如果你写出来的解法是O(n²)而你能说清楚为什么可以优化到O(n)阅卷人会觉得你的算法意识是过关的。3. 框架与工程化从八股文到实战认知3.1 Vue/React核心原理怎么答不扣分2020届前后浩鲸科技的前端主力栈是Vue所以A卷在框架部分会更偏向Vue但React的生命周期和Hooks也可能出现。框架题的考察方式通常是简答题比如“简述Vue响应式原理”或者“Vue中v-if和v-show的区别”。回答Vue响应式原理时切忌只答“Vue用Object.defineProperty劫持数据”。更完整的回答框架是数据初始化时Vue递归遍历data中每个属性用Object.defineProperty把它们转成getter/setter每个组件实例有一个Watcher当组件渲染时把Watcher收集到对应属性的Dep订阅器里当属性被修改时setter触发Dep通知所有订阅的Watcher执行更新。如果追问Vue 3为什么改用Proxy要能答出两点Proxy可以监听对象属性的新增和删除而Object.defineProperty做不到Proxy直接代理整个对象不需要递归遍历默认属性性能更好。这种“不仅知道是什么还能对比为什么”的答案分数自然就上去了。v-if和v-show的区别是前端面试必考题但在笔试里想拿满分需要答出三层第一层是渲染机制不同——v-if是真正条件渲染不满足条件时DOM节点不存在v-show只是切换display属性DOM节点始终存在。第二层是编译过程不同——v-if在编译时会生成三元表达式v-show生成指令直接操作样式。第三层是使用场景建议——频繁切换用v-show运行时条件很少改变用v-if。能答出第三层的人就说明他不是单纯背答案而是真的在项目里遇到过这个选型问题。组件通信也是高频考点。Vue里的通信方式包括props向下传值、$emit向上抛事件、provide/inject跨层级共享、EventBus任意组件间通信、Vuex做全局状态管理。答题时最好结合场景说明比如“封装一个通用表组件用props传入配置项、用$emit暴露排序和筛选事件、用Vuex管理跨页面的筛选条件”。3.2 浏览器与网络常考但容易翻车的地方浏览器原理和网络基础是很多前端面试者的重灾区因为它不像JavaScript能天天写知识点偏底层经常是“好像知道但说不完整”。A卷里这类题的考察重点是“从输入URL到页面渲染的完整过程”这道题几乎每年出现但很多人能写出来的核心步骤不超过三步DNS解析→请求HTML→渲染引擎渲染。完整回答应该覆盖七个环节URL解析与编码、DNS查询浏览器缓存→系统缓存→路由器缓存→根服务器迭代查询、TCP连接建立三次握手HTTPS还要加TLS握手这就要提到对称加密和非对称加密的配合、发送HTTP请求包含请求头和请求体、服务器响应并返回资源此时会涉及状态码和缓存策略、浏览器解析HTML构建DOM树、解析CSS构建CSSOM树、合并成渲染树、计算布局、绘制页面JS的解析和执行会阻塞DOM构建所以要放在body底部或者加defer/async。另一个高频点是HTTP缓存。选择题和简答都可能考重点是两大缓存策略强缓存Expires和Cache-Control命中后不发请求和协商缓存Last-Modified/If-Modified-Since和ETag/If-None-Match需要请求服务器确认资源是否变化。笔试时只要把这两种缓存策略的触发条件、首部字段、交互过程写清楚基本就是满分答案。跨域问题也是必考项。要答清楚什么是同源策略、为什么需要跨域方案、有哪些方案——JSONP利用script标签不受同源限制、CORS通过在响应头加Access-Control-Allow-Origin来实现、postMessage用于父子窗口通信、反向代理常用于开发环境。尤其要分清CORS和JSONP的适用场景JSONP只支持GET请求且需要服务端配合返回特定格式CORS支持各种HTTP方法但需要服务端设置响应头。理解“哪些是前端能解决的哪些必须后端配合”面试官听到这里就会点头。3.3 工程化与安全体现项目经验的分水岭工程化和安全类的题目在A卷里占比不算高但它很好地起到了“区分度”的作用。前端基础好的人不一定有工程化认知工程化认知到位的人往往是在真实项目中摔打过的。webpack的考察点集中在两个方向概念辨析和配置理解。概念辨析的经典考题是“loader和plugin的区别”loader是用来对模块的源代码进行转换的处理的是文件级别的输入输出plugin是用来扩展webpack功能的可以监听编译生命周期事件在打包的某个阶段做额外的事情。这个回答一旦展开很多人的短板就暴露了——说不清楚一个常用的loader和plugin的具体作用。如果笔试问到这里建议优先答babel-loaderES6转ES5和html-webpack-plugin自动生成HTML并注入打包后的资源这两个是最常见的。前端安全的知识点相对固定XSS和CSRF是两座大山。XSS要答出三种类型存储型恶意脚本存到数据库、反射型恶意脚本由URL参数带入、DOM型通过修改DOM节点触发每种都要给出一个例子。防御手段的核心是转义和消毒不能用用户输入拼HTML。CSRF要答出攻击原理诱导用户携带cookie访问恶意构造的请求。防御手段包括校验Referer、使用CSRF Token、设置SameSite Cookie属性。这两块知识的表达要精练因为笔试简答的空间有限每个点说到位即可不需要长篇大论。4. 综合题与开放题怎么答才显得有思考4.1 设计方案题的答题框架综合设计题是A卷里最让人犯怵的部分因为它没有标准答案考察的是你面对模糊需求时的拆解能力。常见考题有“设计一个前端错误监控系统”、“为一个大型后台系统设计权限控制方案”、“如何优化一个首屏加载超过5秒的H5页面”。这类题目有一个通用的答题框架我按照实际经验给你梳理一下第一步是需求澄清。不要上来就写方案先用两三句话定义问题边界。比如设计错误监控系统你要说明监控的范围是运行时JS错误、资源加载错误还是HTTP请求错误数据上报的时机是实时还是批量影响的范围是哪些环境和哪些页面。这一步的目的是让阅卷人看到你有需求分析能力。第二步是技术选型。给出方案时要有取舍的理由。还是以错误监控系统为例你可以说“考虑到公司内部项目体量优先使用window.onerror捕获运行时错误配合addEventListener(error, handler, true)捕获资源加载错误通过sendBeacon接口在页面卸载时上报日志而不是使用new Image().src埋点因为sendBeacon在页面关闭时更可靠”。这种带理由的选型比罗列概念强十倍。第三步是细节展开。选一个模块深入说一下实现要点比如“存储错误信息的buffer设置上限超过100条就触发一次批量上报避免频繁请求”。细节越具体说明你越接近真实的工程实践。第四步是风险兜底。提出自己方案的局限性和优化方向比如“由于跨域脚本无法拿到具体堆栈需要服务端在Access-Control-Allow-Origin中放开策略并配合crossorigin属性使用”。开放题没有唯一答案但答题框架完整、逻辑自洽是拿高分的关键。4.2 算法题的准备策略前端笔试里的算法题难度普遍低于后端和算法岗。浩鲸这套A卷里的算法题大概率是数组去重、字符串翻转、两数之和、斐波那契数列这类基础题偶有进阶版本会考到二叉树遍历或者动态规划入门。但我建议不要因为题目简单就掉以轻心准备时要做到“一题多解”。拿数组去重来说至少要知道四种解法Set一行流、双重循环、reduceincludes、利用对象键唯一性。笔试时如果时间足够优先写时间和空间复杂度最优的解法并且在注释里补一句“使用Set时间复杂度O(n)”如果时间紧张写最简单的解法也比留空强。遇到没见过的题也有策略。第一步是先用暴力解法写出一版能跑通的代码保证拿到基础分然后分析是否有更优解如果不能短时间想出来就在注释里写出优化思路。阅卷人看的是你的思考过程不是最终答案本身。4.3 大厂校招笔试的通用方法论我做过的前端校招笔试题不止浩鲸这一套回过头来看这些卷子有一个共同规律基础题占60%左右进阶题占30%难题占10%。很多人的策略是本末倒置的——花大量时间准备那10%的难题结果前面60%的基础题因为粗心或者记忆模糊丢了不少分。正确的打法是先保证基础题的正确率再谈难题的突破。笔试现场的时间分配也很关键建议拿到卷子先花两分钟把全部题目扫一遍标记出哪些是必拿分题、哪些是需要思考的题先做必拿分题把该得的分稳定装进口袋再啃硬骨头。还有一个小技巧多选和填空的题目如果对某个选项不确定尽量用排除法缩小范围。多选题宁少选不多选因为你多选一个错误的整道题就是零分少选一个虽然可能不满分但多少还能保住一点。5. 实战复盘这套A卷暴露出的备考共性问题5.1 做题时的踩坑清单结合我自己做题和帮别人批改简历/模拟面试的经历这套A卷暴露出的共性问题高度集中在以下五个方面。第一对“闭包”的理解停留在定义层面。很多人能说出“闭包就是函数内部访问外部变量”但一上手写代码就懵。笔试里闭包最常见的坑是循环中var变量被共享的问题见到就要条件反射想到let或者IIFE。第二对“事件循环”只会背结论不会推演。宏任务和微任务的顺序很多人能背出来但一旦题目给你一段混合了await、Promise.then、setTimeout、process.nextTickNode场景的代码就乱了。建议平时就用node环境跑几段代码亲手验证输出顺序比死记硬背强多了。第三手写代码时不注意函数入参校验。比如手写防抖函数很多人不处理immediate参数不判断fn是否为函数类型。虽然这不是核心考点但代码的健壮性反映了一个人的开发习惯。第四网络相关的术语理解不准确。比如“TCP三次握手、四次挥手”能写出来但“为什么是三次而不是两次”解释不清。“为什么是三次”的答案是三次握手可以避免历史重复连接初始化造成的混乱可以同步双方的初始序列号。这个理解到位了网络题的深度就出来了。第五综合题容易答得“大而空”。比如“如何优化页面性能”很多人写“使用CDN、压缩图片、代码分割”但缺少数据支撑和量化指标。更理想的回答是“首屏加载时间从3.2秒优化到1.5秒其中CDN贡献了30%的提速代码分割让首屏JS体积从800KB降到250KB图片转WebP并加懒加载让图片体积下降了60%”。数字比形容词有说服力得多。5.2 从A卷出发的学习路线建议以备考这套A卷为起点整理一条自己的前端学习路线后劲儿会非常大。第一阶段是JavaScript语言核心。不急着上框架先把《JavaScript高级程序设计》前几章吃透再把“作用域、闭包、this、原型、Promise、事件循环”这几个专题逐个攻破每个专题都用代码验证一遍。这个阶段是地基花多少时间都值。第二阶段是浏览器和网络基础。把从输入URL到页面渲染的完整链路弄明白每个环节都能画出图并说清原理。HTTP缓存、跨域方案、Web安全这三块要独立成笔记随时能复述。第三阶段是框架源码入门。不是让你啃源码而是理解框架的核心机制的“是什么”和“为什么”。Vue的响应式原理、虚拟DOM和diff策略要能讲清楚React的Fiber架构和Hooks实现原理了解即可。这个阶段能让你在框架题的简答中写出有深度的答案。第四阶段是工程化实践。手动搭一次webpack配置搞懂loader、plugin、devServer、代码分割、Tree Shaking这些概念哪怕项目很小也比背十篇webpack教程有效果。第五阶段才是刷题。有了前面四个阶段的积累再刷真题和LeetCode热门题你会发现很多题就是“换了个壳”的旧知识做起来轻松很多。5.3 简历、笔试和面试如何打配合通常笔试过了就是面试但很多人没有意识到简历上写的内容和笔试考的内容是强关联的。面试官会拿着你的简历对照笔试的答题情况来提问。比如你简历上写“熟悉webpack优化”面试官看到你笔试时loader和plugin的题答得一般就大概率会追问你项目里到底怎么做的代码分割、做了之后有什么量化的提升。所以简历上写的每一个技术点都要问自己一句“如果面试官问三个为什么我能答上来吗”。答不上的要么现在补要么别写。笔试题里暴露的短板也会成为面试环节的重灾区。如果你笔试时手写Promise写得磕磕绊绊面试官极大概率会让你现场再写一遍还会延伸问“Promise.all和Promise.race有什么区别”。所以考完试别急着放松先把卷子里不确定的题全部复盘一遍把自己短板的周边知识也顺带复习了。还有一个容易被忽略的点题量大的卷子字迹和排版会直接影响分数。手写代码时建议先把大概思路用一两句注释写在旁边再开始写代码这样即使代码有小问题阅卷人也能看出你的思维是清晰的。写在最后的个人体会做这套A卷最大的感受就是前端面试题虽然千变万化但内核始终一致——语言功底是否扎实、原理是否真的理解、工程化是否有实战经验。浩鲸科技这套A卷没有什么偏门怪题但每一道送分题背后都站着一个需要你真正理解的知识点。如果你正在准备2026年校招我建议不要去背现成的面试题答案库而是把功夫下在理解上。用这套卷子当镜子照一照自己哪个模块还虚把虚的地方补实了等到真正面对笔试题的时候你会发现那些题都不难。毕竟笔试考察的从来不是一个“背过多少题”的人而是一个“能写出多少靠谱代码”的人。 
