这份“用友2017web前端试题四”不是一道题而是一张通往B端大厂前端岗位的地图。很多人第一次看到这类真题第一反应是“我靠怎么考这么细”第二反应是“网上答案靠谱吗”。我翻出这份旧题重新做了一遍又结合这些年带团队、面候选人的实际感受把它拆成了几个真正值得反复琢磨的知识块顺手把当年踩过的坑也一起写出来。先说结论这套题即使放在现在依然有很强的参考价值。前端技术迭代快但底层逻辑没变。用友作为国内老牌企业服务厂商它的Web前端笔试有很大的代表性——不考花架子不炫新名词考的几乎全是“能不能在真实业务里扛住事”的基础功。适合谁看正在准备B端/中大厂前端面试的求职者带初、中级前端的团队负责人还有那些想系统性自查前端基础是否扎实的同学。1. 这套2017年试题到底在考什么1.1 用友出题的核心思路稳定大于一切用友这种体量的公司核心业务是ERP、云服务、数据管理平台前端面对的场景几乎都是数据密集型页面——复杂表单、多级联动、超大表格、权限分配、审批流。在这种业务下页面崩一次、数据错一条损失都是真金白银。所以它的前端笔试会天然地倾斜向三类能力JavaScript语言基础是否扎实尤其作用域、闭包、原型链、异步这些底层机制浏览器工作原理是否清晰包括渲染过程、缓存策略、性能优化手段工程化意识和代码组织能力能不能写出可维护、可扩展的代码。这套题之所以经典就是因为它鲜明地体现了“业务倒逼技术”的选人逻辑。它不会直接问你“最新框架的API”而是考察你在纯原生环境下如何解决问题然后再看你对框架机制的底层理解。2017年恰好是Vue 2和React逐渐扛起大旗的年份但用友这种老牌厂商的代码库里存量jQuery/原生JS项目依然很多新老技术栈并存是常态。所以试题里会大量出现“既考察现代语法、又要求原生实现”的内容这正是当时真实工作的缩影。1.2 2017年前端技术栈的时代背景要把这份试题的价值吃透必须先还原一下2017年的技术环境。那一年ECMAScript 2015ES6已经普及了两年多Babel成了标配let/const、箭头函数、解构赋值、模板字符串这些不再算“新特性”。同时Webpack 3是主流Vue 2.4/2.5、React 15/16正在大面积落地TypeScript还没有成为大多数团队的刚需CSS预处理器Sass/LESS已经是常规操作但CSS-in-JS只是极少数人的玩具。这个时代背景是怎么映射到试题里的核心观察是这份题既没有停留在“能不能写出兼容IE8的ajax”这种远古层面也没有激进到“考察Server Component、Hooks源码”这种极新层面。它的落点在“新语法你会不会用以及用的时候知不知道原理”。比如它可能让你用ES6语法实现某种继承但又追问原型链的底层关系它可能让你谈谈Promise与async/await的关系但重点考察的是宏任务与微任务的执行顺序。这种出题方式说明了当时中大型企业前端团队的真实状态——已经在使用新工具链但必须对旧浏览器和传统架构负责所以“知其然更知其所以然”是面试的核心筛选标准。1.3 从2017年到现在的考点演变观察我后来重新复盘这份试题时发现一个很有意思的现象近七年过去前端面试的“道”没有变“术”却一直在更新。用一句话概括就是——考点永远在变但考察底层能力这件事从不改变。比如2017年问“如何实现数据监听与双向绑定”是因为Vue 2的Object.defineProperty是当时最热门的话题现在你再问这个问题面试官会追问Proxy和defineProperty的差异、在Vue 3里为什么被替换。2017年问“描述一下从输入URL到页面渲染的完整过程”答案里要包含DNS解析、TCP连接、构建DOM树、CSSOM、渲染树、回流重绘这些步骤现在提问可能还要补充HTTP/2多路复用、QUIC协议、页面预渲染等新维度。所以这份旧试题不应该被当成“背题资料”而更应该被当成“前端基础能力体检表”。用它的考点逐项自查比刷一百道新题更能暴露自己的薄弱环节。下面我把这份试题涉及的核心考点、答题思路和典型的“送命题”拆解一遍。2. 核心考点拆解与答题思路2.1 基础语言必考点闭包、作用域、原型链这类题目几乎占据了用友试题三分之一的篇幅。看起来是基础但拉开差距的恰恰是这些地方。先说闭包。面试题里最常见的形态是“某段循环代码里用var声明变量点击每个按钮输出索引结果都是最后一个”。这道题的变形版本有很多但核心考察点是你是否理解闭包捕获的是变量的引用而不是值。当年我面过不少候选人能背出闭包的定义“函数内部访问外部作用域变量的能力”但一落实到实际代码就答错或者只会在循环里用let解决说不出原理。注意用let当然可以因为let有块级作用域且每次迭代都会创建新的绑定但如果面试官追问“如果项目必须兼容旧浏览器怎么办”你需要流畅地答出用IIFE立即执行函数或再包一层函数来保存每次循环的i值。再说原型链。常见的考察方式是给出一个对象/函数的层层访问关系让你判断输出。这里我提供一个比较稳妥的答题顺序先画出原型链的链路图实例的__proto__指向构造函数的prototype构造函数的prototype又指向其原型的__proto__最终到null然后逐个属性查找注意“自有属性优先于原型属性”的规则。当年这道题的扩展考点还包括instanceof的原理、new操作符的执行过程、class语法和传统构造函数的等价关系。我强烈建议你把new的四个步骤背到条件反射创建空对象、把该对象的__proto__指向构造函数的prototype、改变this指向并执行构造函数、如果函数返回的是对象则返回该对象否则返回新对象。这四步搞清楚了很多题都能迎刃而解。关于this指向简单总结就是谁调用就指向谁没人调用就指向window严格模式下undefined箭头函数不绑定this、往外层找。但常见的笔试陷阱是“调用时被拆成方法引用”或“setTimeout/事件回调里的this”这两个场景即使工作了多年的人也容易翻车。我的建议是答题时先标明“该位置是普通函数还是箭头函数”再判断调用者一步步来就不会乱。2.2 浏览器与性能优化渲染原理、缓存、网络用友的Web产品大多部署在企业内网或通过私有云交付页面加载速度和稳定性是客户直接感受的“门面”。所以试题里必有浏览器工作机理和性能优化相关的考察而且往往以“场景题”的形式出现。经典的“从输入URL到页面渲染完成”答题时建议按阶段展开DNS解析得到目标服务器IP建立TCP连接可能还要加上HTTPS的TLS握手发送HTTP请求服务器返回HTML浏览器解析HTML生成DOM树同时解析CSS生成CSSOM树两者合并生成渲染树Render Tree注意display:none的元素不会出现在渲染树上但visibility:hidden会根据渲染树计算布局Layout/Reflow绘制Paint最后呈现在屏幕上。关于重排Reflow与重绘Repaint最常见的追问是“哪些操作会触发重排”。我的回答习惯是凡是修改元素的几何属性尺寸、位置、display显示隐藏都会触发读取某些属性如offsetHeight、getBoundingClientRect也会强制同步重排。所以优化策略是尽量批量修改样式、用class切换代替逐条修改style、把动画元素移到独立图层transform和opacity不会触发布局。这道题现在问得少了但作为笔试填空或简答还是很常见值得好好准备。缓存策略这块2017年问得最多的是“强缓存与协商缓存的区别”以及Expires、Cache-Control、Last-Modified、ETag这四个头部字段的优先级配合。要特别注意两个易错点Expires是绝对时间Cache-Control: max-age是相对时间后者的优先级更高Last-Modified精度是秒ETag能更精准地应对文件内容没有变化但修改时间变了的情况。再深入一点还会考你“刷新页面F5强缓存还会生效吗”“点击链接跳转和手动输入地址时缓存策略有什么差异”。这些细节直接用表格背下来即可缓存类型判断依据优点缺点优先级强缓存Cache-Control/Expires不发请求速度最快资源更新可能不及时先判断协商缓存ETag/Last-Modified能确认资源是否变化需要发送请求验证强缓存未命中时无缓存Cache-Control: no-cache每次请求都会验证加载速度受影响—2.3 框架与工程化数据绑定、组件通信、构建流程2017年的面试题里已经大量涉及MVVM框架的使用与原理。用友的试题不会直接考“Vue和React谁更好”这类主观题而是考更实操的东西数据绑定的实现机制、父子组件通信方式、生命周期函数的使用场景、模块化规范差异。以Vue为例当年最高频的考点是“Vue双向数据绑定的原理是什么”答案是通过Object.defineProperty劫持数据对象的属性访问结合发布订阅模式当数据变化时通知Watcher更新视图。这里有一个当年非常容易扣分的点Object.defineProperty无法劫持新增属性和通过索引修改数组元素所以Vue 2提供了Vue.setthis.$set来解决。现在你还可以补充Vue 3改用Proxy后新增属性和数组索引都可以被直接监听这也是Proxy对defineProperty的重要优势。这种“新旧对比”式的回答在技术演进类问题上非常加分。组件通信也是必考内容。我建议按“父子、兄弟、跨级”三个场景来准备作答父子通信父传子用props子传父使用事件触发$emit兄弟通信借助父组件作为中转或者用事件总线EventBus跨级通信Vue 2.x可以用provide/injectReact则可以用Context。工程化方面最经典的是“webpack的Loader和Plugin有什么区别”。这题我会先用一句话下定义Loader是加载器用于对模块的源代码进行转换所以它是“文件处理流水线”Plugin是插件范围更广可以监听打包过程中的任何事件执行任何自定义任务比如资源清理、代码压缩、Bundle分析。再举几个典型例子babel-loader把ES6转成ES5file-loader处理图片和字体资源HtmlWebpackPlugin自动生成HTML并根据依赖关系注入script和link标签MiniCssExtractPlugin把CSS抽离成独立文件。这个回答顺序既体现了概念区分又展示了实际使用经验。2.4 综合应用与手写代码编程题的答题策略这套试题的末尾通常有一两道手写代码题常见的是数组去重、防抖节流、深拷贝、排序算法、Promise串行执行等。这些题形式固定但有不少细节坑写之前一定要先想清楚。我拿数组去重举例。最直观的方案是使用Set[...new Set(arr)]一行搞定但很多面试官会追问“如果元素是NaN怎么办”“Set去重的判断规则是什么”。实际上Set内部使用严格相等SameValueZero机制NaN会被认为是相同的所以new Set([NaN, NaN])只有一个NaN这一点很多人不知道。另一种常见方案是用filter和indexOf但注意indexOf对NaN无法正确判断因为indexOf内部使用严格相等所以[NaN].indexOf(NaN)的结果是-1。如果要兼容NaN可以用includes或findIndex替代。这种“一道简单题里能挖出多个底层知识点”的考察方式正是用友这类厂子偏爱的。再说防抖与节流。别看这两个函数被写烂了真正能在笔试中一次写对的人不多。以一个简易防抖为例function debounce(fn, delay 300) { let timer null; return function (...args) { const context this; clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); }, delay); }; }关键点有三个每次调用都要清除上一次的定时器、必须用apply保留this指向、返回值要作为新函数返回。节流也一样常见的实现方式是时间戳或定时器更需要关注的是“第一次触发是否立即执行”“最后一次触发是否补执行”这两个边界。如果笔试时间够我建议把这两种版本立即执行版和尾执行版都背下来面试时能说出来龙去脉会明显比只写一个通用版本更有竞争力。3. 实操过程与核心环节实现3.1 拿到一套笔试题后先做什么很多同学拿到试卷就急着从头做到尾这个习惯在面试场合很吃亏。我自己在面人的时候最怕看到“前面选择题磨叽太久最后一整道编程题空白”的答卷。正确的做法是先花2-3分钟快速扫一遍全部题目对题型和分值做心理预估优先把会做的、分值大的题目做稳再回头啃难题。以用友这套题四来模拟一般结构是单选/多选、简答、编程、以及一到两道场景设计题。建议分配时间是这样的选择题控制在总时间的30%以内简答题不要长篇大论按“定义原理用途/例子”的结构写三到五行把最核心的得分点放在第一句。编程题是最大的分水岭一定要留足40%的时间即使写不出完整代码也要把思路、伪代码、边界条件写清楚。要知道面试官看卷子时最在意的不是完美答案而是“这个人遇到问题时的抵达过程”。一个写了一半但思路正确、注释清晰的人比一个留白的人要强太多。3.2 一道典型编程题的全过程拆解我挑一道当年这套题中很典型的手写实现题展开讲讲我的完整作答过程——“实现一个简单的深拷贝”。第一步不要急着写代码先在草稿区列清需求边界要拷贝的对象可能包含数组、普通对象、函数、Date、RegExp、循环引用等特殊情况代码要能尽量兼容。第二步设计主逻辑。可以用递归判断类型基本类型直接返回引用类型判断是数组还是对象并创建对应容器。如果是Date、RegExp这类特殊对象要有独立的分支处理。循环引用可以用WeakMap或Map来记录已拷贝过的对象避免栈溢出。第三步写出一版相对完整的代码。参考实现如下function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) { return target; } if (target instanceof Date) { return new Date(target.getTime()); } if (target instanceof RegExp) { return new RegExp(target.source, target.flags); } if (map.has(target)) { return map.get(target); } const cloneTarget Array.isArray(target) ? [] : {}; map.set(target, cloneTarget); Reflect.ownKeys(target).forEach((key) { cloneTarget[key] deepClone(target[key], map); }); return cloneTarget; }这里要注意几个细节用Reflect.ownKeys()可以同时遍历字符串属性和Symbol属性用WeakMap做记录既能解决循环引用又不会像Map那样强引用导致内存泄漏。写完后还要留一句注释说明“生产环境可使用lodash的cloneDeep”既展示了原理功底又体现了工程意识这对面试官来说是非常加分的。3.3 简答题的“金字塔”回答结构简答题最怕写“作文”洋洋洒洒一大堆却抓不住重点。我推荐一种金字塔回答结构结论先行原因其次例子垫后。这样即便面试官没有时间读完所有内容也能一眼抓到你最核心的认知。举个试题中可能出现的例子“简述浏览器事件代理事件委托的原理。”我的回答逻辑是第一句给结论事件代理是利用事件冒泡机制将子元素的事件处理函数绑定到父元素上统一处理第二句说原理当子元素触发事件后事件会沿着DOM树向上冒泡到父元素父元素通过event.target判断实际触发元素第三句举使用场景列表中有大量相同按钮时使用事件代理可以避免给每个按钮绑定监听器减少内存占用同时新添加的子元素无需重新绑定事件第四句点注意事项有些事件例如focus/blur不冒泡不适合直接用事件代理可以用捕获阶段或focusin/focusout处理。这样四句话信息密度高逻辑清晰就算遇到追问也有足够的展开空间。3.4 面对“超纲题”的临场应对笔试时最崩溃的一刻不是遇到不会的题而是遇到“这个名词我压根没听过”的题。我在多年面试经验里总结出的一个原则是绝对不空题绝对不假装会。空题意味着零分假装会则可能被追问后彻底暴露。正确策略是把题目改写成自己掌握的知识。举例如果题目问“请解释CSS中的BFC”你即使一时回忆不起全称“Block Formatting Context”也可以先写出“块级格式化上下文”再列出触发条件overflow不为visible、float、position为absolute/fixed、display为inline-block等最后说它的作用是隔离布局、避免margin重叠、阻止元素被浮动元素覆盖。哪怕只写出两三条也比完全不写强。再比如问“谈一谈virtual DOM”你可以从“新旧vnode的diff对比”“为什么需要key”“批量更新”等任意一个角度切入只要展示出真实的思考链条即可。4. 常见问题与排查技巧实录4.1 高频“翻车”点基础理论张冠李戴改过很多份应聘者的笔试卷我发现大家翻车最集中的地方其实是“基础理论张冠李戴”。最典型的是把重排和重绘混为一谈、把深拷贝和浅拷贝的引用关系描述错误、把强缓存和协商缓存的触发时机说反、把map和forEach的区别讲不清楚。这里我建议做一张容易混淆概念的速查表考前快速过一遍易混淆概念核心区别重排 vs 重绘重排涉及布局计算重绘只涉及像素刷新重排一定导致重绘重绘不一定导致重排深拷贝 vs 浅拷贝浅拷贝只复制对象第一层引用嵌套对象仍然共享深拷贝递归复制所有层级函数声明 vs 函数表达式函数声明会提升整个函数体表达式只提升变量声明函数体按赋值顺序生效target vs currentTargettarget是事件实际触发的元素currentTarget是当前绑定事件的元素宏任务 vs 微任务微任务在本次宏任务执行完立即执行优先级高于下一个宏任务自己动手整理这张表本身就是一次记忆强化比考前刷十道题还管用。4.2 手写代码常见的三个隐藏坑手写题的隐藏坑比很多人想象的多得多。第一个坑是不检查异常参数。比如手写数组扁平化时没考虑空数组或手写节流时没处理fn不是函数的情况健壮性差。第二个坑是没考虑this指向。尤其是对象的解构赋值后调用方法this会丢失回调函数里使用普通函数更是重灾区。第三个坑是忽略返回值。比如手写debounce时有些版本内部没有return一个包装函数导致调用后不执行。这些细节一眼就能看出写代码的习惯所以写完一定养成“自测”的习惯——在脑子里跑一遍典型的输入输出或用几分钟在草稿纸上写几个console.log验证。4.3 时间不够时如何保住基础分笔试时间永远是不够用的所以必须学会“战略性放弃”。我的经验是如果做完选择题和简单题后只剩下10分钟就不要纠结编程题能不能全对了。此时应该做两件事——第一把当前已经写了一半的代码快速补上注释和基本结构因为即使运行不通过面试官也能从中看到你的思路第二在代码下方用两行话写清楚你的思路和坚持要使用的数据结构比如“我的思路是先排序、再双指针去重”这样阅卷时至少能拿到思路分。永远不要留白这是我反复强调的。4.4 考后的复盘方法从做题到建立知识地图考试结束后比起对答案更重要的是复盘。我通常建议求职者用半天时间做三件事先把错题按“完全不会”“知道但记不清”“看错题”“时间不够”四类分类再针对前两类找到对应知识点的权威文档MDN、官方文档、源码解析重读一遍并写摘要最后把知识点汇总成一张自己的思维导图或笔记标注哪些知识点之间有联系。举个例子如果你在做题时发现“事件循环”掌握不好那么复盘时不仅要看宏任务和微任务的基本规则还应该延伸到async/await、Promise、requestAnimationFrame、Node.js中的process.nextTick等上下游知识点把它们串成一条线。这样一来一道旧题就不再是一个孤立的知识点而是成为了你知识网络上的一个重要节点下次再被问到你能从容展开。5. 后续可以怎么迭代这套真题的价值这份用友2017年web前端试题四放到今天最有价值的用法不是背题而是当“体检报告”。我建议你按上面的模块做一遍然后统计自己在哪个部分失分最严重。如果JavaScript基础失分多就把重心放回闭包、原型链、异步如果浏览器原理失分多就系统补一遍Chrome DevTools的Performance面板和Network面板实操如果工程化失分多就亲手把webpack从零配置一遍把Loader和Plugin的差异用到熟练。从更长期的角度看我建议你建立一份属于自己的“面试考点清单”每个季度更新一次。这样不管技术栈怎么变、面试形式怎么换你都能保持稳定输出。我在实际带团队时发现那些能定期用旧题反哺自己知识体系的工程师往往也是成长速度最快的人。希望你也能从这份旧题里看到自己的短板也看到自己的潜力。