最近好多准备秋招的小伙伴在后台问我金山办公就是做WPS的那家的前端笔试题到底难不难、考什么方向。我特意把金山办公2020校招前端开发工程师笔试题二这份卷子翻出来结合这几年带新人、做面试官的经验把里面涉及的考点逐个拆开揉碎讲一遍。这篇文章不是简单给答案而是把每道题背后的原理、推导过程、以及实际开发中对应的场景都讲清楚适合准备校招或者工作一两年想补基础的前端开发同学认真读一遍。这份卷子整体风格很典型不考偏门框架API重点集中在JavaScript语言基础、异步编程、浏览器机制和手写代码这几个大块。看似题目常规但每一道都能往下深挖好几层恰恰是筛人的关键。我按照知识点维度重新组织了解析顺序先讲语言基础再讲异步与浏览器然后是框架和工程化最后是手写题和备考策略照着这个顺序读下来你会对整套卷子有一个完整的认知。1. 金山办公校招笔试的出题逻辑看似基础实则层层设坑1.1 题型构成与考点分布先整体看一下这份卷子的题型构成。金山办公前端校招笔试题一般是选择题、填空题、简答题和手写代码题混合出题限时通常在60到90分钟。从考点分布来看主要集中在以下几个方面考点模块常见出题形式占比预估JavaScript语言基础作用域、闭包、this、原型链选择题、读代码写输出30%异步编程与事件循环Promise、async/await选择题、代码输出题20%浏览器原理与性能优化渲染流程、缓存、重绘回流简答题、选择题15%框架与工程化Vue/React、构建工具简答题、选择题15%手写代码防抖、深拷贝、数组去重等编程题20%这个分布其实很能说明问题金山办公不是只盯着框架用没用过而是更看重语言基本功。原因也好理解WPS这种体量的产品前端要处理文档渲染、协同编辑这类复杂场景对JavaScript的理解深度直接决定能不能接住这些需求。一个只会调框架API、不懂底层原理的同学遇到线上性能问题时会非常被动。1.2 这份卷子的三个出题倾向拿到这份卷子我反复做了几遍之后总结出三个明显的出题倾向。第一个倾向是“基础题嵌套陷阱”。比如一道关于变量提升的题目表面看是考var和let的区别但选项中会把函数声明提升、块级作用域、暂时性死区全部混在一起考察的是你对执行上下文这个机制的完整理解而不是记忆单个知识点。第二个倾向是“异步题必考输出顺序”。几乎每年都会有一道Promise加setTimeout的代码题让你写出控制台打印顺序。这类题唯一的解法就是掌握事件循环的完整规则靠背答案是行不通的因为题目稍微改一个嵌套层级结果就完全变了。第三个倾向是“手写题关注边界条件”。比如让写一个深拷贝大部分人能写出递归版本但能不能处理循环引用、能不能拷贝Symbol属性、能不能拷贝Date和RegExp对象这才是评分的重要分界点。笔试阅卷时核心逻辑占一部分分边界条件处理占另一部分分只写出基础版本是拿不到高分的。2. 作用域和this指向几道经典题背后的执行上下文本质2.1 一道典型的读代码输出题及其变形这份卷子里有一道很经典的题目对理解执行上下文非常有帮助。原题大概长这样var name global; function foo() { console.log(name); var name local; console.log(name); } foo();这道题的输出结果是什么很多人第一反应是global和local但实际上第一个console.log(name)输出的是undefined。原因在于var声明的变量会被提升到函数作用域顶部但赋值不会提升。函数内部的var name local被解释器处理成了两步var name;提升到函数顶部name local留在原位置。所以第一个打印语句执行时name在函数作用域内已经被声明了但还没有赋值值自然是undefined。如果题目再变形一下把var换成letlet name global; function foo() { console.log(name); let name local; } foo();这就会直接抛出一个ReferenceError因为let声明的变量存在暂时性死区Temporal Dead Zone简称TDZ在执行到let声明语句之前访问该变量会直接报错而不是返回undefined。这个区别就是执行上下文里词法环境LexicalEnvironment和变量环境VariableEnvironment分工不同的具体体现。2.2 从执行上下文角度重新理解变量提升要彻底搞懂这类题得从执行上下文的创建和执行两个阶段来看。JavaScript引擎在执行一段代码前会先创建一个执行上下文。创建阶段会做三件事确定this的绑定、创建词法环境、创建变量环境。var声明的变量和函数声明会被放入变量环境并且在创建阶段就完成初始化。var声明的变量初始值为undefined函数声明则直接初始化为函数引用。而let和const声明的变量会被放入词法环境但创建阶段不会初始化而是保持一个uninitialized的状态直到执行到声明语句才真正初始化。这个uninitialized状态就是暂时性死区的来源。用一个生活化的类比来说var声明的变量就像一个房客入住前房间就已经挂上了门牌号你可以进去看但里面是空的let声明的变量则是门牌号都没挂在入住手续办完之前你连房间门都找不到强行闯入就直接报错。在笔试题里考察点往往是这几层变量提升的机制、函数声明与变量声明的优先级、块级作用域对let和const的影响。函数声明和变量声明的优先级是个隐藏考点当同名的函数和变量同时存在时函数声明会覆盖变量声明但赋值操作会再次覆盖函数。比如console.log(typeof foo); function foo() {} var foo 123;这里输出的是function因为创建阶段函数声明先初始化var声明的同名变量发现已经有函数声明了就不再重复初始化。执行阶段var foo 123才把foo覆盖成数字。2.3 this指向题的本质是调用方式问题除了作用域this指向也是重点。常见考法是这样的const obj { name: wps, getName: function() { return this.name; } }; const fn obj.getName; console.log(fn());输出是undefined因为fn()是普通函数调用this指向全局对象严格模式下是undefined而不是obj。只有obj.getName()这种通过对象属性调用的形式this才指向obj。JavaScript的this指向总结起来就四个规则默认绑定独立函数调用this指向全局或undefined、隐式绑定对象方法调用this指向该对象、显式绑定call/apply/bind指定this、new绑定this指向新创建的实例。笔试题里经常把这四个规则拆开考还会结合箭头函数来考。箭头函数不绑定this它沿用的是定义时外层作用域的this这个特性在做对象方法和事件回调时最常见。实际面试中还有一个高频变形就是把this和setTimeout结合const obj { name: wps, getName: function() { setTimeout(function() { console.log(this.name); }, 100); } }; obj.getName();输出undefined因为setTimeout里是普通函数调用。如果改成箭头函数输出的才会是wps。很多人第一次遇到这个题都会懵其实就是没搞清楚this的绑定规则在回调函数场景下会失效。正确理解方式是this是在函数调用时确定的而不是定义时确定的箭头函数除外回调函数脱离了对象上下文调用规则就变了。3. 事件循环与异步编程Promise排队题决定了你能不能进下一轮3.1 一道典型的输出顺序题完整推演异步编程的题几乎是金山办公笔试的必考题也是区分度最高的题。典型题目是这样的console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); Promise.resolve() .then(function() { console.log(promise1); }) .then(function() { console.log(promise2); }); console.log(script end);要求写出输出顺序。正确答案是script start、script end、promise1、promise2、setTimeout。完整的推导过程是这样的JavaScript是单线程语言同一时间只能执行一个任务但浏览器提供的Web APIDOM事件、定时器、网络请求等可以并行执行。当某个异步任务完成时它的回调函数不会立刻执行而是进入任务队列排队。任务队列分为宏任务队列MacroTask Queue和微任务队列MicroTask Queue。每执行一个宏任务都会先清空当前的微任务队列然后再从宏任务队列中取下一个任务。Promise的then回调属于微任务setTimeout属于宏任务。所以这段代码的执行流程是执行同步代码打印script start遇到setTimeout创建宏任务回调函数放入宏任务队列执行Promise的then回调将回调函数放入微任务队列继续同步执行打印script end同步代码执行完毕检查微任务队列依次执行promise1、promise2微任务队列清空后从宏任务队列取出setTimeout回调打印setTimeout这个执行顺序理解到位了即使题目嵌套三层Promise你也能正确推导出来。如果再加一个async/await需要知道await本质上是Promise的语法糖await后面的代码相当于被放进了then回调里。比如async function test() { console.log(a); await Promise.resolve(); console.log(b); } test(); console.log(c);输出顺序是a、c、b因为await后面的代码被推进了微任务队列先执行完同步代码c再回来执行b。3.2 微任务与宏任务的坑点在哪里实际做题时最容易出错的点有三个。第一个是微任务队列的“清空”逻辑。微任务队列不是执行一个就切换宏任务而是必须全部执行完。如果在then回调里继续添加微任务这个新任务会被排到当前微任务队列的末尾本次循环内同样会被消费掉。所以无限递归的Promise会导致页面卡死这点和setTimeout不同。第二个是Promise构造函数的执行时机。new Promise(executor)中的executor是立即同步执行的不是异步的。只有.then()回调才是微任务。最容易错的题目就是构造函数里套console.log。第三个是async函数中await前后的执行顺序。很多人以为await会让出整个async函数实际上只有await之后的代码会被延后await之前的代码是同步执行的。结合微任务执行时机来推导就不会出错。3.3 事件循环在实际业务中的体现纸上谈兵没意思说个实际的场景。WPS在线文档在做表格数据保存时会有个防抖逻辑用户停止输入500毫秒后才触发保存请求。如果一个老代码里把这个防抖用setTimeout实现同时在保存前还有一段同步更新UI的逻辑就容易出现UI卡顿和保存请求重复的问题。理解了事件循环之后正确的设计思路是用防抖debounce加节流throttle的组合方案把UI更新放入requestAnimationFrame中把网络请求放入Promise异步流程中保证UI渲染和网络请求互不阻塞。这个设计思路在很多大厂前端面试中也会作为场景题出现金山办公的笔试题虽然只考了基础输出顺序但背后的应用逻辑是相通的。4. 浏览器渲染与前端性能从网络题延伸出的真实优化场景4.1 页面加载过程中发生了什么浏览器相关的题目在这份卷子里也有一定占比。常见考法是让简述从输入URL到页面完全展示的完整过程这个过程中涉及的环节包括DNS解析、建立TCP连接、发送HTTP请求、服务器响应、浏览器解析HTML并构建DOM树、解析CSS构建CSSOM树、合成渲染树、计算布局、绘制页面。还有一个隐藏考点是浏览器的预加载扫描器会提前发现资源链接但这部分一般不作为校招考察重点。在实际答题时建议按时间轴分段来写每段都点出关键动作比如DNS解析会涉及缓存层级、TCP连接会涉及三次握手、浏览器渲染会涉及DOM和CSSOM的合成规则。写清楚这些细节比堆砌大而全的流程描述更容易拿分。4.2 重绘与回流是前端性能的核心考点与渲染机制强相关的重绘repaint和回流reflow是笔试和面试的高频题目。回流指的是当页面元素的几何属性发生变化时浏览器需要重新计算元素的几何信息并重新布局重绘指的是当元素的外观属性变化但几何属性没变时浏览器只需要重新绘制像素不需要重新布局。回流的代价比重绘大得多所以优化核心是减少回流。常见的优化手段包括使用class切换样式而不是逐个修改style属性让浏览器一次性完成样式计算对需要动画的元素使用transform和opacity这两个属性可以触发GPU合成而不触发回流将需要多次读取的几何属性如offsetHeight、offsetWidth缓存到变量中避免反复强制同步布局使用document.createDocumentFragment()批量操作DOM最后一次性插入笔试如果出简答题让“谈谈如何减少页面卡顿”从回流重绘、事件循环、requestAnimationFrame三个角度回答基本就能覆盖所有采分点了。这里再说一个容易忽略的细节读取offsetWidth会强制浏览器清空队列并立即执行布局计算如果你在一个循环里连续读和写几何属性就会造成“布局抖动”性能极差这也是为什么建议读写分离。4.3 浏览器缓存机制在笔试题中的考法浏览器缓存的题目基本会围绕强制缓存和协商缓存来出。强制缓存通过Cache-Control和Expires实现命中后不会发请求直接读本地缓存协商缓存通过Last-Modified/If-Modified-Since和ETag/If-None-Match实现需要向服务器发起请求由服务器判断是否返回304。其中Cache-Control的优先级高于ExpiresETag的优先级高于Last-Modified。这道题在实际开发中的对应场景是静态资源JS、CSS、图片打包后文件名带hash值配合Cache-Control: max-age31536000实现永久缓存而index.html设置为no-cache保证每次都能拿到最新的资源引用。金山办公这类重前端产品对缓存策略的要求非常高因为WPS的Web版有很多资源文件缓存策略设计得好不好直接影响用户二次打开的速度和流量消耗。5. 框架与工程化Vue响应式原理在笔试题中的考法5.1 关于框架的题目到底怎么出金山办公的前端技术栈以Vue为主笔试题里关于框架的考点一般不会直接让写组件而是考察框架底层的核心机制。最常考的是Vue响应式原理。旧版Vue 2使用的是Object.defineProperty新版Vue 3使用Proxy笔试题会问这两者的区别以及各自的局限性。Object.defineProperty的核心是对对象的属性进行拦截在getter中收集依赖在setter中触发更新。它最大的问题是无法监听属性的新增和删除所以Vue 2才需要Vue.set和Vue.delete来补充处理。同时它初始化时要递归遍历对象的所有属性对象层级越深性能开销越大。Proxy则直接代理整个对象可以监听属性新增、删除、修改而且不需要递归遍历天然支持懒代理。不过Proxy也有兼容性问题在不支持Proxy的环境中无法使用这也是Vue 3必须要求现代浏览器的原因之一。另一个常考的Vue知识点是虚拟DOM和diff算法。虚拟DOM本质上是用JavaScript对象来描述真实DOM结构通过对比新旧虚拟DOM的差异最小化真实DOM操作。diff算法的核心是基于sameVnode判断两个节点是否相同相同则进行patchVnode复用不同则直接替换。笔试一般不会让你手写完整diff但会通过选择题考察key的作用key是用来标识组件节点的唯一性diff过程中通过key快速找出可复用的节点没有key或key不稳定会导致组件状态错乱。5.2 工程化规范类题目如何作答工程化相关题目在这份卷子里也有涉及围绕代码规范、构建流程、组件化设计来出题。比如“你如何理解前端工程化”这道简答题回答时可以从模块化、组件化、自动化、规范化四个维度展开。模块化指的是代码层面的拆分CommonJS和ES Module的区别是常考点组件化指的是UI层面的拆封装核心是明确组件的输入输出和职责边界自动化指的是构建、测试、部署流程的自动化这块涉及到CI/CD的流水线设计规范化指的是代码规范、提交规范、文档规范比如ESLint配置、Prettier配置、Commitizen规范等。答题时建议结合自己做过的项目来写不要只背概念。我之前带过的一个实习生笔试时写“我会用ESLint统一代码风格”但这个回答太空了如果他能写清楚“我在项目中配置了eslint-config-airbnb并把pre-commit钩子接入husky提交前自动检查配合lint-staged只检查暂存区的文件”这个答案的含金量会高出很多。5.3 框架题目在面试追问中会如何延伸笔试只是第一关框架相关题目在面试环节会被大幅延伸。比如笔试考了Vue响应式原理面试官可能会追问为什么Vue 3用Proxy替代Object.defineProperty能说出性能原因和功能完整性才算过关Vue的nextTick是如何实现的这个问题会延伸到事件循环微任务和宏任务如果让你设计一个数据响应系统你会怎么设计方案这个问题考察的是系统设计能力不是背API所以我的建议是笔试题里出现的每一个框架考点你都要准备一个“追问2到3层”的面试版答案。笔试考察的是有没有学过面试考察的是有没有真正理解两个环节的深度要求完全不同。6. 手写代码题防抖、深拷贝、数组去重背后的边界条件6.1 高频手写题及其考察点手写代码题是笔试卷里最考验基本功的部分金山办公的卷子里常出现的有防抖、节流、深拷贝、数组去重、Promise.all、函数柯里化等。表面看是常见题但每一道都能考出层次。以防抖为例基础版本是这样的function debounce(fn, delay) { let timer null; return function(...args) { if (timer) { clearTimeout(timer); } timer setTimeout(() { fn.apply(this, args); }, delay); }; }如果只写出这个版本能拿到基础分。但高分版本需要额外处理几个细节返回值如何处理、this如何绑定、是否支持立即执行选项、取消防抖逻辑。完整版本这样写function debounce(fn, delay, immediate false) { let timer null; let result; const debounced function(...args) { const callNow immediate !timer; if (timer) { clearTimeout(timer); } timer setTimeout(() { timer null; if (!immediate) { result fn.apply(this, args); } }, delay); if (callNow) { result fn.apply(this, args); } return result; }; debounced.cancel function() { if (timer) { clearTimeout(timer); timer null; } }; return debounced; }这个版本把边界条件都照顾到了支持立即执行、支持取消、正确绑定this、正确传递参数。实际笔试时不需要写得这么完整但你需要知道这些边界条件的存在并且能说出来。如果能写出来就达到了高分水平。6.2 深拷贝的完整实现思路深拷贝是另一道高频题三种写法对应三个分数段。最基础的版本是用JSON.parse(JSON.stringify(obj))一行代码搞定但这种方法会丢失function、undefined、Symbol类型的属性无法处理Date对象、RegExp对象和循环引用。所以只会这一种写法面试官基本可以判定你对深拷贝的理解停留在API调用层面。第二个版本的思路是用递归实现属性遍历function deepClone(obj, map new WeakMap()) { if (obj null || typeof obj ! object) { return obj; } if (obj instanceof Date) { return new Date(obj.getTime()); } if (obj instanceof RegExp) { return new RegExp(obj.source, obj.flags); } if (map.has(obj)) { return map.get(obj); } const cloneObj Array.isArray(obj) ? [] : {}; map.set(obj, cloneObj); Reflect.ownKeys(obj).forEach(key { cloneObj[key] deepClone(obj[key], map); }); return cloneObj; }这段代码的三个关键点用WeakMap解决循环引用问题、用Reflect.ownKeys获取包括Symbol在内的所有属性、单独处理Date和RegExp类型。这些细节写出来就能和只会用JSON方法的同学拉开差距了。如果在笔试现场时间有限我会建议优先写出基础递归版本然后单独提一句“如果用JSON方法会有哪些缺陷我可以用WeakMap处理循环引用”。这样既展示了代码能力又展示了知识深度。6.3 数组去重的多解法与踩坑点数组去重这道题其实也有层次。最直接的写法是用Setconst unique arr [...new Set(arr)];这个写法简洁且高效唯一的缺陷是不能对对象数组去重。所以面试官往往会追加一句“如果数组中有对象要怎么去重”答案是需要指定去重规则用Map和唯一标识来去重function uniqueByKey(arr, key) { const map new Map(); return arr.filter(item { const value item[key]; if (map.has(value)) { return false; } map.set(value, true); return true; }); }踩坑点在于NaN的去重。NaN ! NaN但Set在做严格相等比较时把NaN视为相等所以new Set([NaN, NaN])去重后只剩一个NaN。如果用indexOf判断去重NaN就永远去不掉因为arr.indexOf(NaN)结果是-1每个NaN都会被保留。这个点很多人在笔试时没注意到。手写题的核心是理解边界条件这些边界条件往往就是项目实践中真正会遇到的问题。能把这些边界条件讲清楚、写出来说明你真的动手写过代码而不是只背了一堆API。7. 从这份卷子反推备考路线哪些复习优先级最高7.1 按考点权重和实际产出确定复习顺序如果把这份卷子的考点按复习优先级排序我的建议是执行上下文与作用域入门后先强化、事件循环要能默写完整流程、浏览器渲染与缓存机制要能串成整体链路、框架底层原理要能画出示意图、手写题要每天练两道保持手感。执行上下文之所以排第一是因为它是JavaScript运行时机制的地基理解了作用域、闭包、this、变量提升这些高频考点才能串联起来。事件循环排第二因为异步逻辑在业务开发中无处不在没有这个基础排查线上问题会非常吃力。浏览器机制和框架原理属于进阶加分项手写题则是短期提升最快的部分每天坚持练两周就能看到明显效果。7.2 做题之外笔试准备还需要注意的策略最后分享几个笔试过程中的实用策略都是我实际带人总结出来的经验。第一遇到读代码写输出类的题目先在草稿纸上把执行上下文栈画出来尤其是涉及函数嵌套调用时画栈能避免被绕晕。第二简答题不要只写关键词要写成有逻辑的段落让阅卷人看到你的思路比如“这个问题我从三个层面来回答”这种框架感很有帮助。第三手写题即使写不出完整代码也要写出核心思路和关键API部分得分比空着强得多。第四点也特别重要时间分配要有取舍。遇到卡壳超过十分钟的题先标记跳过把能拿的分拿稳回头再处理难题。我自己笔试时习惯先把所有题目快速浏览一遍评估难度分布然后按“简单到难”的顺序完成确保不会因为一道难题丢掉后面所有简单题的分。这份卷子做下来最大的感受是金山办公真的很看重候选人对JavaScript语言本身的理解深度。不管技术栈怎么变语言基础、异步机制、浏览器原理都是前端开发的根。把这些根扎稳了不管是校招笔试还是后续的职业发展都会扎实很多。