企业官网建设流程全解析

2021年小米秋招前端方向第一场笔试，这个话题放到现在看，依然有很强的参考价值。大厂前端笔试的考察逻辑这些年虽然一直在变，但核心筛选标准没有变过：基础扎不扎实、思路清不清晰、代码能不能落地。我身边有不少人问过我当时这场笔试的情况，也有人拿着别家公司的题目来对比，发现小米这场笔试题的区分度做得比较好，不像某些公司要么纯八股文堆砌，要么直接上 hard 级算法题把人劝退。这篇就把我当时对这场笔试的拆解、复习重点、现场答题策略和事后复盘整理出来，给准备大厂前端笔试的同学一个可以照着准备的方向。

1. 笔试整体设计思路：大厂前端笔试到底在筛什么

1.1 表面是做题，实际是在模拟“能不能干活”

很多同学准备笔试有个误区，觉得笔试就是在考“背了多少面试题”。实际上，大厂前端笔试的核心逻辑是模拟真实工作场景中的问题拆解和解决能力。2021年小米秋招前端方向第一场笔试的题目设置，明显不是为了让候选人背出标准答案，而是看你在有限时间内能不能快速定位问题、组织思路、写出一段能跑的代码。

举个例子，笔试题里经常出现“给一段有 bug 的代码让你修复”或者“给你一个场景让你实现某个交互逻辑”，这类题考察的不只是语法熟不熟练，而是你在实际业务中遇到类似问题时，能不能快速理解现有代码的意图，找到问题根因，并且用最稳妥的方式改掉。这和工作中接到一个需求、打开一个别人写的模块、开始改 bug 的流程是完全一致的。

所以准备笔试不能只刷题，要改变思维方式：把自己当成一个已经在公司里干活的前端工程师，题目就是你的工单。这样你会更容易理解出题人为什么这么考，也更容易踩中得分点。

1.2 题型分布与分值逻辑

从整体来看，这场笔试的题型大致可以分为四块：基础选择题/填空题、手写代码题、算法题、场景分析题。每个题型的考察目标和分值逻辑完全不同，复习策略也应该区别对待。

基础题分值虽高，但区分度有限，因为大部分人都能答对一半以上；真正拉开差距的是手写代码题和场景分析题。手写题考的是“你会不会”和“你写得规不规范”，场景题考的是“你遇到问题有没有思路”。我备考时把大量时间放在了这两块，事实证明这是性价比最高的选择。

1.3 出题风格背后的筛选意图

小米这场笔试的出题风格比较务实，没有太多偏题怪题，但陷阱设置得很细。比如有些选择题会故意把“深拷贝和浅拷贝的区别”“let 和 var 在循环中的作用域差异”这类基础知识点变形包装，让你一不小心就掉坑。这说明出题人默认你已经掌握了基本概念，考察的是你能不能识别概念在实际代码中的表现。

这种风格背后反映的是前端岗位的实际需求：业务开发中大量时间是在处理边界条件、兼容性问题、状态管理问题，这些都需要对语言和运行时有深刻理解。如果你只是背了“闭包就是函数内部访问外部变量”这样的定义，却看不懂闭包在循环中导致的经典 bug，那在笔试中就会很吃亏。

一句话总结：这场笔试不考“知识面”，考“理解深度+输出能力”。掌握了这一点，后面的复习方向就清晰了。

2. 核心考点拆解：这些内容必须吃透

2.1 JavaScript 语言功底是绝对重点

前端笔试不管是哪家公司，JavaScript 都是占比最大的考察方向。2021年小米这场笔试也不例外，JS 相关题目分布在选择题、手写题和场景题中，几乎是全面覆盖。备考时我给自己定了几个必须吃透的专题：执行上下文与作用域链、闭包、原型与原型链、this 指向、事件循环、Promise 与异步编程。

事件循环这个知识点我建议深入理解而不是背结论。很多同学只知道“宏任务和微任务”这个粗粒度分类，但遇到“Promise 里套 setTimeout、async/await 混用”这种组合题就懵了。我在准备时用一段典型代码反复推演执行顺序，直到能带着面试官走完整条任务队列的入队出队过程：

async function test() { console.log(1); await Promise.resolve(); console.log(2); } setTimeout(() => console.log(3), 0); test(); Promise.resolve().then(() => console.log(4)); console.log(5); // 输出顺序：1、5、4、2、3

很多人不理解为什么 2 在 4 后面，原因是 async 函数中的 await 会将其后续代码放入微任务队列，而 Promise.resolve().then 的回调先注册，所以先执行。这个例子我建议自己手推一遍，比背十遍理论都有用。

