企业官网建设流程全解析

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到absolute+transform，至少要能说两三种。

第三类，盒模型与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 Worker，2026年已经是一个常见考点，如果你有实战经验，会明显领先其他候选人。

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年的试卷复盘到这里，其实想表达的最核心的一点是：面试题会变，但考察底层能力的方向不会变。当年刷这套题的时候，我总觉得出题人是在故意刁难人，后来自己站到面试官的位置上，才明白那些题目背后全是对日常工作的抽象和提炼。如果你现在正在准备校招或跳槽，与其焦虑题型变化，不如把一个个经典考点吃透，再用自己的项目经验去证明你真的能落地。这样到了考场上，你会发现那些题其实没那么可怕。