金山办公2020校招前端笔试题解析：从JS基础到框架底层

每年七八月份都是校招笔试高峰前端开发的岗位尤其卷。群里经常有学弟学妹拿着各类公司真题来问我其中金山办公这套2020校招前端开发笔试题一被问到的频率意外地高。按理说年份也不算近但这套题的考察逻辑非常典型——它不堆偏题怪题而是把JS基础、浏览器原理、框架理解和工程素养这几个前端开发面试题中的核心模块用一种很克制的方式串起来。很多同学刷过之后都有一个共同感受每道题单独拎出来都不算超纲但想在120分钟内全部答好没点真功夫还真不行。这篇文章我会以这套题为主线把其中最有代表性的几类考点逐个展开讲清楚每道题背后的考察意图、正确答案的推导路径以及我当时做完之后的复盘心得。无论你是正在备战的应届生还是工作两年想查漏补缺的初级前端这篇文章的很多内容都能直接拿来用。1. 金山办公这套笔试题到底在筛什么人1.1 笔试题型结构与时间分配先把整套题的宏观布局说清楚。金山办公2020校招前端笔试一题型上大致分为四块不定项选择题、填空题、简答题和编程题。整体时长120分钟题量大约在25到30题之间。从题型占比来看选择填空占了近一半的分值简答题大概两到三道剩下的是手写代码题。这个结构和大厂动辄上百道选择题的海选模式不太一样它的题量偏少但每道题都留了让你“展开说两句”的空间。尤其是简答题不是那种非对即错的判断而是需要你写出完整的思考过程。时间分配上我建议选择题控制在25分钟内填空题10分钟简答题30分钟剩下的时间全部留给编程题。很多同学的习惯是死磕选择题结果最后手写题草草写了两行。这个策略在金山办公这套卷子上会吃大亏因为它的编程题分值占比很高而且考察点非常集中属于典型的“会者不难难者不会”类型。1.2 从出题风格反推团队技术取向金山办公的核心产品是WPS系列前端面对的场景大多是重交互、长文档、复杂表格的在线编辑。这类业务对前端基本功的要求极其苛刻大文件渲染性能、DOM操作效率、浏览器兼容性、内存管理每一项都直接决定产品体验。所以你会发现这套笔试题几乎没有考什么新潮框架特性也没有追热点去问Vue 3的composition API到底怎么用。它的重点落在 JS 语言特性本身的深度理解、浏览器运行机制、异步流程控制以及一部分工程化基础。这其实透露了一个很清晰的团队信号比起“用过什么框架”他们更看重你“能不能把JS这门语言真正用好”。这个筛选逻辑在后端团队可能不成立但对办公软件这种长期维护、性能敏感的前端业务来说非常合理。框架可以入职后再学但语言功底和浏览器底层理解短时间很难突击出来。2. 选择题里的JS基础陷阱变量提升、this指向与闭包2.1 变量提升与函数提升的优先级选择题第一类高频考点是变量提升和函数提升。这类题看起来简单但正确率常年不高。给大家还原一道经典的变形题考察的是两者同时存在时的优先级var a 1; function a() { console.log(function); } console.log(typeof a);很多同学一看函数声明提升优先级高于变量声明提升所以typeof a应该是function。这个结论在前半段是对的但注意这里有一个关键细节变量声明提升只提升声明而不提升赋值var a 1中的赋值操作仍然留在原地。而函数声明是整体提升的所以在代码执行到var a 1这行时a实际上是先被设置为函数然后又被重新赋值为数字1。最终typeof a的结果是number不是function。这个坑其实考的是“提升阶段”和“执行阶段”的区分以及函数声明与变量声明同时出现时的覆盖顺序。凡是答错的同学基本都只记住了“函数优先”这个结论而没有把赋值时机考虑进去。要是再延伸一层题目还可能在同一个作用域里同时写多个同名函数声明function foo() { return 1; } function foo() { return 2; } console.log(foo());这种情况下后一个函数声明会直接覆盖前一个输出是2。这和变量赋值覆盖是同一个逻辑——JS引擎在预编译阶段按源码顺序处理声明后面的覆盖前面的。2.2 this指向的两组经典场景this指向是选择题里的必考项金山办公这套题也没有绕过。常见的出题方式是给出几个独立场景让你判断this分别指向谁。这里我整理了一个比较全的对照表基本覆盖了校招笔试可能出现的情况场景this指向备注普通函数调用window/undefined严格模式下是undefined对象方法调用该对象取决于调用点不是定义点构造函数调用新创建的实例配合new关键字call/apply/bind调用手动指定的第一个参数三者绑定优先级最高箭头函数外层词法作用域的this不遵循任何动态绑定规则DOM事件回调绑定事件的元素但在箭头函数中失效考选择题的时候最难判断的其实是“对象方法赋值给变量后再调用”这种写法const obj { name: wps, getName: function() { return this.name; } }; const fn obj.getName; console.log(fn());很多同学直接选了wps但正确答案是undefined非严格模式下会访问到window.name而window.name默认是空字符串。原因很朴素this是在调用时确定的fn()是普通函数调用this已经不是obj了。2.3 闭包与异步for循环里的经典送命题闭包类选择题最经典的形态就是for循环加setTimeout的组合金山办公的卷子里出现过类似的原题变形for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); }输出是5个5这个结论很多人都知道。但笔试真正想考察的是你能不能解释清楚为什么以及如何让它输出0到4。这里我建议顺着两个方向来回答第一个方向用IIFE创建独立作用域在每一轮循环中把当前的i作为参数传给函数并立即执行这样setTimeout回调里闭包捕获的是每次传入的参数值而不是同一个外层变量。第二个方向把var改成let。let声明会为每一次循环创建独立的词法环境JS规范在for循环的每次迭代中都会做这样一个绑定动作所以setTimeout回调里拿到的i是当前迭代的副本。实际笔试时能把let方案和IIFE方案都写出来再说明let本质上做了什么这道题基本就满分了。多数人只会背“var打印5let打印0到4”但讲不出词法环境的概念这就没办法在简答题里拿高分。3. 简答题的核心考点事件循环与渲染机制3.1 事件循环中的宏任务与微任务简答题里出现频率极高的一类是宏任务和微任务的执行顺序。金山办公的卷面上通常会给你一段混合了setTimeout、Promise、async/await的代码让你写出打印顺序。这类题能很准确地筛出“真正理解事件循环”和“只是背过概念”的两类人。我写一个典型的例子大家先自己推一遍再往下看async function async1() { console.log(async1 start); await async2(); console.log(async1 end); } async function async2() { console.log(async2); } console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); async1(); new Promise(function(resolve) { console.log(promise1); resolve(); }).then(function() { console.log(promise2); }); console.log(script end);输出结果是这样的script start async1 start async2 promise1 script end async1 end promise2 setTimeout很多同学会在async1 end和promise2的顺序上栽跟头。记住一个关键await后面的代码并不是立刻执行而是被当作微任务继续排队。async2()执行完后await会显式把后续的console.log(async1 end)挂到微任务队列尾部而此时promise1里的resolve()已经执行了console.log(promise2)这个回调排在微任务队列里更靠前的位置。所以先打印async1 end还是先打印promise2取决于微任务入队的先后关系。3.2 浏览器渲染与JS执行的阻塞关系金山办公简答题里有另一类问法也很经典CSS和JS的引入位置为什么有讲究页面渲染过程是怎样的这道题看似是HTML基础但实际上考察的是浏览器的渲染流水线理解。比较标准的回答链路是浏览器拿到HTML后从上到下逐行解析。遇到CSS尤其是外链样式表时会并行发起请求但不会立刻阻塞HTML解析遇到script标签时情况就不一样了默认情况下会暂停HTML解析先下载并执行JS然后再继续。原因是JS可能会通过document.write等方式修改DOM结构浏览器必须等JS执行完才知道当前DOM是不是最终版本。把script放到body底部就是为了避免JS阻塞首屏渲染。而CSS则相反虽然它在加载阶段不阻塞解析但会阻塞渲染因为浏览器必须等到CSSOM构建完成才能生成渲染树。这也是为什么很多团队坚持把关键CSS内联、非关键CSS异步加载。回答这类题时如果能顺带提一句defer和async的区别会是很加分的延展。defer是延迟到HTML解析完成后按顺序执行async是下载完成后立即执行执行顺序不保证。对于办公文档这种对DOM结构依赖很强的场景defer显然更安全。3.3 HTTP缓存在办公场景中的意义另一道高频简答题是HTTP缓存机制通常在金山办公的笔试试卷里以“强缓存和协商缓存的区别与使用场景”出现。这道题对WPS这类产品有很强的指向性因为在线文档里的静态资源脚本、样式、图标、文档模板非常依赖缓存策略来减少网络请求。答案可以分成三层第一层是掌握强缓存字段Cache-Control: max-agexxx是新标准Expires是旧标准两者同时存在时Cache-Control优先级更高。第二层是协商缓存请求发出后服务器通过Last-Modified或ETag来判断资源是否变化没变化就返回304让浏览器继续使用本地缓存。第三层是要能结合场景说清楚什么时候用强缓存、什么时候用协商缓存。比如文档编辑器里经常变动的协作脚本就不适合设置很长的强缓存时间否则用户拿到的是旧版本代码很容易出现功能不一致。而多年不动的第三方静态库完全可以设置一年以上的强缓存。能想到这一层说明你不只是在背字段而是在思考缓存策略与业务场景的匹配关系。4. 框架与工程化从“用过”到“理解”的差距4.1 Vue响应式原理从Object.defineProperty到Proxy金山办公这套题里关于框架的考察不算多但分量很重。题干常这样问简要说明Vue 2响应式系统的核心实现思路以及Vue 3为什么改用Proxy。先说Vue 2的思路。它通过Object.defineProperty遍历对象的所有属性为每个属性定义getter和setter。getter里做依赖收集把当前正在执行的Watcher记录到该属性的依赖列表中setter里当值发生变化时触发该属性的依赖列表通知所有Watcher更新。问题也很明显Object.defineProperty只能监听属性的读取和赋值无法拦截属性的新增和删除这是它在设计上的先天局限。所以Vue 2迫不得已提供了Vue.set和Vue.delete两个API来手动解决动态增删属性的响应式问题。此外对于数组defineProperty也束手无策Vue 2只能通过重写数组的7个变更方法来模拟响应。Vue 3改用Proxy之后直接在对象代理层面拦截所有操作包括属性读取、赋值、遍历、删除、in判断甚至函数调用。这样新增属性和删除属性都天然是响应式的不再需要额外的API。性能上也更优因为Vue 2在初始化时需要递归遍历所有属性做defineProperty而Proxy属于惰性拦截只有真正访问到某个属性时才触发get可以做更多细粒度的优化。笔试答题时能把上面这两个版本的区别说清楚再补充一句“Proxy无法被polyfill所以Vue 3不支持IE11”基本就是一份能拿高分的答案了。4.2 组件通信方案的选型逻辑组件通信也是简答题的常见选题。题目一般会问在Vue组件中你有哪几种通信方式各自适用哪些场景基础答案是props/事件、ref、EventBus、provide/inject、Vuex。但只罗列这些是不够的优秀的答案应该能画出一条选型链路父子组件之间默认用props向下传数据用this.$emit向上传事件。这种单向数据流最清晰适合简单场景。需要直接调用子组件方法时可以用ref拿到组件实例。兄弟组件或跨多层级的组件通信以前多用EventBus但事件多了之后很难维护因为事件名没有集中管理全局命名空间容易被污染。provide/inject适合祖先组件向所有后代提供公共依赖但带来一个隐患它不是响应式的如果注入的数据发生变化子组件不会自动更新。真正的全局状态共享应该用Vuex或Pinia集中管理、可追踪、可调试。这里有个很容易被忽略的细节事件总线在组件销毁时一定要写$off去解绑否则会造成事件重复监听、内存泄漏。笔试时如果能主动提到这一点会显得你确实在真实项目里踩过坑。4.3 webpack构建优化与Vite的取舍工程化方向有一类简答题考察构建工具的理解比如webpack的构建流程大概是怎样的loader和plugin的区别是什么webpack的核心思想可以概括成一句话一切都是模块所有文件经过loader转换后进入模块依赖图再由plugin在特定生命周期做额外的处理。loader是文件级转换器解决的是“怎么把这个文件变成JS模块”的问题比如babel-loader把ES6转成ES5css-loader处理CSS中的import和url。plugin是流程级扩展器解决的是“在打包过程中某个时间点做什么事”的问题比如HMR热更新、代码压缩、Bundle分析。除了区分loader和plugin想拿高分还可以提一下为什么会出现Vite。webpack在大型项目里开发服务器启动慢因为要完整打包整个应用才能提供服务。Vite利用了浏览器原生ES Module导入能力开发环境下不需要打包只对修改的文件做即时编译所以冷启动速度很快。但同时Vite在生产环境还是要基于Rollup打包因为它要处理兼容性、代码分割等问题。能说出这一层说明你对构建工具的理解已经有一定深度了。5. 手写代码题高频考点全拆解5.1 手写防抖与节流防抖和节流基本是前端开发笔试题的固定嘉宾金山办公的卷子也不例外。这两个概念很多人在项目里用过但一到手写就露怯。我建议不要死记代码而是先理解各自的核心场景。防抖的核心思想是“触发事件后等待一段时间再执行如果在这段时间内再次触发则重新计时”。典型场景是搜索框自动补全、窗口大小调整。节流的核心思想是“在一段时间内无论触发多少次都只执行第一次”典型场景是滚动加载、页面resize时的高频计算。防抖的实现很直观function debounce(fn, delay 300) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); timer null; }, delay); }; }节流有两种实现方式第一种是时间戳版本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); } }; }第二种是定时器版本。时间戳版本更适合在“触发边界”的场景比如滚动到底部加载更多它会在到达时间点的第一时间执行。定时器版本则会在停止触发后额外执行一次。面试时如果能把两种版本的差异快速说出来并按照“当前场景需要尾部执行还是首部执行”来选择就会比单纯背一份代码有说服力。5.2 手写深拷贝的边界处理深拷贝是笔试编程题里特别爱考的一类因为它能同时考察递归能力、类型判断能力和边界意识。最基础的方案是用JSONconst clone JSON.parse(JSON.stringify(obj));但这个方案有大量坑遇到undefined、function、symbol时这些属性会被直接丢弃遇到Date会被转成字符串遇到NaN会变成null遇到循环引用会直接报错。所以笔试手写深拷贝时如果你最终只写出了JSON方案基本只能得一半分。更完整的实现思路是递归并且能处理几个关键边界。在递归之前先判断基础类型、数组、Date、RegExp这些特殊对象再处理普通对象。最关键的是用WeakMap来解决循环引用问题——WeakMap的好处是key必须是对象而且本身是弱引用不会造成内存泄漏。每次递归前先检查WeakMap里是否已经存在该对象存在就直接返回不存在就存一份再递归。常见的一个问题是递归深拷贝里有个很少人注意到的坑就是Object.keys(obj)只能取到可枚举的自有属性如果你需要拷贝不可枚举属性要用Reflect.ownKeys。不过校招笔试一般不会出这么深能处理好循环引用和Date/RegExp已经超过大多数人。5.3 手写Promise.all理解异步调度的核心编程题里还经常出现Promise相关的手写尤其是Promise.all。这道题能考察你对Promise状态机的理解以及是否真的会用new Promise、resolve、reject。一个基本实现是这样的function promiseAll(promises) { return new Promise((resolve, reject) { const results []; let count 0; const len promises.length; if (len 0) { resolve(results); return; } promises.forEach((p, index) { Promise.resolve(p).then( (value) { results[index] value; count; if (count len) { resolve(results); } }, (reason) { reject(reason); } ); }); }); }这里有几个容易出错的地方需要专门说明。第一个是Promise.resolve(p)为什么要包这一层因为调用方传进来的可能是常量、可能是thenable对象、也可能是已经resolve的Promise统一包一层可以保证所有情况都能按Promise规则处理。第二个是用results[index] value而不是results.push(value)因为异步返回的顺序不一定是传入顺序用索引赋值才能保证结果顺序和入参顺序一致。第三个是count len的判断因为可能存在某个Promise先返回两个值的情况但实际不会每次then只产生一个结果所以count递增最多到len。如果能在这个基础上再补充两个面试官爱听的关联问题答案会更有层次Promise.all是数组里任何一个reject整个结果就reject其他Promise仍然会继续执行只是结果被忽略而Promise.allSettled会等全部完成后再返回每个结果对象带有status字段更适合需要各自处理成功失败场景的情况。6. 这套题做完之后我的几点实际体会6.1 做题顺序比埋头刷题更重要复盘完整套试卷我最想强调的一点是做题顺序本身就是一种能力。金山办公这套题如果按题目顺序硬推到了后面的简答题很容易时间不够。比较合理的策略是先把所有选择题和填空题快速扫一遍遇到不确定的先用排除法蒙一个标记一下不要恋战。然后立刻去做手写代码题因为这类题不仅分值高而且需要清晰的头脑。简答题放在中间答题时要注意分点作答先写结论再写理由。阅卷人往往就是团队里的前端工程师他们看的是你的思考路径而不是辞藻多华丽。每道简答题旁边如果有空白区域可以画个简单的执行顺序图这比大段文字高效得多。6.2 最容易丢分的三个细节帮不少同学复盘过这套题我总结出三个最常见的丢分点第一个是代码题不写注释。笔试代码虽然不至于严格按工程标准评审但如果你在手写防抖时标注一下“首次触发立即执行后续触发重新计时”这类说明阅卷体验会好很多也方便你展示自己理解得比自己写的代码更全面。第二个是选择题只看选项不看题干。有很多题描述是“下列说法错误的是”结果你选了一个正确说法一分没得。这种失误特别可惜因为不是你不会是审题不细致。第三个是忽略严格模式。填空题里经常出现this指向的判断如果代码顶部有use strict普通函数调用中的this就从window变成了undefined。这个细节区分度很高能筛掉一大批基础不牢的同学。6.3 从这场笔试反推自己的复习清单最后聊聊怎么从一场笔试反推自己的知识体系。笔试不是终点更像是一面镜子考完之后一定要做一次题型归类找出自己真正薄弱的模块。如果你在这套题里选择题失分多大概率是JS语言基础需要回炉。建议把变量提升、作用域链、闭包、this绑定、原型链这几块内容重新过一遍配合每天十道手写小题练手感。如果简答题失分多问题可能在浏览器原理和网络基础这部分可以顺着“从URL输入到页面渲染”这条链路串起来看把每一环涉及的协议和API都弄清楚。如果是编程题写不完说明平时手写练习太少了需要刻意训练防抖节流、深拷贝、Promise相关工具函数、数组去重、数组扁平化这类高频题目。金山办公这套2020年的笔试题放到今天来看仍然有很强的参考价值。它不追热点、不炫技考察的都是前端开发最核心的东西。我自己在实际参与招聘面试时的体会也很一致真正需要的前端工程师未必框架用得最花哨但一定是在JS语言、浏览器机制这些底层能力上让人放心的那种人。建议准备校招的同学把这类“基础扎实型”的笔试题当作磨刀石做一遍、错一遍、再复盘一遍比盲目刷几十套大厂海选题更有用。