2017年那会儿我在一家做H5营销页的小公司写前端白天切图调bug晚上刷题库准备跳槽。有一天朋友甩给我一套盛趣游戏校招前端笔试试卷说“你试试这个”。我打印出来坐在出租屋里做了一晚上做到后面手写Promise实现的时候心里直发虚。后来我没去成盛趣但这套题我留了很久。再往后我帮团队出过几次校招面试题出着出着才发现那套卷子的出题思路其实特别典型。这篇文章就当一次复盘。我会把当年这套试卷背后对应的前端技术栈、常见题型、考察意图都拆开讲清楚顺便聊聊从2017到2026年前端面试题到底变了什么、什么一直没变。不管你是准备校招的应届生还是想系统补基础的在职前端这篇文章都能给你一个比较完整的参考坐标。1. 这份试卷出现的年代以及它为什么值得翻出来看1.1 2017年的前端正处在什么路口2017年对前端来说是个很微妙的年份。ES6语法已经大面积铺开const、let、箭头函数、模板字符串这类写法从“新特性”变成了“默认用法”Vue 2 和 React 正处于爆发期组件化思想开始成为团队协作的主流构建工具方面Webpack 已经取代了 Grunt 和 Gulp成为打包领域的事实标准。与此同时移动端H5的需求量非常大。无论是电商活动页、小游戏还是营销H5都需要前端去处理复杂交互、动画效果、性能优化。盛趣游戏当年的前端团队要应付的主要就是游戏官网、活动页面、玩家社区、数据后台这类业务。所以你去看2017年游戏公司的校招笔试卷子会明显感觉到它和纯互联网公司、电商公司的侧重点有点不一样——更看重动效实现、Canvas/WebGL基础、页面性能和跨端适配。理解了这个背景再看那份试卷很多题目就说得通了。它不是凭空出题而是顺着“一个游戏公司前端日常要干什么”来设计考点的。1.2 试卷整体结构与时间分配我记得那份卷子的题型大致是这样的第一部分是选择题大概10道左右覆盖HTML、CSS、JS基础、浏览器知识第二部分是简答题通常会问“什么是闭包”“浏览器输入URL后发生了什么”这类经典问题第三部分是手写代码题数组去重、排序、防抖节流、Promise相关都是常客第四部分是综合设计题给一个场景让候选人谈方案比如页面性能优化、组件拆分、跨域处理。整套卷子的时长一般在90分钟到120分钟。说实话这个时间是不宽裕的尤其手写代码部分如果平时没有“纸质编码”的练习习惯很容易在前面的选择题上磨太久导致后面大题写不完。现在回看这套结构其实挺合理选择题快速筛选基础是否牢固简答题考察理解深度手写代码题验证动手能力综合设计题看实际工程思维。四层递进对应的是一个前端工程师从“知道”到“理解”再到“能做”再到“会设计”的能力链路。2. 基础题大复盘HTML/CSS/JS到底在考什么2.1 HTML5与CSS3不只是标签和样式这份试卷里HTML和CSS的题目占比不低而且考得比较细。以当年的出题习惯至少会出现以下几类第一类HTML5语义化。题目会问“header、nav、article、section、aside这些标签有什么作用和div的区别是什么”。很多人会觉得语义化是老生常谈但出题人真正想听的不只是“让SEO更好”还包括无障碍访问、代码可读性、团队协作时结构更清晰。我在实际工作里发现一个页面如果语义化做得好后续维护的时候定位DOM结构的成本会低很多尤其是多人协作的大项目。第二类CSS3动画与Canvas。游戏公司对这个特别敏感。一道常见题是“使用CSS3实现一个翻转卡片效果”或者“简要说明Canvas和SVG的区别”。Canvas适合做像素级实时渲染比如小游戏、图表、粒子特效SVG适合做矢量图形和交互性较强的UI元素优点是可缩放、支持DOM事件。还经常考“实现水平垂直居中有几种方式”从flex到grid到absolutetransform至少要能说两三种。第三类盒模型与BFC。盒模型会问“标准盒模型和IE盒模型有什么区别box-sizing: border-box做了什么”BFC则会问“如何触发BFC、BFC解决了什么问题”。这两题的共同点是考察候选人是不是真的理解CSS布局背后的原理而不只是背属性。备考建议是不要死记硬背“CSS新特性清单”要能说清楚每一个特性解决什么场景下的什么问题。面试官问“CSS3有哪些新特性”如果只回答“圆角、阴影、渐变”这种话基本说明你把CSS当属性仓库而不是一门有逻辑的语言。2.2 JavaScript核心概念闭包、原型链、事件循环JS部分是整份试卷的重头戏比重接近一半。2017年的出题风格偏经典几乎离不开下面这几个关键词。闭包几乎是必考。常见问法是“讲讲你对闭包的理解闭包有什么优缺点实际开发中在哪里用到过”。我想说的是闭包的本质是“函数和它所在词法作用域的组合”它让函数可以访问外部作用域的变量同时让这些变量在函数执行完后不会被立即回收。优点是变量私有化、模拟模块化缺点是容易造成内存泄漏如果不小心持有大对象引用GC没法正常回收。实际开发中防抖节流、单例模式、React Hooks里useState的闭包陷阱都是闭包的实际应用场景。原型链也是一个绕不开的考点new到底做了什么、prototype和__proto__的区别、instanceof的原理。这些题目之所以长盛不衰是因为它直接反映候选人是否理解JS的对象机制。很多人日常开发用 class 写惯了没有细想过 class 本质是语法糖底层依然是原型委托。事件循环从2017年考到2026年还在考可见它的地位。核心问题是“宏任务和微任务的区别setTimeout、Promise、async/await的执行顺序”。这道题最恶心的地方在于看着简单但一涉及到async函数内部的同步执行、await后面的代码何时进入微任务队列、Promise.resolve的入队时机很多人就晕了。我的建议是不要背执行结果要顺着事件循环的流程去推演当前调用栈同步代码先执行然后处理微任务队列微任务清空后再取宏任务如此循环。除了这三座大山还有几个高频考点this指向问题普通函数、箭头函数、apply/call/bind的区别、数组的map/forEach/filter/reduce的异同、浅拷贝与深拷贝的原理。这些题目在今天的笔试里仍然是主力属于前端面试“八股文”里最核心的地基。2.3 浏览器与网络你为什么需要懂它们游戏公司做H5页面对加载性能极其敏感所以试卷里通常会穿插浏览器和网络相关的题目。常见的有“从输入URL到页面显示中间发生了什么”这道综合题几乎年年都有。完整的回答链路是DNS解析、建立TCP连接、发送HTTP请求、服务器响应、浏览器解析HTML构建DOM树、解析CSS构建CSSOM树、执行JS脚本、发生页面渲染、可能还有资源加载的并发策略。2017年的时候还不流行HTTP/2和TLS1.3的细节追问但如果你能提到浏览器的预加载扫描、关键渲染路径、async和defer的差异那肯定是加分项。“跨域有哪些方案”也经常出现。JSONP、CORS、代理转发、postMessage、document.domain降域、WebSocket这些方案要能说出适用场景。比如JSONP只能支持GET适合老项目里的紧急跨域需求CORS是目前的主流方案但要处理好预检请求开发环境一般用代理生产环境更多用Nginx反向代理。HTTP缓存这块要弄清楚强缓存和协商缓存Cache-Control的max-age、ETag、Last-Modified的优先级和触发条件。游戏活动的H5页图片、JS、CSS资源量都很大缓存策略设置得好不好直接影响首屏加载速度。这些问题看起来是“网络知识”但实际工作中前端天天在接触所以笔试出它一点都不意外。3. 编程题和综合设计题的破题思路3.1 手写代码题的常见原型与参考实现写代码的部分2017年那份卷子出过的题和现在面试题库里高频出现的题高度重合。我挑几个最典型的给出参考实现和解析。第一个是数组去重。这个题有无数种写法不同的写法对应不同的境界。最简单的const arr [1, 2, 1, 3, 2, 4]; const unique [...new Set(arr)]; console.log(unique); // [1, 2, 3, 4]但如果笔试只写这一行评分往往不会太高。因为出题人想看你对“去重”这个需求的理解数组里是什么类型要不要考虑对象要不要去NaN用双重循环去重时间复杂度是O(n²)数据量大的时候会有性能问题用对象存储键值去重要小心1和1被当成同一个键用Set虽然简洁但要注意它不能去除对象中的深层结构。如果能针对这些边界情况做说明哪怕代码没有写到完美面试官也会觉得你想问题比较全面。第二个是防抖和节流。这两个概念直到今天都是面试高频而且工作中确实常用。function debounce(fn, delay 300) { let timer null; return function (...args) { 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); } }; }注意这里我用到了fn.apply(this, args)为的是保留调用者上下文。很多人在笔试里不写this的传递虽然输出结果可能一致但稍微懂行的人一眼就能看出来你是背的模板。防抖适合输入搜索、窗口resize后触发节流适合滚动事件、按钮点击频率控制。第三个是深拷贝。2017年的时候JSON.parse(JSON.stringify(obj))还能糊弄过去但现在面试官基本都会追问“JSON序列化有什么坑”。答案是函数、undefined、Symbol、循环引用都会被丢失或报错Date会被转成字符串RegExp会变成空对象。所以现在的标准手写版本至少要处理基本类型、数组、普通对象能处理循环引用更好。function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) { return target; } if (map.has(target)) { return map.get(target); } const result Array.isArray(target) ? [] : {}; map.set(target, result); for (const key of Object.keys(target)) { result[key] deepClone(target[key], map); } return result; }这类题考察的其实是候选人对边界条件的敏感度。能写出基础版本的人很多能主动考虑循环引用和特殊对象的很少后者正是技术深度拉开差距的地方。3.2 综合设计题“如果一个页面很慢你怎么排查和优化”这份试卷最后通常会给一道开放性设计题。我记得比较有代表性的问法是“公司的游戏官网首页打开很慢你会从哪些角度去排查和优化”这道题没有标准答案但回答的广度和深度直接体现工程经验。比较完整的回答可以从这几层展开资源加载层检查图片体积是否用了WebP/懒加载JS/CSS是否压缩合并是否开启Gzip静态资源是否走CDN请求层有没有多余的请求接口能不能合并有没有不必要的重定向是否复用HTTP连接渲染层首屏有没有被过多的同步JS阻塞关键CSS是否内联DOM结构是否过深有没有触发大规模重排运行时层有没有内存泄漏长列表是否虚拟滚动图片解码是否消耗过多内存动画是使用transform/opacity还是触发了layout和paint。这个答题思路如果放在2017年能覆盖大部分考点放在2026年依然适用。因为优化的本质没有变变的只是工具和指标比如现在多了Lighthouse性能报告、Core Web Vitals、PWA离线缓存这些新维度但底层的思考框架是一样的。3.3 组件化设计题如何设计一个通用弹窗除了性能优化组件化设计题也很常见。比如“如果让你从零设计一个通用Modal弹窗组件你会考虑哪些问题”我建议按以下顺序回答API设计外部使用者需要传入哪些参数比如visible、title、content、onOk、onCancel插槽/具名分发允许调用方自定义底部按钮、自定义头部、甚至完全覆盖默认内容层级管理z-index如何避免冲突弹窗遮罩如何变体性能弹窗打开时是否懒渲染关闭后是否销毁DOM无障碍键盘Esc能否关闭焦点是否被正确管理样式覆盖提供主题变量而不是让使用者用!important去覆盖样式。这道题在2017年考的是基本功在2026年考的还是基本功而且现在组件库生态已经非常成熟面试官更希望听到“我对组件库设计有自己思考”的回答而不是“直接引antd/Vant”。4. 从2017到2026前端面试的变与不变4.1 哪些考点已经过时或者被替代第一类是IE兼容相关的东西。2017年还要考虑IE9甚至IE8的兼容写法比如addEventListener和attachEvent的判断、CSS hack、console.log兼容这些在今天已经没什么实际意义了。除非你专门做企业级老系统维护否则面试官也不太会专门抠这种题。第二类是jQuery相关。2017年很多笔试还会问“$(document).ready和window.onload的区别”“jQuery链式调用的原理”现在再问这个的公司大概率是还在维护老项目。不是说jQuery没价值而是它不再是一个新人的核心技能点。第三类是纯CSS布局的某些写法。比如“清除浮动有几种方式”在Flex和Grid成为标配之后这个问题的重要性下降了不少。不过话说回来你如果去面试一个对浏览器兼容性要求较高的团队浮动清除仍然有一定的面试价值只是不再占据主导地位。4.2 哪些考点依然是面试地基不管前端技术怎么迭代有几样东西几乎天天在考而且很可能继续考下去。事件循环和异步编程这是其一。从Callback到Promise到async/await语法一直在变但事件循环的机制始终没有变。到现在前端面试里关于“微任务、宏任务执行顺序”的题依然是高频因为它可以直接反映你对异步代码的控制力。闭包、原型链、作用域、this这些JS语言本身的特性也没有过时。虽然现在写代码大量依赖框架但这些基础决定了你在遇到复杂bug时有没有能力从原理层面去定位问题。尤其是React的闭包陷阱、Vue的响应式依赖采集想搞明白底层原理都绕不开JS基础。网络基础和浏览器工作原理也是常青树。HTTP缓存、跨域、渲染机制、DNS解析这些内容在2017年的试卷里有在2026年的最新面试题库里同样有。工程化工具再怎么变打开的浏览器底层的网络模型和渲染模型不会三天两头变。4.3 2026年的面试趋势正在新增什么如果现在出题会发现和2017年最大的不同是多了三个新方向。第一个是工程化和微前端。2017年还停留在“会用Webpack打包”的阶段现在会问“Webpack和Vite的核心区别”“模块联邦的原理”“微前端如何做沙箱隔离”“应用之间如何共享公共依赖”。这些问题的背后是团队规模的扩大和业务复杂度的上升一个前端不再是只管一个页面而是要管整个应用架构。第二个是性能监控和稳定性。以前说性能优化更多是“一次性优化”现在强调的是持续监控Sentry怎么接入错误上报怎么做性能指标如何采集白屏监测用什么方案前端告警怎么配置。这也是一套新的面试题目体系。第三个是AI工具链对开发方式的影响。2026年大量前端团队已经在日常工作中使用AI辅助编程面试中开始出现类似“你会如何在项目里使用AI工具”“如何让AI生成不跑偏的代码”的问题。这是一个非常大的增量当年根本没这个概念现在却成了真实工作的组成部分。5. 结合盛趣这类公司项目经验应该怎么准备5.1 游戏公司对前端技能树的特殊偏好如果你准备投递游戏公司前端岗位光刷通用笔试题是不够的。游戏公司前端的业务场景比较集中在游戏官网、活动专题、玩家中心、数据看板这几类因此技能树有明显的侧重点。第一动效和交互动画。游戏公司非常在意页面是否“炫酷”所以Canvas、WebGL、CSS3动画、SVG动画、动画性能优化都是加分项。你可以在项目经验里写清楚自己用Canvas做过什么、动画帧率如何优化、遇到GPU占用过高怎么处理这些都是游戏公司面试官爱听的。第二移动端适配。游戏玩家大多用手机访问活动页移动端适配经验一定要有。不只是rem和viewport的基本配置还要包括刘海屏适配、不同安卓机型的WebView兼容问题、移动端触摸事件的坑。可以单独准备一个自己踩过的移动端兼容case面试效果会很好。第三高性能渲染。如果做过大列表、长页面、实时数据展示一定要在项目里强调渲染性能方案虚拟列表、时间分片、Web Worker处理大数据、避免不必要的重排重绘。尤其是Web Worker2026年已经是一个常见考点如果你有实战经验会明显领先其他候选人。5.2 项目经验怎么写才不“虚”很多简历的问题是“项目经历写得像流水账”只写“我做了一个后台管理系统用了Vue和Element UI”这种描述对面试官来说毫无信息量。我建议用“三个关键词”来组织每个项目业务背景、技术难点、个人贡献。比如这样写“某游戏活动页上线后首屏加载需要3.5秒我通过拆包、图片懒加载、开启CDN缓存等手段将首屏时间优化到1.8秒活动页同时在线峰值2万人时未出现卡顿。”这种描述每一句都在给面试官提供追问素材也证明你真的干过活、思考过问题。另外如果你的项目经验里能体现“组件复用”和“规范化”会非常加分。比如“我封装了团队内部的上传组件和图表组件在5个业务页面中复用”这种话能从侧面证明你有工程化思维而不只是一个会写页面的人。5.3 笔试之外的临门一脚项目复盘能力面试官问项目最怕遇到说不清设计决策的候选人。比如你项目里用了Vuex被问到“为什么不用props逐层传”时很多人会愣住。其实答案不复杂逐层传参在层级深、状态共享多的情况下维护成本高Vuex提供中央状态管理方便跨组件通信和调试。但你要能说出这个逻辑而不是“因为大家都这么用”。所以建议在面试前把自己简历上的每一个项目都做一次“为什么”复盘为什么选这个框架、为什么这么设计数据结构、为什么用这种缓存策略、为什么选择同步而不是异步。一套复盘点准备下来你对项目的理解会比写简历时深一大截。这里我还想多说一句游戏公司面试官往往会很在意候选人对游戏业务本身有没有感觉。如果你能主动表现出“我平时有研究游戏网站的动效设计、关注活动页的传播逻辑、理解玩家数据看板的核心指标”即使代码能力稍弱一点也会比一个只会写后台表格的前端更有优势。6. 实战答题策略和避坑清单6.1 答题顺序与时间分配笔试的时间管理非常关键。我的习惯是拿到卷子先别急着动笔花两分钟把整张卷子扫一遍圈出几道大题心里预估一下每道题需要的时间。选择题和简答题的总时长不要超过一半。手写代码题即使不能完整写出来也要写出关键思路和框架千万别留白。设计题尽可能多写方向因为它是按采分点评分的写得越全面越稳。如果一道题卡了超过五分钟还没思路果断先跳过去做完后面的再回头补。实践证明很多人在写完编程题之后回头再看最初卡住的选择题往往能突然顿悟——因为后面的大题已经在帮你把相关知识激活了。6.2 常见失误和避坑第一个常见的坑是“只会背题不理解原理”。很多候选人能说出flex: 1的语法但被问到“flex: 1实际等于哪三个属性”就答不上来能说出new一个对象时会执行什么但一追问“原型链的终点是什么”就卡壳。背题或许能过初筛但走不长远。第二个坑是“手写代码时过于依赖IDE”。笔试通常是纸笔或在线编辑器没有自动提示没有lint工具。平时复习时至少要把常用的手写题防抖节流、深拷贝、数组去重、Promise.all在纯编辑器里打几遍模拟笔试环境更别忽略格式缩进和命名规范这些细节也会被考察。第三个坑是“只写代码不写注释”。如果在手写代码题里能顺手写上一两句核心思路的注释比如“这里用WeakMap处理循环引用”评分会明显高于一个只有代码没有说明的答案。因为笔试不仅看输出还看思维过程。6.3 笔试结束后的下一步面试追问的准备笔试不是终点它只是面试的敲门砖。很多公司会根据笔试卷子里你答错的题来出面试题所以考完之后一定要及时复盘自己的答案尤其要关注那些“会做但没做对”的题目弄明白正确解法。面试追问通常围绕笔试题展开比如你写了一种数组去重的实现面试官会立刻追问“有没有性能更好的写法”“如果数组里有对象怎么办”。这说明笔试和面试是一套联动的考察体系准备笔试就是在准备面试。我个人建议把每一道真题都做成“一题多解”的练习每个算法题至少准备两种实现每个方案题至少准备两个不同角度的回答。这样在面试被追问的时候才会游刃有余。7. 如果你现在才开始准备应该从哪里入手7.1 先搭体系再刷题很多准备校招的同学上来就刷LeetCode、刷前端八股文刷了两个月感觉自己什么都会一点但一到笔试又什么都想不起来。这个问题的根源在于知识体系没有搭好。我建议的顺序是先把JavaScript核心语法过一遍变量提升、作用域、闭包、原型链、this、异步再系统整理CSS布局和HTML基础然后学框架的核心原理和生命周期最后看工程化、网络、性能优化。每一步都配合一个对应的真题练习而不是单纯地“学过”和“刷过”。7.2 用“输出”检验学习效果检验自己是否真的理解一个知识点最好的办法是能不能用大白话给别人讲出来。比如你能不能说清楚“为什么Vue的响应式数据要用Proxy而不是Object.defineProperty”“为什么微前端要用沙箱”“为什么跨域要分预检请求”。我认识一个面试表现特别好的同学他的准备方法很简单每学一个知识点就在自己的笔记里写一段“如果我是面试官我会怎么考这个点”然后自己模拟回答。这个方法看似笨但效果出奇地好因为它在强迫你把输入转化为输出而不是躺在“我大概懂了”的舒适区里。7.3 真题之外的扩展阅读笔试的题目永远是有限的但面试官的追问可以是无限的。想在追问环节稳住建议在准备基础题之外每类题目多延展一步说到缓存去了解一下启发式缓存和Vary头说到事件循环去了解一下queueMicrotask和浏览器与Node事件循环的区别说到组件设计去了解一下Web Components和Shadow DOM。这些扩展不要求面面俱到但至少要做到“被提问时不会一脸懵”。你多准备的那一分可能就是面试官心里给你“加分”的那一分。我把这套2017年的试卷复盘到这里其实想表达的最核心的一点是面试题会变但考察底层能力的方向不会变。当年刷这套题的时候我总觉得出题人是在故意刁难人后来自己站到面试官的位置上才明白那些题目背后全是对日常工作的抽象和提炼。如果你现在正在准备校招或跳槽与其焦虑题型变化不如把一个个经典考点吃透再用自己的项目经验去证明你真的能落地。这样到了考场上你会发现那些题其实没那么可怕。 从2017到2026：前端校招笔试题型复盘与考点解析
2017年那会儿我在一家做H5营销页的小公司写前端白天切图调bug晚上刷题库准备跳槽。有一天朋友甩给我一套盛趣游戏校招前端笔试试卷说“你试试这个”。我打印出来坐在出租屋里做了一晚上做到后面手写Promise实现的时候心里直发虚。后来我没去成盛趣但这套题我留了很久。再往后我帮团队出过几次校招面试题出着出着才发现那套卷子的出题思路其实特别典型。这篇文章就当一次复盘。我会把当年这套试卷背后对应的前端技术栈、常见题型、考察意图都拆开讲清楚顺便聊聊从2017到2026年前端面试题到底变了什么、什么一直没变。不管你是准备校招的应届生还是想系统补基础的在职前端这篇文章都能给你一个比较完整的参考坐标。1. 这份试卷出现的年代以及它为什么值得翻出来看1.1 2017年的前端正处在什么路口2017年对前端来说是个很微妙的年份。ES6语法已经大面积铺开const、let、箭头函数、模板字符串这类写法从“新特性”变成了“默认用法”Vue 2 和 React 正处于爆发期组件化思想开始成为团队协作的主流构建工具方面Webpack 已经取代了 Grunt 和 Gulp成为打包领域的事实标准。与此同时移动端H5的需求量非常大。无论是电商活动页、小游戏还是营销H5都需要前端去处理复杂交互、动画效果、性能优化。盛趣游戏当年的前端团队要应付的主要就是游戏官网、活动页面、玩家社区、数据后台这类业务。所以你去看2017年游戏公司的校招笔试卷子会明显感觉到它和纯互联网公司、电商公司的侧重点有点不一样——更看重动效实现、Canvas/WebGL基础、页面性能和跨端适配。理解了这个背景再看那份试卷很多题目就说得通了。它不是凭空出题而是顺着“一个游戏公司前端日常要干什么”来设计考点的。1.2 试卷整体结构与时间分配我记得那份卷子的题型大致是这样的第一部分是选择题大概10道左右覆盖HTML、CSS、JS基础、浏览器知识第二部分是简答题通常会问“什么是闭包”“浏览器输入URL后发生了什么”这类经典问题第三部分是手写代码题数组去重、排序、防抖节流、Promise相关都是常客第四部分是综合设计题给一个场景让候选人谈方案比如页面性能优化、组件拆分、跨域处理。整套卷子的时长一般在90分钟到120分钟。说实话这个时间是不宽裕的尤其手写代码部分如果平时没有“纸质编码”的练习习惯很容易在前面的选择题上磨太久导致后面大题写不完。现在回看这套结构其实挺合理选择题快速筛选基础是否牢固简答题考察理解深度手写代码题验证动手能力综合设计题看实际工程思维。四层递进对应的是一个前端工程师从“知道”到“理解”再到“能做”再到“会设计”的能力链路。2. 基础题大复盘HTML/CSS/JS到底在考什么2.1 HTML5与CSS3不只是标签和样式这份试卷里HTML和CSS的题目占比不低而且考得比较细。以当年的出题习惯至少会出现以下几类第一类HTML5语义化。题目会问“header、nav、article、section、aside这些标签有什么作用和div的区别是什么”。很多人会觉得语义化是老生常谈但出题人真正想听的不只是“让SEO更好”还包括无障碍访问、代码可读性、团队协作时结构更清晰。我在实际工作里发现一个页面如果语义化做得好后续维护的时候定位DOM结构的成本会低很多尤其是多人协作的大项目。第二类CSS3动画与Canvas。游戏公司对这个特别敏感。一道常见题是“使用CSS3实现一个翻转卡片效果”或者“简要说明Canvas和SVG的区别”。Canvas适合做像素级实时渲染比如小游戏、图表、粒子特效SVG适合做矢量图形和交互性较强的UI元素优点是可缩放、支持DOM事件。还经常考“实现水平垂直居中有几种方式”从flex到grid到absolutetransform至少要能说两三种。第三类盒模型与BFC。盒模型会问“标准盒模型和IE盒模型有什么区别box-sizing: border-box做了什么”BFC则会问“如何触发BFC、BFC解决了什么问题”。这两题的共同点是考察候选人是不是真的理解CSS布局背后的原理而不只是背属性。备考建议是不要死记硬背“CSS新特性清单”要能说清楚每一个特性解决什么场景下的什么问题。面试官问“CSS3有哪些新特性”如果只回答“圆角、阴影、渐变”这种话基本说明你把CSS当属性仓库而不是一门有逻辑的语言。2.2 JavaScript核心概念闭包、原型链、事件循环JS部分是整份试卷的重头戏比重接近一半。2017年的出题风格偏经典几乎离不开下面这几个关键词。闭包几乎是必考。常见问法是“讲讲你对闭包的理解闭包有什么优缺点实际开发中在哪里用到过”。我想说的是闭包的本质是“函数和它所在词法作用域的组合”它让函数可以访问外部作用域的变量同时让这些变量在函数执行完后不会被立即回收。优点是变量私有化、模拟模块化缺点是容易造成内存泄漏如果不小心持有大对象引用GC没法正常回收。实际开发中防抖节流、单例模式、React Hooks里useState的闭包陷阱都是闭包的实际应用场景。原型链也是一个绕不开的考点new到底做了什么、prototype和__proto__的区别、instanceof的原理。这些题目之所以长盛不衰是因为它直接反映候选人是否理解JS的对象机制。很多人日常开发用 class 写惯了没有细想过 class 本质是语法糖底层依然是原型委托。事件循环从2017年考到2026年还在考可见它的地位。核心问题是“宏任务和微任务的区别setTimeout、Promise、async/await的执行顺序”。这道题最恶心的地方在于看着简单但一涉及到async函数内部的同步执行、await后面的代码何时进入微任务队列、Promise.resolve的入队时机很多人就晕了。我的建议是不要背执行结果要顺着事件循环的流程去推演当前调用栈同步代码先执行然后处理微任务队列微任务清空后再取宏任务如此循环。除了这三座大山还有几个高频考点this指向问题普通函数、箭头函数、apply/call/bind的区别、数组的map/forEach/filter/reduce的异同、浅拷贝与深拷贝的原理。这些题目在今天的笔试里仍然是主力属于前端面试“八股文”里最核心的地基。2.3 浏览器与网络你为什么需要懂它们游戏公司做H5页面对加载性能极其敏感所以试卷里通常会穿插浏览器和网络相关的题目。常见的有“从输入URL到页面显示中间发生了什么”这道综合题几乎年年都有。完整的回答链路是DNS解析、建立TCP连接、发送HTTP请求、服务器响应、浏览器解析HTML构建DOM树、解析CSS构建CSSOM树、执行JS脚本、发生页面渲染、可能还有资源加载的并发策略。2017年的时候还不流行HTTP/2和TLS1.3的细节追问但如果你能提到浏览器的预加载扫描、关键渲染路径、async和defer的差异那肯定是加分项。“跨域有哪些方案”也经常出现。JSONP、CORS、代理转发、postMessage、document.domain降域、WebSocket这些方案要能说出适用场景。比如JSONP只能支持GET适合老项目里的紧急跨域需求CORS是目前的主流方案但要处理好预检请求开发环境一般用代理生产环境更多用Nginx反向代理。HTTP缓存这块要弄清楚强缓存和协商缓存Cache-Control的max-age、ETag、Last-Modified的优先级和触发条件。游戏活动的H5页图片、JS、CSS资源量都很大缓存策略设置得好不好直接影响首屏加载速度。这些问题看起来是“网络知识”但实际工作中前端天天在接触所以笔试出它一点都不意外。3. 编程题和综合设计题的破题思路3.1 手写代码题的常见原型与参考实现写代码的部分2017年那份卷子出过的题和现在面试题库里高频出现的题高度重合。我挑几个最典型的给出参考实现和解析。第一个是数组去重。这个题有无数种写法不同的写法对应不同的境界。最简单的const arr [1, 2, 1, 3, 2, 4]; const unique [...new Set(arr)]; console.log(unique); // [1, 2, 3, 4]但如果笔试只写这一行评分往往不会太高。因为出题人想看你对“去重”这个需求的理解数组里是什么类型要不要考虑对象要不要去NaN用双重循环去重时间复杂度是O(n²)数据量大的时候会有性能问题用对象存储键值去重要小心1和1被当成同一个键用Set虽然简洁但要注意它不能去除对象中的深层结构。如果能针对这些边界情况做说明哪怕代码没有写到完美面试官也会觉得你想问题比较全面。第二个是防抖和节流。这两个概念直到今天都是面试高频而且工作中确实常用。function debounce(fn, delay 300) { let timer null; return function (...args) { 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); } }; }注意这里我用到了fn.apply(this, args)为的是保留调用者上下文。很多人在笔试里不写this的传递虽然输出结果可能一致但稍微懂行的人一眼就能看出来你是背的模板。防抖适合输入搜索、窗口resize后触发节流适合滚动事件、按钮点击频率控制。第三个是深拷贝。2017年的时候JSON.parse(JSON.stringify(obj))还能糊弄过去但现在面试官基本都会追问“JSON序列化有什么坑”。答案是函数、undefined、Symbol、循环引用都会被丢失或报错Date会被转成字符串RegExp会变成空对象。所以现在的标准手写版本至少要处理基本类型、数组、普通对象能处理循环引用更好。function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) { return target; } if (map.has(target)) { return map.get(target); } const result Array.isArray(target) ? [] : {}; map.set(target, result); for (const key of Object.keys(target)) { result[key] deepClone(target[key], map); } return result; }这类题考察的其实是候选人对边界条件的敏感度。能写出基础版本的人很多能主动考虑循环引用和特殊对象的很少后者正是技术深度拉开差距的地方。3.2 综合设计题“如果一个页面很慢你怎么排查和优化”这份试卷最后通常会给一道开放性设计题。我记得比较有代表性的问法是“公司的游戏官网首页打开很慢你会从哪些角度去排查和优化”这道题没有标准答案但回答的广度和深度直接体现工程经验。比较完整的回答可以从这几层展开资源加载层检查图片体积是否用了WebP/懒加载JS/CSS是否压缩合并是否开启Gzip静态资源是否走CDN请求层有没有多余的请求接口能不能合并有没有不必要的重定向是否复用HTTP连接渲染层首屏有没有被过多的同步JS阻塞关键CSS是否内联DOM结构是否过深有没有触发大规模重排运行时层有没有内存泄漏长列表是否虚拟滚动图片解码是否消耗过多内存动画是使用transform/opacity还是触发了layout和paint。这个答题思路如果放在2017年能覆盖大部分考点放在2026年依然适用。因为优化的本质没有变变的只是工具和指标比如现在多了Lighthouse性能报告、Core Web Vitals、PWA离线缓存这些新维度但底层的思考框架是一样的。3.3 组件化设计题如何设计一个通用弹窗除了性能优化组件化设计题也很常见。比如“如果让你从零设计一个通用Modal弹窗组件你会考虑哪些问题”我建议按以下顺序回答API设计外部使用者需要传入哪些参数比如visible、title、content、onOk、onCancel插槽/具名分发允许调用方自定义底部按钮、自定义头部、甚至完全覆盖默认内容层级管理z-index如何避免冲突弹窗遮罩如何变体性能弹窗打开时是否懒渲染关闭后是否销毁DOM无障碍键盘Esc能否关闭焦点是否被正确管理样式覆盖提供主题变量而不是让使用者用!important去覆盖样式。这道题在2017年考的是基本功在2026年考的还是基本功而且现在组件库生态已经非常成熟面试官更希望听到“我对组件库设计有自己思考”的回答而不是“直接引antd/Vant”。4. 从2017到2026前端面试的变与不变4.1 哪些考点已经过时或者被替代第一类是IE兼容相关的东西。2017年还要考虑IE9甚至IE8的兼容写法比如addEventListener和attachEvent的判断、CSS hack、console.log兼容这些在今天已经没什么实际意义了。除非你专门做企业级老系统维护否则面试官也不太会专门抠这种题。第二类是jQuery相关。2017年很多笔试还会问“$(document).ready和window.onload的区别”“jQuery链式调用的原理”现在再问这个的公司大概率是还在维护老项目。不是说jQuery没价值而是它不再是一个新人的核心技能点。第三类是纯CSS布局的某些写法。比如“清除浮动有几种方式”在Flex和Grid成为标配之后这个问题的重要性下降了不少。不过话说回来你如果去面试一个对浏览器兼容性要求较高的团队浮动清除仍然有一定的面试价值只是不再占据主导地位。4.2 哪些考点依然是面试地基不管前端技术怎么迭代有几样东西几乎天天在考而且很可能继续考下去。事件循环和异步编程这是其一。从Callback到Promise到async/await语法一直在变但事件循环的机制始终没有变。到现在前端面试里关于“微任务、宏任务执行顺序”的题依然是高频因为它可以直接反映你对异步代码的控制力。闭包、原型链、作用域、this这些JS语言本身的特性也没有过时。虽然现在写代码大量依赖框架但这些基础决定了你在遇到复杂bug时有没有能力从原理层面去定位问题。尤其是React的闭包陷阱、Vue的响应式依赖采集想搞明白底层原理都绕不开JS基础。网络基础和浏览器工作原理也是常青树。HTTP缓存、跨域、渲染机制、DNS解析这些内容在2017年的试卷里有在2026年的最新面试题库里同样有。工程化工具再怎么变打开的浏览器底层的网络模型和渲染模型不会三天两头变。4.3 2026年的面试趋势正在新增什么如果现在出题会发现和2017年最大的不同是多了三个新方向。第一个是工程化和微前端。2017年还停留在“会用Webpack打包”的阶段现在会问“Webpack和Vite的核心区别”“模块联邦的原理”“微前端如何做沙箱隔离”“应用之间如何共享公共依赖”。这些问题的背后是团队规模的扩大和业务复杂度的上升一个前端不再是只管一个页面而是要管整个应用架构。第二个是性能监控和稳定性。以前说性能优化更多是“一次性优化”现在强调的是持续监控Sentry怎么接入错误上报怎么做性能指标如何采集白屏监测用什么方案前端告警怎么配置。这也是一套新的面试题目体系。第三个是AI工具链对开发方式的影响。2026年大量前端团队已经在日常工作中使用AI辅助编程面试中开始出现类似“你会如何在项目里使用AI工具”“如何让AI生成不跑偏的代码”的问题。这是一个非常大的增量当年根本没这个概念现在却成了真实工作的组成部分。5. 结合盛趣这类公司项目经验应该怎么准备5.1 游戏公司对前端技能树的特殊偏好如果你准备投递游戏公司前端岗位光刷通用笔试题是不够的。游戏公司前端的业务场景比较集中在游戏官网、活动专题、玩家中心、数据看板这几类因此技能树有明显的侧重点。第一动效和交互动画。游戏公司非常在意页面是否“炫酷”所以Canvas、WebGL、CSS3动画、SVG动画、动画性能优化都是加分项。你可以在项目经验里写清楚自己用Canvas做过什么、动画帧率如何优化、遇到GPU占用过高怎么处理这些都是游戏公司面试官爱听的。第二移动端适配。游戏玩家大多用手机访问活动页移动端适配经验一定要有。不只是rem和viewport的基本配置还要包括刘海屏适配、不同安卓机型的WebView兼容问题、移动端触摸事件的坑。可以单独准备一个自己踩过的移动端兼容case面试效果会很好。第三高性能渲染。如果做过大列表、长页面、实时数据展示一定要在项目里强调渲染性能方案虚拟列表、时间分片、Web Worker处理大数据、避免不必要的重排重绘。尤其是Web Worker2026年已经是一个常见考点如果你有实战经验会明显领先其他候选人。5.2 项目经验怎么写才不“虚”很多简历的问题是“项目经历写得像流水账”只写“我做了一个后台管理系统用了Vue和Element UI”这种描述对面试官来说毫无信息量。我建议用“三个关键词”来组织每个项目业务背景、技术难点、个人贡献。比如这样写“某游戏活动页上线后首屏加载需要3.5秒我通过拆包、图片懒加载、开启CDN缓存等手段将首屏时间优化到1.8秒活动页同时在线峰值2万人时未出现卡顿。”这种描述每一句都在给面试官提供追问素材也证明你真的干过活、思考过问题。另外如果你的项目经验里能体现“组件复用”和“规范化”会非常加分。比如“我封装了团队内部的上传组件和图表组件在5个业务页面中复用”这种话能从侧面证明你有工程化思维而不只是一个会写页面的人。5.3 笔试之外的临门一脚项目复盘能力面试官问项目最怕遇到说不清设计决策的候选人。比如你项目里用了Vuex被问到“为什么不用props逐层传”时很多人会愣住。其实答案不复杂逐层传参在层级深、状态共享多的情况下维护成本高Vuex提供中央状态管理方便跨组件通信和调试。但你要能说出这个逻辑而不是“因为大家都这么用”。所以建议在面试前把自己简历上的每一个项目都做一次“为什么”复盘为什么选这个框架、为什么这么设计数据结构、为什么用这种缓存策略、为什么选择同步而不是异步。一套复盘点准备下来你对项目的理解会比写简历时深一大截。这里我还想多说一句游戏公司面试官往往会很在意候选人对游戏业务本身有没有感觉。如果你能主动表现出“我平时有研究游戏网站的动效设计、关注活动页的传播逻辑、理解玩家数据看板的核心指标”即使代码能力稍弱一点也会比一个只会写后台表格的前端更有优势。6. 实战答题策略和避坑清单6.1 答题顺序与时间分配笔试的时间管理非常关键。我的习惯是拿到卷子先别急着动笔花两分钟把整张卷子扫一遍圈出几道大题心里预估一下每道题需要的时间。选择题和简答题的总时长不要超过一半。手写代码题即使不能完整写出来也要写出关键思路和框架千万别留白。设计题尽可能多写方向因为它是按采分点评分的写得越全面越稳。如果一道题卡了超过五分钟还没思路果断先跳过去做完后面的再回头补。实践证明很多人在写完编程题之后回头再看最初卡住的选择题往往能突然顿悟——因为后面的大题已经在帮你把相关知识激活了。6.2 常见失误和避坑第一个常见的坑是“只会背题不理解原理”。很多候选人能说出flex: 1的语法但被问到“flex: 1实际等于哪三个属性”就答不上来能说出new一个对象时会执行什么但一追问“原型链的终点是什么”就卡壳。背题或许能过初筛但走不长远。第二个坑是“手写代码时过于依赖IDE”。笔试通常是纸笔或在线编辑器没有自动提示没有lint工具。平时复习时至少要把常用的手写题防抖节流、深拷贝、数组去重、Promise.all在纯编辑器里打几遍模拟笔试环境更别忽略格式缩进和命名规范这些细节也会被考察。第三个坑是“只写代码不写注释”。如果在手写代码题里能顺手写上一两句核心思路的注释比如“这里用WeakMap处理循环引用”评分会明显高于一个只有代码没有说明的答案。因为笔试不仅看输出还看思维过程。6.3 笔试结束后的下一步面试追问的准备笔试不是终点它只是面试的敲门砖。很多公司会根据笔试卷子里你答错的题来出面试题所以考完之后一定要及时复盘自己的答案尤其要关注那些“会做但没做对”的题目弄明白正确解法。面试追问通常围绕笔试题展开比如你写了一种数组去重的实现面试官会立刻追问“有没有性能更好的写法”“如果数组里有对象怎么办”。这说明笔试和面试是一套联动的考察体系准备笔试就是在准备面试。我个人建议把每一道真题都做成“一题多解”的练习每个算法题至少准备两种实现每个方案题至少准备两个不同角度的回答。这样在面试被追问的时候才会游刃有余。7. 如果你现在才开始准备应该从哪里入手7.1 先搭体系再刷题很多准备校招的同学上来就刷LeetCode、刷前端八股文刷了两个月感觉自己什么都会一点但一到笔试又什么都想不起来。这个问题的根源在于知识体系没有搭好。我建议的顺序是先把JavaScript核心语法过一遍变量提升、作用域、闭包、原型链、this、异步再系统整理CSS布局和HTML基础然后学框架的核心原理和生命周期最后看工程化、网络、性能优化。每一步都配合一个对应的真题练习而不是单纯地“学过”和“刷过”。7.2 用“输出”检验学习效果检验自己是否真的理解一个知识点最好的办法是能不能用大白话给别人讲出来。比如你能不能说清楚“为什么Vue的响应式数据要用Proxy而不是Object.defineProperty”“为什么微前端要用沙箱”“为什么跨域要分预检请求”。我认识一个面试表现特别好的同学他的准备方法很简单每学一个知识点就在自己的笔记里写一段“如果我是面试官我会怎么考这个点”然后自己模拟回答。这个方法看似笨但效果出奇地好因为它在强迫你把输入转化为输出而不是躺在“我大概懂了”的舒适区里。7.3 真题之外的扩展阅读笔试的题目永远是有限的但面试官的追问可以是无限的。想在追问环节稳住建议在准备基础题之外每类题目多延展一步说到缓存去了解一下启发式缓存和Vary头说到事件循环去了解一下queueMicrotask和浏览器与Node事件循环的区别说到组件设计去了解一下Web Components和Shadow DOM。这些扩展不要求面面俱到但至少要做到“被提问时不会一脸懵”。你多准备的那一分可能就是面试官心里给你“加分”的那一分。我把这套2017年的试卷复盘到这里其实想表达的最核心的一点是面试题会变但考察底层能力的方向不会变。当年刷这套题的时候我总觉得出题人是在故意刁难人后来自己站到面试官的位置上才明白那些题目背后全是对日常工作的抽象和提炼。如果你现在正在准备校招或跳槽与其焦虑题型变化不如把一个个经典考点吃透再用自己的项目经验去证明你真的能落地。这样到了考场上你会发现那些题其实没那么可怕。