原型链部分要注意构造函数、实例、原型对象三者之间的关系。我通常会画一张三角关系图，把Person.prototype.constructor === Person、person.__proto__ === Person.prototype这些关系梳理清楚。遇到“new 一个对象发生了什么”这种题，要能说清四步：创建空对象、链接原型、绑定 this、返回对象。

2.2 浏览器与网络原理：常考但容易被忽视

浏览器原理这块，小米的笔试明显是花了心思的。题目不会直接问“浏览器渲染流程是什么”，而是给你一个场景，比如“某页面首屏加载很慢，分析可能原因”。这种问法需要你把 HTTP 缓存、资源加载、DOM 解析、CSS 阻塞、JS 阻塞这些知识点串成一条线。

我的复习思路是自问自答几个核心问题：

• 从输入 URL 到页面显示，中间发生了什么？
• 强缓存和协商缓存的区别是什么？服务端怎么控制？
• CSS 会阻塞 DOM 解析吗？JS 会阻塞吗？
• 什么情况下会导致重排（reflow）和重绘（repaint）？

这几个问题如果能不看资料完整答出来，浏览器部分基本就稳了。特别是 HTTP 缓存，我建议大家把Cache-Control的no-cache、no-store、max-age等指令的实际效果区分清楚，笔试选择题特别爱考这个。另外，ETag和Last-Modified的优先级关系也要记住：ETag 优先，因为它是文件内容的哈希，比时间戳更精确。

跨域问题也是必考项。CORS 的简单请求和预检请求区分、Access-Control-Allow-Origin的配置、JSONP 的原理，这些都要能手写。我备考时把 JSONP 的实现完整默写过一遍：

function jsonp(url, callbackName) { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = `${url}?callback=${callbackName}`; window[callbackName] = (data) => { delete window[callbackName]; document.body.removeChild(script); resolve(data); }; script.onerror = () => reject(new Error('JSONP request failed')); document.body.appendChild(script); }); }

2.3 CSS 不只是写样式，还要懂布局原理

CSS 在笔试中的比重通常没有 JS 大，但小米这场笔试还是体现了对布局基本功的重视。flex 布局和 grid 布局是绝对重点，特别是 flex 的三个核心属性flex-grow、flex-shrink、flex-basis的配合计算。我面试时经常问候选人“一个 flex 容器里有两个子元素，各自的 flex 值分别是 1 和 2，剩余空间怎么分配”，很多人答不准确，就是因为没有真正看过 flex 布局的计算过程。

BFC（块级格式化上下文）也是一个高频考点。我建议从“是什么、怎么触发、有什么用”三个角度来准备，特别是应用的场景：清除浮动、防止 margin 塌陷、阻止元素被浮动元素覆盖等。笔试可能会给你一段代码，问“为什么这里会出现 margin 塌陷，怎么解决”，如果你只记得overflow: hidden而说不清原理，就容易被扣分。

层叠上下文也是容易出题的隐藏考点。position: relative和z-index: -1的组合、transform会创建新的层叠上下文，这些细节只有真正写过复杂页面的人才能第一时间反应过来。我见过不少候选人在这里翻车。

2.4 框架与工程化：从“会写组件”到“懂原理”

2021年前端笔试对框架的考察已经不只是“会不会写 Vue/React 代码”了，而是开始考察原理级理解。小米这场笔试虽然没有直接让手写 Vue 源码，但场景分析题里考察了虚拟 DOM 的理解、diff 算法的基本思路、响应式数据的实现方式。

我在准备 Vue 部分时，重点是搞清楚三条主线：

• 响应式系统是如何工作的（Object.defineProperty vs Proxy）
• 虚拟 DOM 是什么，为什么要引入它
• 组件的更新流程从 setter 触发到 DOM 更新中间发生了什么

对于 React，重点则是 hooks 的实现原理和 fiber 架构的基本概念。这里我建议大家不要只背“useEffect 在渲染后执行”，要能解释清楚为什么依赖数组变化才会重新执行、为什么 hooks 不能写在条件语句中。这类理解题在笔试中的区分度非常高。

工程化方面，webpack 的原理、Loader 和 Plugin 的区别、Tree Shaking 的原理是考察重点。我当时专门整理了一个对比表格，把 Loader 和 Plugin 从“定位、作用、执行时机”三个维度做了区分。Module Federation 这类微前端相关概念如果能答得出来，会是一个很好的加分项。

3. 手写题与算法题的实操记录

3.1 高频手写题：不是会写，是要写对写稳

