1. 试卷整体维度与考点分布1.1 题型与分值构成2020年奇安信秋招前端方向的这份试卷整体分为三大块单选/多选、简答题、编程题。单选的考察范围很广从HTML标签语义、CSS选择器优先级到JavaScript的类型转换、作用域、ES6新特性再到HTTP协议、浏览器渲染、前端缓存基本把校招候选人的知识面扫了一遍。简答题则重点放在网络协议、浏览器原理和前端安全这几个方向。编程题的数量不多但区分度很高核心考察的是手写代码能力和基础算法功底。我当时做完这份卷子的第一感受是题量不算特别大但是每道题都在尝试挖底层原理而不是停留在“API会不会用”的层面。比如它不会直接问“localStorage和sessionStorage有什么区别”而是会换成“在什么样的场景下两个标签页之间的数据无法通过localStorage共享为什么”这就要靠你对浏览器存储机制本身有理解。很多靠背题过日子的同学在这一步就明显撑不住了。1.2 为什么安全厂商的前端题会这样出奇安信是做安全的前端岗位的笔试题目自然带着一股安全味。这不是说它故意刁难人而是这类企业对代码质量、防御意识和底层原理的要求本身就比普通互联网公司更高。一个前端页面如果XSS漏洞一堆、敏感信息随意写进localStorage、接口鉴权逻辑形同虚设那不管交互做得再漂亮在安全公司眼里都是不合格的。所以这份试卷里出现大量与浏览器安全、网络协议、请求加密相关的内容完全不是偶然而是岗位定位决定的。前端工程师在这些公司里不是单纯的“页面仔”你写的每一行代码都可能运行在政企客户的浏览器里面对的是真实世界里随时可能发生的攻击。理解了这一点复习方向就不该只盯着框架API和组件库用法而是要把计算机网络、浏览器工作原理这些“硬核基础”捡起来耐心啃掉。2. 基础层一上来就会被筛掉的那批题2.1 语言基础类型系统与作用域陷阱翻过一遍试卷JavaScript语言基础是单选和多选的大头而且陷阱埋得非常多。最典型的考点是类型转换、闭包、this指向、原型链和异步执行顺序。下面这几道题几乎是每次笔试都会出现的经典题值得展开说一下。先说类型转换。typeof null的结果是object[] false的结果是trueNaN不等于自身parseInt(123abc)返回123而Number(123abc)返回NaN。这些看起来是八股文但背后其实是一整套隐式转换规则。很多同学只记结论不记推导结果题目稍微一变就又错了。比如考“[1,2] [3,4]”的结果是什么答案是1,23,4因为数组先被toString成了1,2和3,4然后做了字符串拼接。这类题当年错的人一片一片的。再看作用域和this。下面这段代码在当年反复出现我建议你亲手跑一遍把输出顺序写出来for (var i 0; i 5; i) { setTimeout(function () { console.log(i); }, 100); }答案是连续打印5个5。考点有两个层面var没有块级作用域循环结束后i已经变成5setTimeout的回调在循环结束后才执行读到的就是最终的i。解决办法也很简单把var改成let或者利用立即执行函数形成闭包。这个考点背后是面试官想确认你是否真正理解“闭包捕获的是变量本身而不是变量的值”这一事实。关于this指向这类题更少人能一次说清。普通函数调用this指向window对象方法调用指向对象本身箭头函数没有自己的this继承定义时外层作用域的thisnew出来的实例this指向实例本身。再叠加setTimeout、事件监听、数组方法回调里的this变化就够拼出一套组合拳了。这里有一个很实用的记忆口诀this指向在函数定义时看不出来一定要在调用时确定箭头函数除外。2.2 浏览器与网络从URL输入到页面渲染奇安信这份试卷的简答题里“从输入一个URL到页面展示发生了什么”几乎是必考题。这道题考的不是背书能力而是你的知识能不能串成一条完整的链路。我当时整理的回答框架是这样的浏览器解析URL判断协议和合法性然后检查本地缓存强缓存阶段命中直接使用未命中进入下一步。DNS解析把域名解析成IP这个阶段会先查浏览器缓存、系统缓存、路由器缓存最后才去请求本地DNS服务器一路递归或迭代查到根域名服务器。建立TCP连接三次握手。如果协议是HTTPS还要再额外做TLS/SSL握手协商加密套件和密钥。发送HTTP请求服务端处理并返回响应浏览器收到后检查状态码按协商缓存规则判断是否能复用本地缓存。浏览器拿到HTML后开始解析构建DOM树同时解析CSS构建CSSOM树。JavaScript标签默认会阻塞解析所以遇到script标签会先下载并执行。把DOM树和CSSOM树结合生成渲染树注意display:none的节点不会出现在渲染树里visibility:hidden会。布局Layout阶段计算每个节点的几何位置然后进入绘制Paint阶段再把图层合成Composite显示到屏幕上。这道题能写到多深直接反映一个人在前端基础上的积累程度。多数人写到第3步就停了能完整写到第7步的已经算及格。如果能再补充一句“现代浏览器从HTML解析到首屏绘制还涉及预加载扫描器、流式解析、图层优化”那面试官基本就能确定你不是背题的了。关于缓存和状态码单选里也很常见。强缓存相关的头是Cache-Control现代和Expires老一代协商缓存相关的头是Last-Modified/If-Modified-Since和ETag/If-None-Match。304就是在协商缓存阶段判断资源未修改时返回的状态码。301是永久重定向302是临时重定向403是服务器拒绝请求503是服务器暂时不可用。有一道很经典的辨析题问304算成功吗答案是“语义上是重定向类但实际效果是命中缓存”很多同学在这道题上想太多选错了。2.3 CSS布局BFC、居中与响应式这份试卷里CSS的占比不算最高但考点非常集中块级格式化上下文BFC、垂直水平居中方案、Flex/Grid布局、CSS选择器优先级、盒模型。其中BFC是高频中的高频因为面试官可以用一道小题同时考你对布局机制、浮动的理解、以及实际调试能力。BFC的解释其实不难它是一块独立的渲染区域内部元素的布局不会影响外部元素。触发BFC的常见方式包括html根元素、float不是none、position是absolute或fixed、display是inline-block或flow-root、overflow不是visible。BFC能解决什么问题最经典的有三个清除浮动带来的父元素高度塌陷、防止垂直方向margin合并、阻止元素被浮动元素覆盖。举个例子父元素里只有一个浮动子元素时父元素的高度会塌陷成0。原因就是浮动元素脱离了文档流父元素在计算高度时根本看不到它。解决办法之一是给父元素加overflow: hidden触发BFC让BFC把浮动子元素的高度也算进来。这个方案在面试里写出来通常比用clearfix伪元素更能显示你对BFC的理解。垂直水平居中同样是高频。我一般建议用一个“方案矩阵”去记忆文本居中用text-align和line-height不定宽高的块级元素用Flex布局align-items: center justify-content: center或者用Grid布局的place-items: center已知宽高的用绝对定位加负margin未知宽高的用绝对定位加transform: translate(-50%, -50%)。每次都能全部写对的人不多不是不知道Flex方案而是容易漏掉“父元素需要先设置宽度和高度”这个前提。3. 应用层手写题与代码题才是分水岭3.1 高频手写防抖、节流、深拷贝、Promise.all笔试进入编程题阶段难度瞬间抬高。奇安信这份卷子的编程题基本围绕手写代码展开考察的都是实际开发中经常用到的“基础功”。第一梯队是防抖和节流看起来只差几个字实现思路却是完全不同的。防抖的核心思想是事件触发后设定一个计时器等待一段时间后再执行回调如果等待期间再次触发就重置计时器。典型场景是搜索框输入用户停止输入500ms后才发请求。节流的核心思想是不管触发多频繁在一段时间内只执行一次。典型场景是滚动监听、resize事件。我在试卷上写的是最简版本但还是建议你把它默写完整包括处理this指向和参数传递function debounce(fn, delay 300) { let timer null; return function (...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; } function throttle(fn, interval 300) { let lastTime 0; return function (...args) { const now Date.now(); if (now - lastTime interval) { lastTime now; fn.apply(this, args); } }; }然后是手写深拷贝。直接写JSON.parse(JSON.stringify(obj))只能拿一半分因为面试官期望你答出它的局限性无法拷贝函数、Symbol、undefined、循环引用日期对象会变成字符串正则对象会变成空对象。一个合格的深拷贝实现至少要处理数组和普通对象能用WeakMap处理循环引用再考虑Date、RegExp等特殊对象。写出能用的版本其实不算难但要在半小时内写出考虑周全的版本没有平时积累根本来不及。再一个常考的是Promise.all。它的功能是接收一个Promise数组全部成功才resolve有一个失败就reject并且按传入顺序返回结果数组。手写实现的关键点有三个用计数器判断是否全部完成、用一个result数组按索引保存结果、注意传入参数可能包含非Promise值。这两个手写题放在一起能很快筛出“只会调API”和“真正理解异步原理”的人。3.2 算法题从字符串去重到滑动窗口校招笔试题里算法题不会特别难但它的风格很统一不是让你背LeetCode原题而是把常见算法思想放到前端场景里。奇安信这份卷子出现过的算法题类型大致能归为几类数组去重、字符串处理、树的遍历、简单的动态规划。数组去重是个经典的“多解法”题一题就能看出你的知识广度。最基础的是Set去重一行代码解决进阶一点用Map记录出现次数适合需要统计频次的场景再进阶原地去重用双指针空间复杂度降到O(1)。如果你能在Set方案之外主动说出“如果数据量很大Set的存址方式是哈希查找O(1)但是空间换时间如果要求不改变原数组相对顺序可以用indexOf循环”这道题就聊活了。字符串类问题里有个高频题目给定一个字符串找出不含重复字符的最长子串长度。这是典型的滑动窗口题left指针和right指针共同维护一个窗口用Set或者Map记录窗口内字符right向右扩张遇到重复字符时移动left收缩。代码不复杂但考察的是你有没有建立“窗口思维”。我当时面试的时候面试官还追问了一句“窗口内无重复字符这个约束条件换成最多允许2个重复字符你怎么改”这就需要真正理解滑动窗口的移动逻辑而不是背模板。树的题目也很喜欢放到前端卷里最常见的场景是“扁平数组转树形结构”。这道题在很多公司出现过而且前端有天然的应用场景比如后台管理系统的菜单结构、多级评论列表、分类树。核心思路是两次遍历第一遍建立id到节点的映射第二遍把每个节点的子节点挂到对应的parent下面。如果能主动提到“数据量极大时可以先排序再建树减少遍历次数”“需要注意根节点可能有多个要返回一个数组而不是一个对象”这道题基本就是满分答案了。3.3 工程化与框架原理Vue/React选择题背后的知识近几年的校招前端卷不管是什么公司都会考框架题。奇安信2020年的卷子里Vue和React的题目都有涉及而且偏向原理层面。比如Vue中data为什么必须是函数、computed和watch的区别、v-for里key的作用React中setState是同步还是异步、虚拟DOM和diff算法、函数组件和类组件的区别。先说Vue的data为什么必须是函数。核心原因是一个组件可能被复用多次每一次复用都应该对应独立的data。如果data是一个对象那么多个组件实例会共享同一个引用一个实例改了数据其他实例也跟着变了这肯定不是我们想要的。写成函数每次执行都会返回一个全新的对象这样每个实例就拥有自己的数据。至于根组件为什么可以是对象是因为根组件只有一个实例不存在复用问题。这个题被问到的概率极高而且经常被伪装成选择题出现。再拆一下computed和watch。computed适合根据已有响应式数据派生新数据有缓存机制依赖不变不会重新计算watch适合执行异步操作或开销较大的操作监听的是数据变化本身。很多人背了定义但面试官追问一句“在computed里做异步请求可以吗”就答不上来了。答案是不推荐因为computed应该是纯计算在模板里同步使用异步请求容易产生副作用和不可预测的顺序问题。关于框架我建议不要只背API要看源码或者核心原理分析。比如Vue的响应式原理从Object.defineProperty到Proxy的历史演变computed的缓存机制依赖了什么dep和watcher之间怎么建立联系React的setState在react-dom中首次渲染和交互事件里执行时一个是同步推进、一个是批量延迟这些细节才是拉开差距的地方。这类原理题不是为了难为你而是判断你遇到线上疑难bug时能不能从框架底层找到突破口。4. 安全视角奇安信前端面试的隐藏加分项4.1 XSS与CSRF原理、绕过与防御前面说过安全厂商的前端卷会格外重视前端安全。两道必考简答题是什么是XSS、什么是CSRF如何防御。别小看这两道题很多人写得出XSS的全称却写不出完整的攻击链路和防御闭环。XSS全称跨站脚本攻击核心是攻击者把恶意脚本注入到页面中在用户浏览器里执行。最常见的分类是三种存储型恶意脚本被存到数据库每个访问用户都会中招、反射型恶意脚本通过URL参数反射回来诱导用户点击、DOM型脚本在DOM解析阶段直接执行不经过服务器。防御的核心是“过滤输入、转义输出”但更系统的做法是服务端对用户输入做白名单校验前端用textContent代替innerHTML需要对富文本做白名单过滤同时配置Content-Security-PolicyCSP限制脚本来源。考试时能把这三种类型各配一个例子写出来这道简答题基本就稳了。CSRF全称跨站请求伪造攻击者诱导用户在已登录的网站中执行非本意的操作。最经典的场景是用户在银行网站登录了攻击者构造一个隐藏的图片请求或者表单提交让浏览器自动带上用户的Cookie服务端以为是用户本人发的请求。防御方案主要靠三件套使用CSRF Token服务端签发前端请求时带上服务端校验、校验请求来源验证Referer或Origin头、设置SameSite Cookie属性限制跨站请求携带。这里要特别提醒一句很多同学把XSS和CSRF的防御方案写混比如用“过滤输入”去防CSRF那就是没理解两者的本质区别XSS攻击的核心是脚本执行CSRF攻击的核心是请求伪造。4.2 登录态、Token与加密传输安全公司的前端项目登录实现方式通常比一般公司要谨慎得多。试卷里可能出现这类问题登录功能如何设计才算安全Token存在哪里比较合理本地存储和SessionStorage的安全性是什么前端最容易被面试官抓住的细节是把Token放在localStorage里。localStorage的缺点是任何在浏览器执行的脚本不管是自己家的还是被注入的XSS脚本都能直接读取它。一旦出现XSS漏洞Token就形同虚设。更稳妥的做法是放在HttpOnly的Cookie里让脚本无法通过document.cookie访问降低XSS后的损失。试卷里的选择题在Token存储上反复挖坑核心就是考察你有没有安全意识。关于加密传输前端能做的有限但至少要能说清楚HTTPS是网络传输层的第一道防线前端不该再自己用JS做一套加密来“取代”HTTPS那是南辕北辙。前端可以做的是登录敏感字段的加密签名、接口防重放等。比如对请求参数做签名加入timestamp和nonce服务端校验时间戳和一次性随机数这样截获请求的人无法重新发送同一份请求来重复执行操作。这道题如果单独出现属于加分项答上来的人少之又少。4.3 安全配置类CSP、SameSite与安全响应头除了原理题试卷里偶尔会出现一批与“安全配置”相关的选择题考查你对HTTP安全头的敏感度。比如Content-Security-Policy、X-XSS-Protection、X-Frame-Options、SameSite这几个名词是什么意思。这些在普通公司的前端笔试题里并不常见但在安全公司是基本功。CSP的作用是告诉浏览器“这个页面允许加载哪些来源的资源”配置得当可以极大降低XSS风险。比如响应头写成Content-Security-Policy: default-src self那么页面里所有外部脚本、图片、样式都会被拦下来。X-Frame-Options: DENY用来禁止页面被iframe嵌套防止点击劫持。SameSite属性作用在Cookie上设置成Strict或Lax后跨站请求就不会自动携带Cookie对CSRF有天然防御效果。这类题不需要你会写很复杂的配置但得明确每一样东西解决的是什么问题不能张冠李戴。我当初复习到这里时顺手做了一张小表把每个安全头的作用、配置示例、防护对象整理了一遍。考前翻一翻比临时背题效率高很多。后来帮学弟学妹梳理时他们普遍反馈这类题“知道就是送分不知道就是送命”因为它们不是通过编程推理能猜出来的。5. 回顾与复盘易错点和新手避坑指南5.1 复习时容易踩的坑第一类坑是轻视基础、直奔框架。很多同学复习前端拿起Vue/React的文档就开始啃碰到题目里那些闭包、this、缓存细节直接全凭感觉选。结果选择题错了一半编程题写得磕磕绊绊。2020年的这份试卷告诉我们基础题的覆盖面极大JavaScript的语言陷阱、浏览器网络机制、CSS布局这些才是决定及格线的东西。框架题在笔试里占比并不高把基础吃透后框架题稍加准备就够了。第二类坑是背题而不溯因。刷题本身没问题但如果你只会“这道题选C”不去问“为什么选C其他三个选项错在哪里”刷一千道题收获也很有限。比如BFC那道题如果你只是记住了overflow: hidden能清除浮动但搞不清楚BFC内部的布局机制那么面试官换一个嵌套浮动的场景你就又会掉坑。我个人的经验是每道错题至少要做三次复盘——第一次看懂解析第二次不看解析自己推演一遍第三次默写一遍完整的相关知识点。三轮下来这个知识点基本不会忘。第三类坑是只看不写、眼高手低。手写题和算法题如果你只是在脑子里过一遍“哦这个其实我懂”真到考场上手写代码时十有八九会卡在边界条件、返回值、循环细节上。Promise.all、防抖节流、深拷贝这三道题我建议你在准备秋招时至少手写三遍以上直到不需要任何提示就能完整写出为止。5.2 从2020到2026前端面试考察重心的变化把这份2020年的试卷放在2026年的视角下看有些考点变了但更多的还是稳如泰山。JavaScript语言基础、浏览器原理、网络协议、XSS/CSRF这些内容几乎不随时间变化依然是前端面试的基本盘。这提醒我们基础的沉淀永远不会过时。变化比较大的地方也很明显。2020年的时候框架题还在问Vue2的Object.defineProperty、React的类组件生命周期发展到今天Vue3的Composition API、Proxy响应式、React Hooks的深度原理已经成为新的必考点。工程化相关的问题也在变多Vite、Monorepo、CI/CD、性能优化、微前端拆分这些2020年试卷里几乎没有的领域现在几乎是中大型公司的常规题目。另外两个新趋势值得关注一个是前端AI开发AI辅助编码工具已经在实际开发中普及面试中会考察你如何用AI工具提升开发效率甚至要求你现场使用另一个是复杂业务场景的工程化能力比如后台管理系统里面的字典管理、前端使用Web Worker上传大文件、数据大屏的性能和部署方案这些“实际业务里高频出现但学校不教”的题目越来越被招聘方看重。如果你只按2020年的试卷范围复习显然是不足够的。5.3 秋招复习路线建议结合奇安信这份试卷以及近几年前端面试趋势我给出的整套复习路线大致是四层递进。第一层是JavaScript核心类型转换、作用域与闭包、this指向、原型链、事件循环、ES6新特性。推荐把《JavaScript高级程序设计》部分章节吃透配合手写Promise、手写防抖节流、手写深拷贝来巩固。第二层是浏览器与网络输入URL到页面展示的完整链路、HTTP状态码、强缓存与协商缓存、跨域方案、WebSocket与SSE、渲染性能优化重排重绘、图层、懒加载、CDN。这一层对应的视频资料很多注意要从原理层面去理解而不是只背名词解释。第三层是框架原理Vue响应式原理、虚拟DOM与Diff算法、computed与watch实现原理、组件通信方案React Fiber架构、Hooks原理、状态管理方案选型至少选择一个框架读一遍核心源码分析类文章。第四层是工程化与安全前端构建流程、打包工具的优化手段、微前端方案、CI/CD基础XSS、CSRF、点击劫持、登录鉴权与Token安全管理。这层内容对应的大厂面试频率正在逐年上升不要觉得“只在前端页面里写代码就不需要懂”。整套复习下来的时间建议至少预留两个月每天保持两到三小时的专注学习其中至少一小时用于手写代码和刷题。我个人在准备秋招时的做法是每天从题库里挑3道基础选择题、1道简答题、1道手写题坚持六周。这个方法看似笨拙但非常有效尤其适合奇安信这类喜欢挖原理的公司。最后再分享一个我自己踩过的小坑面试前一定要去目标公司的官网和技术博客看一眼了解他们现在的产品方向和技术栈。奇安信这类企业如果你能在面试里主动提到“我对你们的安全组件前端这块的理解”哪怕理解得很粗浅面试官也会觉得你做了功课这个印象分比多背十道题都值。