浩鲸科技2020届前端类A卷这份题单在校园招聘圈里流传度不低。很多准备冲运营商/政企数字化赛道的同学都拿它当练手卷但这张卷子的风格和互联网大厂的前端笔试完全不是一回事。它不跟你绕弯弯不玩脑筋急转弯式的变态算法而是扎扎实实考你在真实项目里能不能立住脚。做这份卷子感觉不是在刷题是在提前走了一遍入职后的工作流。我自己当时做完这张卷子的感受是它更像在筛选“能直接上手干活的人”而不是“看过很多源码但写不出页面的人”。所以这篇博文不打算只给答案我把这张卷子的出题逻辑、每个模块背后的考察意图、以及我当时是怎么思考和组织答案的全部拆开揉碎讲一遍。无论你是2026届还是更后面的应届生只要目标里包含这类企业级前端岗位这张卷子的备考思路都是通用的。1. 这份卷子的出题基调它到底想筛什么样的人先说结论浩鲸科技这类做政企数字化、运营商支撑系统的公司前端岗位的日常工作不是在App Store里上架C端应用而是面对大量“内部的、复杂的、需要长周期维护的”管理系统。你写的每个页面可能要活五年以上要经历好几波产品经理的需求变更要兼容各种奇怪的浏览器环境。所以这张A卷的考察重点我总结下来就三个词基础牢固度、工程化意识、项目落地能力。它不会专门出一整道题问“Vue3的响应式原理”而是把它融到一道实际的组件设计题里看你在写业务代码的时候有没有底层思维。这一点和LeetCode刷出来的手感完全不同更接近工作中的真实状态。然后是它的题型结构。从当时流出的信息来看整张卷子大致分为几块JavaScript基础与进阶、CSS和页面布局、框架与组件化、工程化与性能优化、以及最后的开放型综合题。每一块占比不算极端但都卡在“你但凡有一环没做过就会觉得虚”的位置。最需要提醒的是这张卷子的时间陷阱很隐蔽。看起来题量不大但每道题都要写分析过程不是选个答案就完事。尤其是后面的主观题如果你前面基础题耗费太久后面根本没有充足时间组织语言只能草草收尾分数反而不如前面答得稳的人。我当时做的时候给自己定了个规矩每道选择题最多2分钟拿不准的先标记全部做完再回头。还有一个值得说的地方这张卷子明显在考察“你有没有真正写过项目”。比如框架题里面会问数据的流向问组件通信方案在不同场景下的取舍这种问题只背八股文是答不好的因为没做过多层嵌套的业务组件你根本体会不到为什么有时候要用EventBus、有时候要用Vuex、有时候直接用props反而更干净。2. JavaScript基础与进阶题目不偏但答得完整才是分水岭这个模块在卷子里占比最高全是硬功夫。从题目回忆来看涉及的点包括原型链与继承、闭包的实际应用、this指向辨析、事件循环、ES6新特性、手写实现常见函数。如果你基础扎实看到这些点会觉得“就这”但如果你只是背了概念很容易在“手写实现”这一步卡壳。2.1 原型链与继承考的不是定义是创建对象的整个过程考原型链的题大多会让你写出几种继承方式并且说明各自的优缺点然后给定一个场景让你选。我记得卷子里有一道题是这样的逻辑需要实现一个“动物-狗”的继承关系要求既能共享公共方法每个实例又能维护自己的属性。这里最稳妥的回答思路是先讲清楚构造函数、原型对象、实例三者之间的关系再逐步给出组合继承、寄生组合继承的代码以及ES6 Class继承的写法。你如果只是写“Class A extends B”拿不到高分因为你没有展示出对底层的理解。我当时是这么组织的function Animal(name) { this.name name; } Animal.prototype.sayName function() { console.log(this.name); }; function Dog(name, breed) { Animal.call(this, name); // 继承实例属性 this.breed breed; } // 关键让 Dog.prototype 的 __proto__ 指向 Animal.prototype Dog.prototype Object.create(Animal.prototype); Dog.prototype.constructor Dog; Dog.prototype.bark function() { console.log(汪汪); };这段代码里真正值钱的是最后那两行Object.create避免了调用两次Animal构造函数也避免了Dog.prototype和Animal.prototype指向同一个对象。如果你能在答案后面补一句“这就是寄生组合继承比组合继承更优的原因”阅卷人一眼就能看出来你是真懂还是死记硬背。2.2 闭包与this指向永远先画作用域链再做题闭包题几乎每次笔试都有但这张卷子有一个特点它会把闭包和事件循环放在同一道场景题里。比如给一段定时器循环的代码问打印结果。这种题表面考闭包实际考的是“变量提升作用域事件循环”的综合理解。答案和解析我就不多写了核心思路是你得明白var和let在循环中的区别。var声明的是函数作用域变量循环结束时i已经变成了最终值定时器回调执行时访问的是同一个ilet声明的是块级作用域变量每次循环都会创建一个新的绑定。关于this指向的题目我的经验是永远先画调用栈和调用方式再看函数的定义位置。箭头函数、普通函数、bind/call/apply、对象方法调用这四种情况下的this指向完全不同。你不需要背所有规则只需要记住一句最底层的话this是在函数被调用时确定的指向调用该函数的那个对象箭头函数除外它捕获的是定义时的this。2.3 手写实现防抖节流、深拷贝、Promise.all一个都别放过这类题目在A卷里稳占一席。因为手写得出来说明你真的理解了这个API的内部逻辑手写不出来哪怕你嘴上再能说也露馅。我建议把这些高频手写题全部整理成一个文件考前反复敲直到闭着眼睛能写出来。这里我挑两个最常考的说说我自己的写法。深拷贝——要求能处理对象、数组、函数、Date、RegExp还要能处理循环引用。手写实现的思路是这样function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) return target; if (map.has(target)) return map.get(target); const constructor target.constructor; if (/^(Date|RegExp)$/.test(constructor.name)) { return new constructor(target); } const cloneTarget Array.isArray(target) ? [] : {}; map.set(target, cloneTarget); Reflect.ownKeys(target).forEach(key { cloneTarget[key] deepClone(target[key], map); }); return cloneTarget; }这里的关键是WeakMap处理循环引用如果不处理遇到obj.self obj直接栈溢出。另外一个细节是Reflect.ownKeys能拿到不可枚举属性和 Symbol 属性比Object.keys更全面。这些细节你得在答案里写出来因为阅卷人就是想看你会不会考虑这些边界情况。防抖与节流——这两个函数看着简单但如果你没搞懂使用场景写出来的代码大概率是错的。我的记忆方法很简单防抖你疯狂触发我只在你停止后等wait毫秒再执行一次。节流你疯狂触发我保证每wait毫秒至少执行一次。// 防抖 function debounce(fn, wait 300) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, wait); }; } // 节流 function throttle(fn, wait 300) { let lastTime 0; return function(...args) { const now Date.now(); if (now - lastTime wait) { fn.apply(this, args); lastTime now; } }; }注意fn.apply(this, args)这行如果不把this传进去防抖节流后的函数如果作为对象方法调用内部的this就丢了。这种细节就是拉开分数的地方。3. CSS与页面布局不是考样式是考你在复杂环境下的还原能力很多人对前端笔试有个误区觉得CSS题不重要随便写写就行。但浩鲸这类公司的业务大量依赖管理系统管理系统的UI还原度直接影响客户验收所以CSS题在A卷里是有存在感的。考察点主要集中在这几个方向垂直水平居中、flex/Grid布局、BFC与margin塌陷、两栏/三栏布局、移动端适配。3.1 垂直水平居中至少会三种方案且能说出适用场景这道题几乎是前端笔试的“毛遂自荐题”但A卷的问法更刁一点它不只是让你写一个方案而是问“在不同的场景下你分别怎么做”。我的标准答案模板方案一flex 布局推荐通用性最强css .parent { display: flex; justify-content: center; align-items: center; }适用场景子元素尺寸未知父元素尺寸确定或不限定且不需要兼容IE9以下。 - **方案二绝对定位transform**.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }适用场景子元素尺寸未知父元素高度已知或者需要相对某个定位祖先居中。 - **方案三grid 布局**.parent { display: grid; place-items: center; }适用场景现代浏览器环境代码最简洁性能也最好。如果面试官再追问“如果子元素尺寸已知呢”那你还可以补充绝对定位负margin的方案。但我建议把这四种方案都记牢因为你不知道阅卷人偏好哪种全写出来最安全。3.2 BFC与margin塌陷这道题是项目排障能力的试金石BFCBlock Formatting Context块级格式化上下文是个容易让人绕晕的概念。我建议你用一句话理解它BFC就是一个独立的渲染区域它内部的东西怎么折腾都不会影响外部。能触发BFC的常见情况包括float不为none、position为absolute或fixed、display为inline-block/flex/grid、overflow不为visible、contain为layout/content/paint。知道这些还不够你得知道BFC到底能解决什么实际问题解决margin塌陷父子元素外边距合并清除浮动父元素内部用了float子元素脱离了文档流父元素高度塌陷阻止元素被浮动元素覆盖左侧浮动的导航栏右侧文字区域设置overflow: hidden后不会跑到左侧下面。这道题我的答题策略是先写出定义和触发条件然后直接举一个排障案例。比如项目里两个div上下排列给上面的div设置了margin-bottom: 30px给下面的设置了margin-top: 30px结果两者之间的距离不是60px而是30px。原因就是margin垂直方向塌陷。解决方案是给其中一个div的父级创建BFC例如设置overflow: auto或者只用一边的margin。这种带着实际场景的回答明显比堆砌定义更容易让阅卷人点头。3.3 三栏布局圣杯、双飞翼、flex、grid你至少能完整复现两种管理系统里几乎每个页面都有左边侧边栏、中间主内容区、右边配置面板这种三栏结构所以A卷考三栏布局非常符合业务需求。这个考点最担心的情况是你知道圣杯布局的原理但让你默写代码就卡壳。我的经验是别贪多把flex方案练到肌肉记忆再把grid方案理解透应对笔试足够了。flex方案是最实用的css .container { display: flex; min-height: 100vh; } .left { width: 200px; background: #f0f0f0; } .main { flex: 1; background: #ffffff; } .right { width: 220px; background: #f8f8f8; }我补充一个实际项目中的坑当左侧栏宽度不固定或者需要响应式切换时flex方案比圣杯布局和双飞翼布局好维护得多。因为圣杯/双飞翼需要提前给中间栏写 padding 和 margin一旦宽度变了容易乱。如果你能在笔试答案里顺便点一句“在实际项目中我更多用flex因为可维护性更好”会让你的答案显得像一个有项目经验的人写出来的而不是刚从培训班出来。 ## 4. 框架与组件化考的是你写业务组件时的设计能力 浩鲸科技的后台管理系统大量使用VueReact也有看团队所以框架题在A卷里占据重要位置。但仔细看题目会发现它很少直接考冷门API更多的是在问“组件怎么划分”“数据怎么流动”“状态怎么管理”。这说明出题人更关心你在团队协作中能不能写出别人好维护的代码。 ### 4.1 组件通信方案不要只背API要能说清“为什么这么选” Vue组件通信的方式很多props/$emit、provide/inject、EventBus、Vuex/Pinia、$refs、$attrs/$listeners、slot。A卷大概率会让你列举并用表格或者文字对比然后给一个业务场景让你选。 我做这类题的心法就一条**通信的距离决定方案通信的方向决定写法。** - **父子组件直接通信**props 向下$emit 向上。这是最正统的方式优先用。 - **隔代组件通信**用 provide/inject或者直接走状态管理。 - **兄弟组件/无关联组件通信**用全局状态管理比如Pinia。少用EventBus因为事件满天飞项目大了根本没法排查。 场景题一般会给这样一个例子页面有多级嵌套的树形组件最里层的某个节点要触发最外层组件里的一个方法怎么做用 $emit 一层层往外传会很难受用 provide/inject 注入一个方法是最直接的。但要注意这种方式是不稳定的父级的方法变了子级不一定能立刻感知到。如果是需要响应式的数据共享最好还是走Pinia。 ### 4.2 生命周期与数据请求时机这个细节能看出你有没有实战经验 框架题里还有个高频考点调用接口的时机应该放在哪个生命周期在Vue 2里是 created 还是 mounted在Vue 3里用 onMounted 还是 setup 里直接请求 我跟你讲一个我在项目里踩过的坑。最开始写习惯了数据请求一股脑放在 mounted 里结果页面渲染前有一段空白时间白屏体验很差。后来改成在 created 里请求Vue 2虽然DOM还没渲染出来但数据已经准备好了等DOM一出来直接就能填进去。 不过Vue 3的 setup 本身就在实例创建之前执行所以你理论上可以在 setup 里直接调用请求。但这里有个注意点**如果函数是在 setup 里同步调用只能保证它在 beforeCreate 之前运行不能保证数据已经回来。** 页面还是要等异步数据到了再渲染。更推荐的做法是配合 onMounted 挂载完成后再请求或者用 Suspense 组件包一层异步渲染逻辑。 这份卷子里关于生命周期的题我建议你写答案的时候带上顺序 1. beforeCreate / setupVue 3 2. createdVue 2 3. beforeMount / onBeforeMount 4. mounted / onMounted 5. beforeUpdate / onBeforeUpdate 6. updated / onUpdated 7. beforeDestroy / onBeforeUnmount 8. destroyed / onUnmounted 然后标记出来哪个阶段适合初始化数据、哪个阶段适合操作DOM、哪个阶段适合解绑事件和定时器。这一套下来阅卷人就很清楚地知道你用过这个框架不是背着玩的。 ### 4.3 组件设计题可复用性、可控性、插槽思维 A卷最后的综合题大概率会有一个组件设计题比如让你设计一个通用搜索表单、一个表格组件、或者一个树形控件。核心考点是你能不能抽象出组件的公共部分同时留下足够的扩展空间。 这里我给一个万能的分析框架 1. **props 设计**外层需要哪些配置项哪些是必传哪些有默认值 2. **事件设计**组件内部产生哪些动作需要通知父组件事件名怎么命名 3. **插槽设计**哪些区域需要让业务方自定义用默认插槽还是具名插槽 4. **数据流**组件内部维护哪些状态哪些状态属于受控/非受控 5. **对外暴露**需不需要通过 ref 暴露一些方法比如重置、清空校验 用这个框架去答任何组件设计题都够用。记住一个原则**业务组件不是越简单越好也不是越复杂越好而是刚好能覆盖这个组件的全部使用场景同时不限制未来的扩展。** 这个度只能靠写项目喂出来考前临时抱佛脚不太现实但用这个框架答题至少不会跑偏。 ## 5. 工程化与性能优化从构建工具到线上监控一个完整的项目视角 这一块是A卷里区分“能干活”和“只知道写页面”的关键。出题人会问webpack的打包优化策略、首屏加载性能优化、本地存储选型、以及常见的浏览器缓存策略。如果你真的部署过项目、处理过线上问题这块会答得很轻松如果只是看过文档很容易说一堆不痛不痒的套话。 ### 5.1 webpack构建优化先诊断再开药不要背列表 如果你在答案里一口气列出七八条优化方案阅卷人阅卷时会觉得你在“背”。但如果你能说清楚“先分析再针对瓶颈优化”效果完全不一样。 我当时的答题思路可以完全复刻给你先去 BundleAnalyzerPlugin 看看打包体积占比最大的模块是谁然后有针对性优化。优化手段其实就那么几类 - **按需加载**路由懒加载、第三方库按需引入比如loadsh只引入用到的函数。 - **拆包策略**splitChunks 把 node_modules 里的公共依赖单独打成一个大文件让业务代码和依赖代码分开缓存。 - **Gzip压缩**Nginx开 gzip 或者用 compression-webpack-plugin 预压缩。 - **缩小解析范围**resolve.modules 指定查找目录、loader 里加 include 只处理业务代码目录。 - **多进程构建**thread-loader 给 loader 开多进程或者用 swc-loader/esbuild-loader 替代 babel-loader构建速度提升非常明显。 这里我想额外给一个实用技巧babel-loader 开启 cacheDirectory: true增量编译时能省大量时间很多项目几百个组件改一行代码要等十几秒才能热更新开了缓存能压到一两秒。 ### 5.2 首屏加载优化从指标定义到具体手段缺一不可 性能优化题如果只答“把js压缩一下”“图片转webp”这种等于没答。一张卷子要看到的是你的系统性思维。我的三层答题框架 - **第一层减少加载体积**。代码层面做代码分割按路由拆包首屏只加载首屏需要的JS和CSS图片用 loadinglazy 懒加载字体用 font-display: swap避免字体阻塞页面渲染。 - **第二层减少请求数量**。HTTP/1.1时代会建议合并请求但现在HTTP/2了合并的意义下降更重要的是把不需要首屏的内容藏起来。雪碧图现在用得少了但把多张小图合成一张大图的做法在特定场景仍然有效。 - **第三层优化渲染路径**。比如针对关键CSS内联到 head 里避免CSS阻塞渲染JS用 defer 或 async 加载避免脚本阻塞DOM解析SSG/SSR可以解决白屏问题但需要权衡团队维护成本。 我记得当时卷子里还顺带问了“怎么监控线上性能”这个我提了一下 performance.getEntriesByType(navigation) 拿 DomContentLoaded 和 Load 时间再用 web-vitals 库上报 LCP、FID、CLS 这三个核心指标。这样回答就不仅仅是一个提优化方案的人而是一个“有线上监控意识”的工程师。 ### 5.3 浏览器缓存与本地存储别看简单一问场景就露怯 这类题经常以“对比题”出现比如让你说 localStorage 和 sessionStorage 的区别或者让你设计一个前端存储方案。 localStorage 和 sessionStorage 都继承自 Storage都是5MB级别都在浏览器本地存储。区别只有两个前者持久化直到手动清除后者标签页关闭即失效前者同一域名多个标签页共享后者每个标签页独立。这块的考点不在区别本身而在**业务场景选型**。 比较有含金量的题目是把缓存和登录态放在一起问如果需要在刷新页面后保持登录状态你会把token存在哪里我当时的回答是 localStorage 稳妥但存在XSS风险。如果担心XSS靠谱的方案是把token放在 httpOnly 的 Cookie 里JS拿不到后端自动携带。这个方案的缺点是跨域和CSRF防护要仔细处理前后端约定好SameSite 和 CORS 策略才能有好的体验。 ## 6. 开放型综合题没有标准答案但阅卷人能从字里行间看到你的工程习惯 A卷的最后一道题通常是开放型的问题比如“如果一个页面在客户那里加载很慢你会怎么排查”“如果让你搭一个前端项目的基础架构你会怎么设计”。这种题没有唯一答案但恰恰是最容易拉开差距的部分。因为答法直接反映了你有没有做过真实项目、遇到过真实问题。 ### 6.1 页面加载慢的排查链路按照时间线从DNS到JS执行逐步拆解 当时给出的场景是客户反馈系统首页打开缓慢需要说出你的排查步骤。我给的答案是从浏览器地址栏输入URL开始逐步排查每一段耗时。 - 第一步先看网络请求面板Network确认是某个资源慢还是整体都慢。如果是整体慢大概率在服务器的首包返回时间TTFB那就去查后端接口和服务器负载。 - 第二步如果是单个JS/CSS慢看Content-Length判断体积大小看是不是没有走CDN或者没开Gzip。 - 第三步看是什么时候首屏渲染出来的。用Performance面板看脚本执行时间有没有长任务阻塞主线程。如果存在超过100ms的Long Task说明JS执行逻辑太重需要拆分任务或切片渲染。 - 第四步确认是不是请求顺序问题某些关键接口因为依赖了别的接口而串行请求改成并发后能快一大截。 - 第五步如果以上都没问题考虑图片问题。2M以上的头图先优化。有些客户那边网络带宽有限图片没走CDN就是慢。 这种按时间线一层层排查的回答阅卷人会觉得你脑子里有完整的前端性能知识地图而不是零散的优化小技巧。这个答题框架不仅在卷子上有用在你真正接到线上报障工单的时候也完全能照用。 ### 6.2 从0搭建项目的架构思路该有的规范一个都不能少 开放题里还可能给你一个场景你接手一个新项目要搭一套前端工程基础架构你会做哪些事情我当时答的时候列了几个方面 - **技术选型**钉死框架、UI库、状态管理库、请求库和团队现有技术栈对齐不要在这个阶段引入新框架增加学习成本。 - **项目结构**目录按照业务模块分而不是按技术类型分公共组件放到 components 里页面组件就近放在路由目录下。 - **代码规范**Eslint Prettier Huskygit提交前自动检查这是低成本高收益的东西能保证多人协作时代码风格统一。 - **Mock机制**前端本地Mock数据不要等后端接口定义好才开始开发能并行推进。 - **CI/CD接入**提交触发构建能尽早发现在测试环境才暴露的问题。 - **状态管理策略**约定什么数据放服务端全局什么数据放组件本地什么数据放URL参数。这能避免团队里“什么都在store里存一份”的混乱局面。 这道题最重要的是让阅卷人看到你不只有技术能力还有工程管理意识。你可以延伸一下“我还会在项目里补充一份 README说明项目结构、启动方式、部署流程和常见问题让新人进来后不用靠口头传话才能跑起项目。” 这个细节会给你的答案加分不少。 ### 6.3 从答题到面试的衔接你其实在提前演练“技术方案评审” 这也是我一直觉得这张A卷最有价值的地方它的开放性题目本质上就是技术方案评审的雏形。你答得好说明你已经具备了跟技术负责人讲方案的能力你答得差哪怕前面的基础题全对也很难让人相信你进了团队能独立负责一个模块。 所以备考这张试卷不要只盯着背题我建议你多练“输出表达”。找一个你曾经做过的功能从需求分析到技术选型、到代码实现、到上线后遇到问题的复盘完整地写成一篇短文要求逻辑清晰、细节到位。这个练习能同时提升笔试答题质量和面试表达能力一举两得。 ## 7. 从A卷看前端校招的准备策略刷题之外更要练“工程手感” 做完整张卷子我能明显感觉到一个信号**刷题能保底但拿高分靠的是实战经验与底层理解的结合。** 所以最后总结几条我在备考和真实工作后的体会供你参考。 **基础题和框架题最好用“默写复述”的方式来练。** 看懂了、抄过了跟你合上书能写出来是完全不同的层级。我会在A4纸上模拟闭卷答题遇到写不完整的地方就标记下来这是薄弱点需要二次梳理。手写防抖节流、深拷贝、Promise实现这种高频题至少要写到肌肉记忆的程度因为考场上的时间一分一秒都很值钱。 **CSS不要只看布局建议自己实现一套管理后台的静态页面。** 不用很复杂做一个带侧边栏、顶栏、内容区的后台框架涵盖常见的表单和表格组件你会发现很多你以为自己会的知识在写的过程中全露馅了。我做这套练习大概用了一个周末之后所有布局题都变得非常简单。 **工程化方面的知识不能只停留在“听说过”。** 无论你用什么构建工具都建议把你的项目build一遍观察产物结构装上 webpack-bundle-analyzer 看看那些被警告的“超大依赖”然后动手做一次打包优化。这个实操过程会让你对性能优化题有非常直接的体感答题时自然能写出真实的数据和体验而不是空泛的优化词嘴。 **最后做这种企业级公司的笔试题一定要在主观题里展现“我是一个能用、能扛、能沟通的工程师”而不只是一个会写函数的人。** 卷子上写不下太多故事但你选的每一个例子、补的每一个细节、做的每一个技术取舍都在替你说这句话。把心态从“我在做题”转成“我在给一个技术负责人讲我的思路”很多开放题的答案组织就会变得流畅很多。 浩鲸科技A卷这份题是我见过最接近“真实工作内容”的校招前端试卷之一。把它做透收获的不仅仅是一堆考点结论更是一套从页面还原到架构设计、从单点技术到工程体系的完整前端思维框架。希望这篇拆解能帮你少走一些弯路在真正坐到考场里的时候心里更有底。