手写代码题是笔试中让很多人头疼的部分，因为平时工作大多是看代码、调代码，很少从头到尾写完整函数。2021年小米这场笔试的手写题没有超出常规范围，但每个题都有几个隐性加分点，踩中了比“写出来”更重要。

防抖和节流是最高频的手写题之一，几乎属于必考。我建议不要只背模板，要理解两者的核心差异：防抖是“事件停止触发后 delay 时间执行”，节流是“一段时间内只执行一次”。写法上还要注意this指向和参数透传，完整版本应该是：

function debounce(fn, delay) { let timer = null; return function(...args) { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay); }; }

这个版本用了剩余参数和apply来保留上下文，是面试官最愿意看到的写法。

手写Promise是我建议必须能走一遍的题。虽然笔试不一定每次都考，但写一遍 Promise 能帮你把微任务、状态机、链式调用这些概念全部串起来。我当时的做法是先实现一个只支持then的简化版，再逐步加上catch、finally、all、race。核心的状态流转是pending -> fulfilled或pending -> rejected，状态一旦改变就不可逆，这个机制和事件循环的配合要理解透。

深拷贝也是手写题中的常客。要区分写的是浅拷贝还是深拷贝，要考虑数组和对象的判断、循环引用的处理、特殊类型（Date、RegExp、Map、Set）的处理。我当时用的版本已经考虑了这些边界：

function deepClone(target, map = new Map()) { if (target === null || typeof target !== 'object') return target; if (map.has(target)) return map.get(target); const isArray = Array.isArray(target); const result = isArray ? [] : {}; map.set(target, result); if (isArray) { target.forEach((item) => { result.push(deepClone(item, map)); }); } else { Object.keys(target).forEach((key) => { result[key] = deepClone(target[key], map); }); } return result; }

有些同学会问：手写题到底要不要背？我的答案是“不仅要背，还要理解着背”。因为笔试现场时间紧张，如果你现场去推理每一步的逻辑，很容易写不完整或者出现低级的语法错误。提前把高频题写到肌肉记忆的程度，才能给算法题和场景题留出足够的时间。

3.2 算法题的难度分级与取舍策略

算法题是很多前端同学的软肋，但这并不意味着我们要花几个月时间去啃算法。2021年小米秋招前端方向的算法题难度大概是 LeetCode 中等偏下水平，重点考察链表、二叉树、数组操作、字符串处理、排序查找这些基础数据结构。

我的策略是分类准备，把常见题型按“必拿分”和“努力拿分”分级：

必拿分题：数组去重、字符串反转、回文判断、两数之和、数组扁平化、二叉树遍历。这些题思路简单、代码量小，只要刷过一遍就能写出来。

努力拿分题：链表的反转与合并、二叉树的层序遍历、动态规划入门题（爬楼梯、打家劫舍）。这些题需要理解核心思路，建议每个专题刷 5-10 道，做到能独立写出思路清晰、没有语法错误的代码。

笔试中最忌讳的是死磕难题。如果一道题想了 10 分钟还没有完整思路，立刻放弃或先写暴力解。我见过太多人在一道中等偏难的算法题上花费 20 分钟，导致后面的手写题和场景题没时间写，这是典型的战略失误。笔试不是竞赛，拿到尽可能多的分才是目标。

3.3 我在笔试现场的实际答题顺序

我给自己定的答题顺序是：先做选择题和填空题，因为这类题速度快、确定性高，能快速建立信心；然后做手写代码题，趁脑子还清醒把 JS 功底展示出来；再做场景分析题，这类题需要完整思路，放在中间认真写；最后留时间做算法题，直接做有把握的，难题用暴力解兜底。

这个顺序的关键逻辑是“分数确定性优先”。你永远不会因为一道算法题没做完而失败，但会因为手写题写出了低级错误而丢分。选择题不用担心时间不够，遇到不确定的先标记跳过，回头再想，不要恋战。

另外我强烈建议在开始答题前花 2 分钟通读一遍全部题目，把所有题目的难度和时间预估记在心里。这样写前面题目的时候，心里有数哪些题的耗时应该压缩，哪些题值得深入。

4. 常见问题与避坑实录

4.1 审题不清是真的会丢分

我在复盘那场笔试时发现，最容易丢分的不是不会做的题，而是看错条件、答非所问的题。比如题目明确说“用 ES5 实现”，你非要写const和箭头函数；题目说“写出输出结果”，你却写成了“这段代码的作用”；题目说“至少写出两种方案”，你只写了一种。

