交银金科前端笔试复盘：银行系前端岗考点与复习方向

每年秋招季前端岗的笔试都是筛人大关。尤其是“银行系”这三个字很容易让人觉得“应该比互联网大厂简单吧”但真到上机那一步很多人才发现自己连题型都没摸清。2023年交银金科秋招前端开发岗笔试就是一个很典型的样本考察范围广、基础题占比高、编程题不偏但绝不白给最关键的是——它和你在牛客上刷的互联网大厂题库完全是两套打法。这篇文章就围绕这次笔试做一次完整复盘拆题型、划考点、讲答题策略给接下来要投银行系金融科技公司、银行软件开发中心或者其他国企系前端岗位的朋友一个可参照的复习方向。1. 银行系金融科技公司前端笔试和互联网大厂到底差在哪1.1 岗位定位决定出题思路很多人一听说“交银金科”第一反应是“交通银行旗下的金融科技子公司”那就按银行的节奏准备呗背背八股文就行。实际上完全不是。银行系金融科技公司承担的是银行核心业务的数字化改造、网上银行、手机银行、内部管理系统、数据中台前端这些落地项目它的前端工程师既要懂业务又要保证系统的稳定性、安全性和兼容性。这就直接决定了笔试的出题思路——不追求炫技但覆盖面必须广核心基础必须扎实。前端在银行系系统里做的更多是表单密集型业务、流程引擎、数据可视化大屏、报表展示这类内容这套场景下最看重的是对 JavaScript 语言本身的理解是否透彻闭包、this、事件循环这些跑不掉对浏览器原理和网络协议的掌握是否成体系缓存、跨域、渲染机制常考对主流框架尤其是 Vue是否真的深入用过而不是只会调 API工程化基础是否过关构建工具、模块化、代码规范、Git 流程边界意识强不强写代码能不能考虑到异常情况1.2 三类公司出题风格对比我对比了互联网大厂、银行系金融科技公司和传统软件外包公司这三类前端笔试的出题差异差别非常明显先看这张表格对比维度互联网大厂银行系金融科技公司交银金科等传统软件外包公司考试平台牛客网、赛码网为主自研或第三方在线笔试平台自研问卷或线下笔试算法题占比高LC medium 以上中等偏应用和模拟低以简单逻辑题为主框架考点最新特性、源码级原理主流版本原理、应用场景设计基本用法、生命周期金融/业务知识基本不考少量多为场景题不考手写代码题多且难有但更重规范性和完整性少整体难度难、活、卷广、稳、细简单、基础对比下来就能发现一个关键结论银行系笔试想筛掉的不是“不会高级算法的人”而是“基础不牢、知识体系零散、写代码习惯差”的人。你如果只会刷题不重视对原理的理解反而容易在这种卷子上失分。1.3 信息差才是最要命的我在准备阶段也犯过一个典型错误拿着互联网大厂的面经和题库埋头复习结果发现考点重合度没那么高反而浪费了不少时间。银行系金融科技公司前端笔试真正的区分度在于“信息差”——很多人压根不知道它会考什么更不知道它考的深度在哪里。具体来说它的题量通常在 100 分钟左右完成 60 到 80 道题加上两三道编程题时间并不是非常宽裕。很多选择题考的是“基础中的基础”比如console.log(typeof null); // object console.log([] ![]); // true这题看似诡异其实就是在考隐式类型转换 console.log(0.1 0.2 0.3); // false浮点数精度这些题目看起来简单但正确率往往没有想象中高。因为真到了考场上时间压力和题目数量叠加在一起很容易让你在不该错的地方翻车。后面我就按照这次笔试的题型构成逐块拆一下考点和复习方向。2. 题型全景与考点分布选择题、简答题、编程题谁才是得分大头2.1 题型构成与题量估算先说说整体结构。交银金科这类银行系金融科技公司的前端笔试通常包含以下几类题型总时长一般 90 到 120 分钟题型题量单题分值参考预估占比单选题25 题左右1.5 到 2 分35% 左右多选题10 题左右2 到 3 分20% 左右判断题10 题左右1 分8% 左右简答题2 到 3 题5 到 10 分15% 左右编程题2 到 3 题10 到 20 分22% 左右从分值分布就能看出选择题是绝对的基本盘但编程题的权重也不低。千万不要只刷选择题编程题如果放弃太多总分会被拉开很大差距。2.2 选择题的考点分布结合这次考试和往届反馈选择题的考点分布大概是这样JavaScript 语言基础30% 左右包括变量提升、作用域、闭包、this 指向、原型链、事件循环、ES6 新特性、数组方法、隐式类型转换等HTML/CSS15% 左右包括盒模型、Flex 布局、Grid 布局、定位、BFC、事件冒泡与捕获、标签语义化、CSS 选择器优先级等浏览器与网络15% 左右包括浏览器渲染流程、HTTP 状态码、HTTP/HTTPS、TCP 三次握手、缓存机制、跨域方案、存储方式对比Vue/框架20% 左右Vue 2 / Vue 3 响应式原理、生命周期、组件通信、路由模式、Vuex/PiniaReact hooks 偶尔也会涉及工程化与代码规范10% 左右Webpack 构建流程、loader 和 plugin 的区别、模块化方案、Git 操作、ESLint 规则其他10% 左右包括编码转换、base64、安全XSS/CSRF、浏览器的本地存储、正则表达式、数据库基础等最容易被忽略的是最后那 10%。很多人复习时候根本没把“信息安全”和“编码转换”放进前端笔试的复习范围里结果考场上看到完全陌生的名词直接懵了。建议复习时至少知道 XSS 和 CSRF 的攻击原理与防御方式、UTF-8 和 UTF-16 的区别、base64 的用途这些在银行系场景里出现频率很高。2.3 简答题爱问什么简答题通常是两道到三道考的不是背诵能力而是表达能力和知识体系。结合本次笔试高频的简答题方向如下“从输入 URL 到页面渲染完成发生了什么”这题几乎必考。注意不要只回答“DNS 解析、TCP 连接、HTTP 请求、浏览器解析渲染”这种一句话版本。拿分的写法是把浏览器渲染链路中涉及的关键细节也补上DNS 解析可能涉及缓存TCP 三次握手、TLS 握手HTTPS 场景发送 HTTP 请求服务端返回响应浏览器拿到 HTML 后解析 HTML 生成 DOM 树解析 CSS 生成 CSSOM 树合成 Render 树布局Layout / Reflow绘制Paint和合成Composite如果能补充“CSS 会阻塞渲染”“script 标签会阻塞 DOM 解析”“async 和 defer 的区别”这些点说明你真的理解浏览器渲染机制分数会明显更高。“前端性能优化你会从哪些方面做”这题所有人都会写但大多数人的答案是列了一堆名词图片压缩、代码分割、懒加载、CDN 加速。这种答法缺乏层次感。建议分维度回答比如“网络层、构建层、运行时、体验层”每个维度举两三个具体手段并说明为什么有效。“请分析下面这段代码的输出顺序”这题本质是事件循环的变体通常会混合 setTimeout、Promise、async/await、requestAnimationFrame 这些 API。简答题只要写出正确输出顺序并简要说明宏任务和微任务的执行规则就能拿大部分分。2.4 编程题的总体难度评估编程题属于“不算特别难但拿满分不容易”的水平。常见的出题方向包括字符串与数组处理如字符串去重、数组扁平化、对象数组按字段排序业务逻辑模拟如实现一个简易的发布订阅、实现一个 LRU 缓存简单动态规划或贪心如最大子序和、爬楼梯、零钱兑换的简化版这类题目在 LeetCode 上大概是 easy 到 medium 之间的难度比大厂的 hard 题友好很多。但注意笔试平台通常要求从标准输入读取数据、将结果打印到标准输出这和你在 IDE 里直接调试函数的习惯不一样考前一定要提前熟悉牛客网或赛码网的 ACM 模式。3. JavaScript 语言基础闭包、this、事件循环和异步的复习重点3.1 作用域和闭包的高频考法for (var i 0; i 5; i) { setTimeout(function () { console.log(i); // 输出什么 }, 0); }答案是 5 个 5因为 var 声明的变量没有块级作用域循环结束后 i 已经变成 5五个定时器回调共享同一个变量。如果改成 let 声明输出 0 1 2 3 4。这题的背后是“作用域链 闭包 执行时机”三者的综合考察。闭包的考点还有很多变形比如防抖和节流就是闭包最典型的应用场景。手写一个防抖函数几乎是银行系前端笔试的保留题目function debounce(fn, delay 300) { let timer null; return function (...args) { const context this; if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); timer null; }, delay); }; }注意这里两个细节用...args收集参数、用apply绑定 this这两点往往就是扣分点。很多候选人能写出大致结构但不处理 this 和参数严格判题时会被扣掉一半分。3.2 this 指向与执行上下文this 的指向是选择题里频率极高的考点。做题时永远记住一个判断顺序函数是否被 new 调用是this 指向新创建的对象函数是否通过 call / apply / bind 调用是this 指向绑定的对象函数是否作为某个对象的方法调用是this 指向那个对象默认情况下浏览器中 this 指向 window严格模式下是 undefined箭头函数没有自己的 this它继承定义时所在作用域的 this举个实际考题的例子const obj { name: user, getName: function () { return this.name; }, }; const fn obj.getName; console.log(fn()); // 输出什么还是 undefined答案是 undefined非严格模式下访问 window.name因为fn被单独赋值后调用时 this 已经和 obj 无关了。这题就是典型的“隐式绑定丢失”。3.3 事件循环、宏任务与微任务事件循环的代码输出题在选择题和简答题里都出现过。核心规则一句话就能说清同步代码先执行遇到微任务排到微任务队列遇到宏任务排到宏任务队列当前宏任务执行完毕后清空微任务队列再取下一个宏任务。常见的微任务包括 Promise.then、MutationObserver、queueMicrotask常见的宏任务包括 setTimeout、setInterval、I/O 操作。看一个经典输出题console.log(script start); setTimeout(() { console.log(timeout 1); }, 0); Promise.resolve() .then(() { console.log(promise 1); }) .then(() { console.log(promise 2); }); console.log(script end);输出顺序是script start、script end、promise 1、promise 2、timeout 1。注意 Promise 的 then 是微任务而且两个 then 会依次进入微任务队列在当前宏任务结束前全部执行完。大多数错误答案都出在“以为 promise 1 和 timeout 1 并列执行”或“两个 then 之间隔着宏任务”这两点上。3.4 Promise 和 async/await 的手写与改错async function test() { console.log(1); await Promise.resolve(); console.log(2); } test(); console.log(3);输出是 1、3、2。await会先执行表达式右侧的代码然后把后续代码放入微任务队列所以console.log(2)会在同步代码执行完之后再执行。如果把Promise.resolve()换成Promise.reject()后面的代码不会执行需要在函数里加 try/catch 处理。手写题里最常见的还有Promise.all的实现要求是输入一个 Promise 数组全部成功才返回结果数组任何一个失败就立即 reject。写的时候要注意使用 result 数组存储结果时赋值要按照索引位置不能使用 push。这涉及并发请求结果的顺序问题很多人在这个细节上踩坑。function promiseAll(promises) { return new Promise((resolve, reject) { const results []; let count 0; if (promises.length 0) { resolve(results); return; } promises.forEach((p, index) { Promise.resolve(p).then( (value) { results[index] value; count 1; if (count promises.length) { resolve(results); } }, (reason) { reject(reason); } ); }); }); }这张卷子对 JS 基础的考察覆盖面比我预期的更细从数据类型判断、深浅拷贝到数组方法的手写实现几乎每一块都可能出题。复习的时候建议把《JavaScript 高级程序设计》前八章和 ES6 相关章节整理成自己的笔记配合牛客网的前端题库做针对性刷题比漫无目的地刷 LeetCode 要高效得多。4. 框架与工程化考点Vue 原理、组件通信和构建工具的实际问法4.1 响应式原理、diff 算法和生命周期框架在银行系前端岗位里绝对是重头项目。交银金科的技术栈以 Vue 为主Vue 2 存量项目还有不少Vue 3 的项目也在陆续推进所以考纲非常明确Vue 2 的 Object.defineProperty 响应式原理、Vue 3 的 Proxy 响应式原理、虚拟 DOM diff、生命周期顺序这些都需要能说清楚。Vue 2 响应式原理的核心问题Object.defineProperty 只能劫持对象的属性所以新增属性和删除属性都无法触发响应式。Vue 为此提供了Vue.set/Vue.delete来处理。数组的响应式则是通过重写 push、pop、splice 等七个方法实现的。Vue 3 为什么用 ProxyProxy 可以代理整个对象新增、删除属性都能被拦截还能代理数组和 Map/Set 这类原生数据结构不需要像 Vue 2 那样额外 hack。理解清楚这一点之后再遇到“Vue 3 比 Vue 2 快在哪”这类简答题你就不会只背一个“用 Proxy 替代 defineProperty”的表面结论了。diff 算法很多人只会背“同层比较、双端比较、key 的作用”这几句话。但真正的考点是“为什么不建议用 index 作为 key”。用 index 作为 key 时如果数组头部插入一个元素后续所有节点的 key 都变了Vue 会认为每个节点都变了导致整列重新渲染还会引发一些组件复用时状态错乱的 bug。4.2 组件通信与状态管理组件通信也是高频考点。常见方案父传子props子传父自定义事件$emit跨层级provide/inject兄弟组件事件总线或状态管理任意组件Vuex / Pinia笔试的出题方式往往是给一个业务场景比如“A 组件中一个按钮点击后需要更新另一个兄弟组件里的数据你会怎么做”这种题没有标准答案但阅卷希望看到你对比不同方案的适用范围。比较稳妥的答法是先判断组件关系再选出最简洁的方案并说明为什么不用更复杂的方式。4.3 Webpack、Vite 与模块化构建工具方面最常出现在选择题里的是 Webpack 的 loader 和 plugin 区别。loader 是让 Webpack 能够处理非 JS 文件的转换器比如 babel-loader 将 ES6 转成 ES5plugin 则可以扩展 Webpack 本身的功能比如 HtmlWebpackPlugin 生成 HTML、MiniCssExtractPlugin 提取 CSS。两者最本质的区别loader 是在打包过程中对模块源码进行转换plugin 可以在打包生命周期中注入更多的操作。Vite 和 Webpack 的对比也经常出现Vite 开发环境下基于原生 ES Module 按需加载冷启动快、热更新精确Webpack 需要先构建完整的模块依赖图项目越大启动越慢。但生产环境下 Vite 底层打包依赖 Rollup各有适用场景。答题时需要客观全面地分析单纯说“Vite 比 Webpack 好”是不行的。模块化方面ES Moduleimport/export和 CommonJSrequire/module.exports的区别是送分题但需要准确记住几个差异点ESM 是静态分析、编译时确定依赖关系、支持 tree shakingCommonJS 是运行时加载、可动态 require、拷贝导出值。还有一点——ESM 中 import 命名的导出是实时绑定的但 CommonJS 的 require 拿到的是值的拷贝这个细节很多人会漏。4.4 代码规范与 Git 流程银行系公司对代码规范和协作流程很重视。笔试里经常会出现以下方向的选择题或判断题ESLint 的核心作用是什么Airbnb JavaScript 规范对引号、分号、缩进的基本要求Git 中 revert 和 reset 的区别如何用 git stash 临时保存工作区改动pre-commit 钩子运行的是什么命令这些题目并不难但如果你平时习惯一个人开发、没人 review 代码这些点很可能成为盲区。复习时建议了解常用 Git 命令的执行效果尤其是git merge和git rebase的区别、git reset --hard的风险这类高频场景题。5. 编程题与手写代码题考的不是算法题量而是边界意识5.1 编程题的常见类型与参考思路编程题通常包含两题第一题偏字符串和数组第二题偏逻辑设计。下面这些类型出现的频率非常高字符串处理反转字符串、括号匹配、按字符出现次数排序数组操作数组去重、扁平化、求交集、旋转数组、移动零业务模拟实现一个简易 LRU 缓存、实现一个统计函数执行次数的工具、实现一个限制并发数的调度器简单算法爬楼梯、最大子序和、无重复字符的最长子串以“无重复字符的最长子串”为例这题用滑动窗口解决属于 LeetCode medium 难度但放到这张卷子里已经算是压轴题了。如果能在 15 分钟内写出正确解并跑通测试用例编程题部分基本能拿到中上分数。值得强调的是笔试平台往往不提供完善的调试环境也不像 LeetCode 那样有现成的函数签名。你需要自己处理输入输出const readline require(readline); const rl readline.createInterface({ input: process.stdin, output: process.stdout, }); rl.on(line, (line) { const nums line.split( ).map(Number); // 处理逻辑 console.log(result); });如果不熟悉这种输入输出写法即使是简单的题目也会在输入格式上卡住所以建议提前拿真题网站练几道 ACM 模式的题目。5.2 手写代码题的典型题目手写代码题通常要求你直接写函数输出到指定文件或在编辑器里补全函数。常见题目深拷贝要求支持对象、数组、日期、正则等类型还要处理循环引用。注意JSON.parse(JSON.stringify(obj))的错误包括丢失 undefined、Function、Symbol以及 Date 会被转成字符串不能作为通用深拷贝方案。防抖节流上面已经写过防抖节流的区别是“固定时间间隔内最多执行一次”。数组去重最推荐 Set 方案但要追问“如果数组包含对象如何按某个字段去重”这类变体。发布订阅实现一个简单的 EventEmitter包含 on、emit、off 方法并考虑一个事件注册多个回调函数的情况。class EventBus { constructor() { this.events new Map(); } on(eventName, listener) { if (!this.events.has(eventName)) { this.events.set(eventName, []); } this.events.get(eventName).push(listener); } emit(eventName, ...args) { if (!this.events.has(eventName)) return; this.events.get(eventName).forEach((listener) listener(...args)); } off(eventName, listener) { if (!this.events.has(eventName)) return; const listeners this.events.get(eventName); const index listeners.indexOf(listener); if (index ! -1) listeners.splice(index, 1); } }发布订阅的手写题能同时考察类的基本语法、状态管理、数组高阶方法、边界判断非常适合作为银行系笔试的考察点。5.3 判题时的隐性评分标准编程题不是“输出正确就行”笔试平台和阅卷系统通常会从以下几个维度评分功能正确性核心用例能否跑通边界条件空数组、单个元素、非法输入是否都处理了时间复杂度是否存在明显的性能问题变量命名和代码规范是否有语义化的函数名、是否有关键注释代码健壮性是否考虑了 undefined 或 null 的情况举个例子如果题目要求对数组求和最简单的暴力解法可以拿基础分但如果你能顺手处理空数组的情况并且拒绝非数字输入印象分会更好。代码规范和边界意识是银行系公司尤其看重的因为他们的前端代码往往要维护很多年清晰比聪明更重要。6. 笔试环境、时间分配与容易翻车的细节6.1 环境检查与设备准备交银金科这类银行系公司通常使用双机位在线笔试系统需要两个摄像头一个对准正脸一个从侧后方拍摄手部和屏幕。提前告诉你能想到的细节电脑必须使用 Chrome 或 Edge 最新版本尽量别用 Safari很多在线笔试系统在 Safari 上兼容性不好网络一定要稳定别用延时高的公共 WiFi建议手机热点和宽带网络双线准备一旦断网还能切身份证或学生证放在旁边开考前需要拍照核验身份桌面清空只留笔和草稿纸提前 30 分钟进入考场页面试试摄像头和麦克风很多人会忽视的是浏览器弹窗拦截问题。有的在线编程题需要在网页里打开一个代码编辑器窗口如果浏览器默认拦截弹窗可能无法正常进入题目页。6.2 时间分配策略整场笔试大约 120 分钟我的推荐节奏是时间段任务说明前 10 分钟快速扫一遍所有题目先看编程题做到心里有数第 11 到 65 分钟完成单选、多选、判断平均每题不超过 1 分钟不会的先标记跳过第 66 到 90 分钟完成简答题条理清晰、分点作答最重要第 91 到 115 分钟集中攻克编程题先写能拿分的部分再优化边界情况最后 5 分钟检查已选答案重点检查多选题和判断题多选题是一个大坑。单选不确定的时候还能蒙一个多选题不确定就非常危险选多了要扣分选少了也不一定给分有些平台全错不得分部分正确给一半分。所以多选题的策略是“确定的选项才选拿不准的宁愿不选”。6.3 常见失误与应对回头复盘这次笔试有几类失误出现的频率特别高建议提前注意没有仔细读题题目问“以下哪个是错误的”结果选成了正确的选项。建议把每个选项都看一遍再回到题干确认选“正确”还是“错误”在选择题上纠结太久一道 1.5 分的题耗了 5 分钟导致编程题时间严重不足。建议遇到完全没思路的题果断标记并跳过编程题不审题就写代码没有先确认输入格式、输出格式、是否要求函数体。建议先花 2 分钟把题目完整读两遍提交前不检查特别是编程题提交前再跑一遍简单的测试用例同时检查有没有多余的空格或换行字符串输入处理出错很多人在读入一行包含多个空格分隔的数字时忘记用 split 进行处理导致整个程序直接报错还有一个很实际的建议答题期间随时注意剩余时间的提示。一旦发现前面题目用时超过预期简答题可以适当简化描述每个要点写一二句话即可把时间留给编程题。相对而言编程题一分顶得上三四个选择题的分值投入产出比更高。7. 从笔试看面试哪些考点一定会被追问笔试不只是笔试它的成绩和你的答题过程会直接影响面试官在下一轮关注什么。笔试中暴露出来的薄弱项就是面试重点。比如编程题里你写出了正确解法但没有考虑边界条件面试官大概率会追问“如果数组长度为 0 怎么办”“如果输入的是负数呢”。这一问就是在考察你有没有真实的生产环境思维。项目经历会被深挖。很多候选人项目经历写的是“基于 Vue 3 实现的 XX 管理系统”面试官一定会追问数据量大的表格是怎么优化的表单校验做了哪些措施有没有用过虚拟滚动这些问题对应的是笔试阶段的基础题里不会展开聊但实际上线必须面对的问题。银行系技术面试还有一个特点问题都贴着业务场景。比如如果页面需要适配不同分辨率的显示器你会怎么实现多个渠道共用一套 H5 代码不同渠道有不同的 UI 样式怎么设计才合理后台管理系统的权限控制前端怎么做路由级和按钮级的权限拦截这类问题靠刷题是刷不出来的需要真的去理解业务、动手写过完整项目、并且思考过“为什么这样实现”。平时多做项目、多写技术复盘比临时背题有用得多。多准备一些提分项的细节。前端性能优化、工程化、自动化测试这些点面试官自己大概率也做过如果你能说出具体的性能监控指标FCP、LCP、CLS能清楚描述项目里 Webpack 配置优化过哪些插件能写简单的单元测试用例会明显拉开和其他候选人的差距。准备笔试的过程其实是自我梳理的过程自己到底哪些知识是真的懂、哪些只是听说过。这个过程中整理出的笔记和代码片段在面试阶段也能复用。先过了笔试这一关然后带着充分准备的状态走完面试银行系前端岗的完整招聘流程就会顺畅很多。