这些小细节看似微不足道，但会直接影响阅卷体验。阅卷人希望快速看到你的答案是否切题，如果你的答案和题目要求错位，即使内容再漂亮也难以给分。

建议在笔试时用排除法对照题目要求：答完一道题后，重新读一遍题干，核对三个信息——题目的关键词（实现/优化/解释）、约束条件（ES5/不能使用 XX）、输出要求（代码/输出结果/解决过程）。这个过程只需要 30 秒，但能避免至少 20% 的无效失分。

4.2 环境与工具使用上的细节坑

在线笔试平台最容易出问题的是环境相关的问题。我当时遇到的一些情况，现在整理出来给大家提个醒：

• 部分笔试平台不支持console.log查看中间变量，导致调试手写题时看不到输出结果。这时候建议在本地编辑器写好再粘贴，但要注意本地可运行不代表平台支持所有语法。
• Node 版本不一致可能导致某些 API 不可用。笔试平台如果默认 Node 版本较老，optional chaining（?.）和空值合并（??）可能会报错。保险起见，手写题尽量用 ES6 及以下语法。
• 有些平台要求代码不能有语法错误，否则整题不给分。写完后花一分钟检查括号、分号、变量名是否一致，这个检查能救回很多分。

我还建议大家提前熟悉常用的笔试平台操作，比如牛客网的代码编辑器、赛码网、ShowMeBug 等。有些平台支持本地代码自动补全，有些完全裸奔，提前适应平台会让你在考场上更从容。

4.3 心态与时间管理上的常见问题

笔试时候最容易犯的错误是“恋战”。遇到一道有思路但还没完全想通的题，总觉得再想几分钟就能写出来，结果 10 分钟过去了还没动笔。我的经验是：如果一道题超过 10 分钟没有进展，立刻跳到下一题，做完整张卷子后再回头捡。

另外要注意的是，笔试的最后一两道题往往是压轴的场景分析题，需要留出足够的思考时间。如果前面题目耗时太长，后面的大题只能匆匆写几行，得分率会很低。我建议每道选择题最多 1-2 分钟，手写题最多 10 分钟，算法题最多 15 分钟，超过时间就做标记跳过。

最后的技巧是“把能拿的分拿全”：如果你不会写完整代码，写清楚思路步骤，用伪代码描述也可以得到部分分。很多笔试平台是人工阅卷或机考加人工复核，你的思考过程和解题思路是会被看到的。不要因为不完美就直接留白，写了就有机会。

5. 针对 2026 年大厂前端笔试的新趋势观察

虽然这篇文章的引子是 2021 年小米秋招前端方向第一场笔试，但为了让今天的读者有更好的参考价值，我再聊聊最近几年大厂前端笔试的变化趋势，这些趋势其实在 2021 年的题目中已经露出了苗头。

2021 年的笔试题里开始出现工程化场景题和框架原理题，这几年这种趋势明显加速。现在的笔试题目开始大量结合真实工程需求，比如“如何设计一个前端错误监控系统”“如何优化一个包含大量图片的列表页面”“如何设计一个带权限控制的路由方案”。这类题目没有标准答案，考察的是你的技术方案设计能力、对性能指标的敏感度、对用户体验的判断力。

第二个趋势是 TypeScript 和工程化工具链的权重上升。几年前笔试中 TS 可能只是加分项，现在几乎成了必考项，手写一个类型工具函数（比如Partial<T>、Pick<T, K>的实现）已经出现在多场笔试中。

第三个趋势是 AI 辅助开发工具的影响。2025 年以来，不少公司的前端笔试开始允许使用 AI 工具完成部分题目，但与此同时，题目本身的深度和综合度也提高了。基础题可以通过 AI 快速完成，但综合场景题和方案设计题依然需要候选人具备完整的知识体系和独立思考能力。这也意味着大家对知识点的理解深度比死记硬背更重要。

所以我的核心建议是：把基础打牢，把原理搞懂，把常见的场景题多做一些思考。面试和笔试的形式会变，但考察的本质不会变——你是否能在真实的工作场景中解决实际问题。

我个人在实际操作中的体会是，准备前端笔试最好的方式不是刷题刷到吐，而是给自己营造一个“模拟工作”的心态。拿到一道题，先想“这是工作中的什么场景”，再想“我怎么下手解决”。这样练出来的思路，在笔试中能稳定发挥，在真正的面试和工作中也经得起考验。最后再分享一个小技巧：平时做题时养成写注释的习惯，把思路和关键决策点写在代码里。笔试时这些注释能帮阅卷人快速理解你的方案，还能帮你自己理清思路，一举两得。