前端笔试怎么备考？以格力真题为例拆解考点与答题策略

2020年那阵子，制造业巨头的技术岗笔试还处在从“传统笔试卷”向“在线测评”过渡的阶段，格力秋招前端岗的题就挺有代表性的。不夸张地说，这套题考察的深度不算变态，但覆盖面非常广，从JS基础到浏览器原理，从手写代码到业务场景设计都有涉及，能比较真实地反映出候选人“前端基本功扎不扎实”。

我当时帮好几个学弟学妹复盘过这套题，也和几个参加过阅卷的同行交流过出题意图。今天就把这套题掰开揉碎聊一聊，重点不是报答案，而是告诉你每道题背后出题人到底想考你什么，以及面对这类笔试，怎样用一套可复用的答题框架去应对。

1. 先看清全局：制造业大厂的前端笔试到底在考什么

很多同学在准备校招笔试时有一个误区，觉得大厂笔试就是刷LeetCode，把算法题刷明白了就能过。但格力这类企业不是纯互联网公司，它的前端岗位主要支撑的是官网、电商商城、企业内部管理系统、智能家电配套的H5和小程序等业务。这就决定了它的笔试风格和字节、腾讯完全是两回事——算法题占比不高，基础知识和工程能力的考察占了大头。

我把这套题的考察结构拆开看，大概是这样一个比例：

这个分布透露了一个关键信息：这套题默认你是一个“能直接上手干活”的前端，而不是一个“算法竞赛选手”。它考察的是你在真实业务里每天都会用到的东西——变量提升会不会踩坑、事件循环怎么理解、跨域怎么解决、首屏加载怎么优化。这些知识和你在简历上写的项目经历是直接挂钩的，笔试过不了，说明你简历里写的“熟练掌握”是要打问号的。

另一个值得注意的点是时间分配。整套题大概90分钟，其中有几道是手写代码题，需要你在编辑器里完完整整写出来。很多人挂在时间不够上，原因不是题不会，而是在前面简答题上花太多时间组织语言，导致后面分值最高的手写题草草收场。这个策略问题我后面详细说。

1.1 出题侧的岗位定位：要的不只是“会写页面”的人

如果你去看格力这类企业前端岗位的JD，会发现描述通常很宽泛，比如“负责集团各业务线前端开发”“参与前端基础组件库建设”“持续优化用户体验”等。翻译成人话就是：他们需要的人要能独立搞定一个完整的前端模块，而不是只会照着设计图切页面。

这就解释了为什么试卷里会同时出现“实现一个防抖函数”和“描述从输入URL到页面展示的完整过程”这类题目。前者考察你的代码功底，后者考察你对整个Web系统运作机制的理解。一个只会在框架里写业务代码的人，往往能答好前者但答不好后者；反过来，一个理论基础扎实但代码写得少的人，又容易在时间复杂度和边界条件上翻车。

笔试就是一道筛子，先把这两类不合格的人筛掉，剩下的才有机会进入面试环节。

1.2 这套题对2026届备考生的参考价值

我知道现在已经是2026年了，看一篇2020年的笔试题解会有种“过时了”的感觉。但说实话，前端笔试的核心题库更新速度远比你想象得慢。2020年考的事件循环、闭包、原型链、防抖节流、跨域，到现在依然是高频考点。变化的部分主要是框架题——2020年Vue 2还是绝对主流，而现在Vue 3和React 18/19已经成为默认选项，这套题里那块占比20%的框架题，你需要用新版框架的知识去重新理解。

所以与其说这是“题解”，不如说是一份“备考方法论”。把这类题吃透了，你能掌握一套应对前端笔试的通用能力框架，换到哪家公司都能用。

2. 核心题型拆解：每道经典题背后的真实考察点

2.1 JavaScript基础题：背答案没用，得懂机制

这一模块的常客包括：闭包、原型链、this指向、变量提升、事件循环、深浅拷贝、数组去重等。看起来都是老生常谈，但格力的题很少直接问你“什么是闭包”，而是给你一段代码，问你输出什么。

举个例子，一道高频题是这样的：

for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 100); }

这段代码输出什么？如果你不假思索地回答0、1、2、3、4，那就踩坑了。正确答案是5、5、5、5、5。因为var声明的变量是函数作用域，循环结束后i已经变成了5，而setTimeout的回调函数在100毫秒后才执行，取到的自然全是5。

但出题人不会只考这一层。他会接着问你：“那怎么改成输出0到4？”这里就有好几种方案了——用let声明、用闭包包一层立即执行函数、用bind传参、甚至用setTimeout的第三个参数。每一种方案背后的原理都不一样，你能写出来几种，就能看出你对作用域和闭包的理解到了什么程度。

我在实际阅卷时看到的情况是，大部分考生能用let解决，但只有很少一部分人能写对闭包方案。这个差距不是“会不会”的差距，而是“有没有真正理解JavaScript的执行机制”。

再比如事件循环这道题，经典的考察方式是给你一段混杂了setTimeout、Promise、async/await的代码，让你按顺序写出输出。这类题目考察的是你对宏任务和微任务队列的理解。很多人记得住“微任务优先于宏任务”，但一遇到await就乱了。其实只要记住一个核心规则：await后面的代码相当于被放进了.then()里，也就是微任务。这样去分析，正确率会高很多。

2.2 浏览器与网络题：一条完整的知识链路

如果说JS基础题考的是语言本身，那么浏览器与网络题考的就是整个Web世界的边界。这类题目的代表是：“从输入URL到页面渲染完成，经历了哪些过程？”这是一道没有标准答案的开放题，但答得好不好，一眼就能看出水平差距。

一个合格的答案应该覆盖这么几个阶段：

1. URL解析与编码处理
2. DNS域名解析（本地缓存、DNS服务器逐级查询）
3. TCP连接建立（三次握手，HTTPS还要加TLS握手）
4. 发送HTTP请求，服务器处理并返回响应
5. 浏览器接收响应，判断状态码
6. HTML解析，构建DOM树
7. CSS解析，构建CSSOM树
8. DOM树和CSSOM树合成渲染树
9. 布局（Layout/Reflow）和绘制（Paint）
10. 合成与显示（Composite）

能写全这条链路，说明你脑子里有一个完整的Web运行框架；写不全的人，多半是在业务开发时只关注自己那一亩三分地，没往深里想过。我当时给学弟的建议是，这类题一定要自己画一遍流程图，然后把每个阶段对应的浏览器API、性能指标（如DOMContentLoaded、LCP、FCP）都对应上，这样才算真正吃透。

除了这条链路，跨域也是必考项。格力的题通常会结合业务背景问：“前端项目部署在A域，接口在B域，怎么解决跨域？”这就不是单纯问你概念了，而是考察你在真实工程里有没有处理过这类问题。答案可以从开发环境和生产环境两个维度展开——开发环境用代理转发，生产环境用Nginx反向代理、CORS配置或JSONP等方式。能把不同方案的适用场景和优缺点说清楚，说明你有实际项目经验。

2.3 CSS与布局题：经典题目中的工程思维

CSS题在笔试里占比不高，但几乎没有不考的。最常见的是三栏布局——左右固定宽度，中间自适应，问你有几种实现方案。这道题考察的不是你会不会写一种方案，而是你知道几种方案，以及能不能说出每种方案的适用场景和优缺点。

常见的方案至少有五种：浮动布局、绝对定位布局、flexbox布局、grid布局、表格布局。2020年那个时间点，flex是主流答案，grid算是加分项。我见过很多人在试卷上只写了flex一种方案，然后就说“其他方式都有兼容性问题”。这个回答本身没有错，但显得思考不够全面。出题人想看到的是你能从“文档流”“层叠上下文”“弹性布局”“网格布局”等不同维度去分析问题，展现出你对CSS布局体系的整体掌握。

移动端适配也是这类企业常考的点，通常会问“rem和vw有什么区别”“怎么做移动端适配”。这背后考察的是你对viewport、设备像素比（DPR）和响应式设计的理解。答题时如果能提到“动态设置根元素font-size”“以设计稿750px为基准”“媒体查询断点”这些关键词，分数就不会低。

2.4 框架与工程化题：2020年版本的Vue知识体系

2020年的框架题基本被Vue 2统治。考察点集中在：生命周期（created/mounted的区别）、组件通信方式（props/emit/vuex/event bus）、路由模式（hash和history）、计算属性和侦听器的区别、Vue响应式原理等。

其中Vue响应式原理是区分度最高的一道题。从Object.defineProperty到数组方法的劫持，从依赖收集到派发更新，能把这个流程画出来并用代码说明白的人，通常对框架的理解已经超出了“会用”的层面。而这也正好是面试时深挖的重点方向——笔试里写出来的东西，面试官一定会追问。

现在的2026年再看这道题，知识点要更新成Vue 3的Proxy响应式、组合式API、v-model的新实现方式等。但核心思维没变：你使用的框架，它的数据驱动机制到底是怎样工作的？所以在复习时不要只盯着一版框架的API，要理解框架的设计思想，这样才能做到以不变应万变。

工程化部分一般会考Webpack。2020年常见的问题包括：“Webpack的构建流程是什么”“Loader和Plugin的区别”“如何做代码分割”。我当时的建议是不要死记硬背，而是真的去搭一个项目，把配置项一个个试一遍。比如Tree Shaking依赖ES Module的静态结构，你光看文档很难真正理解，手动用Webpack打个包，对比产物大小和代码内容，一下就明白了。

3. 手写代码题：三分写代码，七分讲思路

手写代码题是笔试里分值最高的部分，也是最容易在阅卷时拉开差距的部分。这类题通常不会让你写一个完整的大型组件，而是让你实现某个具体功能或算法。常见的有：手写防抖节流、手写深拷贝、手写Promise.all、手写数组扁平化、手写事件总线等。

3.1 防抖与节流：高频考点，但很多人写不完整

防抖和节流是前端面试的“钉子户”，格力的题里大概率出现。出题方式一般是：“实现一个防抖函数，要求支持取消功能。”

先看看什么是防抖。防抖的核心思想是：在事件被触发n秒后再执行回调，如果这n秒内又被触发，则重新计时。适用场景是搜索框输入、窗口resize等需要避免频繁触发的场景。

一个简单的防抖实现：

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

这个实现基本盘没问题，但如果题目要求“支持取消”，你还需要在返回的函数上挂一个cancel方法：

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

注意这里的this指向处理和取消后重置timer这两个细节，很多人会漏掉。还有一个细节——fn.apply(context, args)里的args是在调用时传入的参数，而不是在定义时捕获的。因为如果定义时就捕获了...args，那每次触发事件时新传入的参数就不会被更新了。这个点能在试卷上主动写出来，会非常加分。

节流的实现思路略有不同，它保证一个时间窗口内只执行一次，适用于滚动事件、按钮点击等场景。两种函数的区别一定要说清楚，因为这是面试官最爱追问的地方。

3.2 深拷贝：从浅到深，边界情况反而更值钱

深拷贝这道题考察的是对数据类型的全面掌握。基础版实现很容易：

function deepClone(obj) { if (typeof obj !== 'object' || obj === null) return obj; const result = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { result[key] = deepClone(obj[key]); } } return result; }

这个版本只能处理普通对象和数组。如果有能力，你在试卷上可以提到这样几个进阶点：

• 处理Date、RegExp等特殊对象类型
• 处理循环引用，用WeakMap存储已克隆的对象
• 处理Symbol和函数类型（函数直接引用即可）
• 考虑Map、Set等ES6新增数据结构

我在实际项目中用的深拷贝方案，一般是借助structuredClone或第三方库lodash的cloneDeep，但笔试里不建议提库，因为出题人就是想看你的原理理解。你在答案里把边界情况考虑得越周全，越能证明你平时写代码时养成了严谨的习惯。

3.3 基础算法题：前端友好型的算法考察方式

格力的算法题相对温和，不会出难题偏题。常见的有：数组去重、字符串反转、斐波那契数列、二分查找等。题目本身不难，但要求你在写代码的同时分析时间复杂度和空间复杂度。

以数组去重为例，如果你用两层循环嵌套去重，时间复杂度就是O(n²)；用Set去重，时间复杂度就是O(n)。笔试中能主动写出更优解的，说明你有复杂度意识，这对于工程出身的面试官来说是非常重要的信号。

还有一个容易被忽视的点：算法题的代码规范。阅卷人会看你的变量命名、是否处理边界条件、代码是否简洁清晰。我见过不少考生写的答案功能上是对的，但变量名全是a、b、c，注释一个都没有，可读性很差。这类代码就算对了，分数也会打折扣。实际工作中你要写的代码是给别人维护的，规范的代码风格本身就是一种专业素养。

4. 答题策略：90分钟怎么分配才能拿最高分

做笔试题和平时刷题最大的区别是时间紧张。我见过太多基础不错的同学，因为答题顺序和速度控制不当，最后手写代码题大面积空白。这里分享一套比较实用的答题策略。

4.1 先花两分钟通读全卷，再做优先级排序

拿到卷子后不要立刻动手做第一题，先花两分钟快速浏览所有题目，按“会做且分值高”和“会做但分值低”以及“完全没思路”三个维度把题目分类。做题顺序建议是：

1. 先做会做且分值高的手写代码题
2. 再做会做的简答题和概念题
3. 然后做有一定思路的开放题
4. 最后处理完全没思路的题

原因是手写代码题靠的是清晰的思维状态，放到后面会因为脑力消耗过大而更容易出错。而概念题哪怕只用零散知识也能拿部分分，放在中间比较合适。

4.2 简答题的“踩分点”写法

简答题不是写作文，不需要长篇大论。阅卷人通常是按踩分点给分的，你要做的是把核心关键词放在显眼的位置。比如问“如何解决跨域”，你的答案第一句就要写“CORS、JSONP、反向代理、WebSocket”这四个关键词，然后再分别展开两到三句话。这样哪怕你后面的展开不够充分，踩分点已经拿到了。

还有一个技巧：如果这道题确实不会，也不要留白。按你对题目的理解写一点相关的内容，比如写出问题的背景、可能涉及的原理方向，往往能拿到1到2分的过程分。空白在这类考试中没有任何好处。

4.3 手写代码题的高分格式

手写代码题的格式要求是：先写思路、再写代码、最后写复杂度分析。这三步缺一不可。思路部分用两到三句话讲清楚你的算法逻辑，代码部分保持缩进和命名规范，复杂度分析放在代码下方或者注释里。

以深拷贝为例，你的答案结构应该是：

思路：递归遍历对象属性，遇到引用类型继续递归，基础类型直接返回。 代码：（上面的deepClone实现） 复杂度：时间复杂度O(n)，因为每个节点只访问一次；空间复杂度O(n)，取决于递归深度。

这样一份答案，即使代码有瑕疵，阅卷人也能看出来你是有完整思考过程的，给分会宽容很多。

5. 避坑指南：这些失分点，每届考生都会踩

5.1 只会说“会”不会写“对”

笔试和面试不一样。面试时你口头表达“我知道防抖”，面试官可能会让你继续说；但笔试时“知道”没有任何价值，你必须写出来。我见过不少同学平时能说得头头是道，一上笔就卡壳，原因是平时练得太少，代码都是看过别人写的，自己手写不出来。

应对方法是：复习时不要只看题解，要动手在编辑器里敲一遍，然后关掉答案再敲一遍，直到能脱稿写出来。这个过程非常枯燥，但特别有效。我当年自己准备校招时，就是每天坚持手写10个常用函数，写到形成肌肉记忆。

5.2 开放题答成作文题

“从输入URL到页面渲染”这类开放题，很多同学为了显得认真就写了一大段，上下翻飞，想到什么写什么，结果结构混乱、重点不突出。开放题不是字数越多越好，而是层次越清晰越好。建议用编号列表组织答案，每个编号写一个阶段，每个阶段用“发生了什么+关键知识点”的方式展开。

5.3 忽略题目的限制条件

有些题会特别标注“不能使用内置函数”或者“不能用ES6语法”。这种限制条件不是随便写的，而是考察你对底层实现的理解。比如数组去重题如果说“不能使用Set”，你就需要用对象或者Map来实现。忽略条件直接用Set的答案，就算功能正确，也拿不到这题的分数。

5.4 时间失控，后面的大题全崩

我在前面反复强调时间分配，因为这是每年笔试重灾区。90分钟的卷子，前30分钟做完选择题和填空题，中间30分钟做简答题，最后30分钟专攻手写代码题，这个节奏比较合理。如果在一道简答题上纠结超过10分钟，果断跳过，先拿能拿的分。

5.5 只在浏览器里调试，不关注跨端场景

2020年之后，前端岗位越来越强调多端适配。笔试里如果出现“如何做响应式布局”或者“移动端适配方案”这类问题，不要只答媒体查询，还可以提动态rem方案、vw/vh方案、流式布局、弹性布局等。能把跨端适配的维度打开，说明你有更全局的产品视角。

6. 复盘之后：怎样把一套笔试题变成一份复习地图

笔试不是终点，它其实是帮你查漏补缺的绝佳工具。每次做完一套题，我建议你花半小时做一次系统复盘。复盘不是对答案，而是把每一道题关联的知识点提取出来，做成一张知识图谱。

以这套格力真题为例，做完后你应该能提炼出这样几个复习方向：

• JavaScript核心机制：作用域、闭包、原型链、事件循环、异步编程
• 浏览器工作原理：渲染流程、缓存机制、存储方案、性能指标
• 网络基础：HTTP协议、HTTPS加密过程、跨域方案
• 框架原理：响应式系统、虚拟DOM、组件通信、路由和状态管理
• 工程化：模块化规范、打包工具、构建优化、部署发布
• 数据结构和算法：数组、字符串、链表、栈、队列、树的遍历

把这些方向逐个攻破后，你的前端知识体系会比单纯刷题完整得多。哪怕是面对2026年最新的面试题，你也能从底层原理出发推导出答案，而不是背了一堆过时的“八股文”。

我个人在实际操作中的体会是，笔试准备最好的状态不是“我刷完了多少题”，而是“我看到一道前端问题，能脱口而出它属于哪个知识模块、核心原理是什么、常见坑在哪里”。达到这个状态，笔试就只是走个流程，真正有区分度的战场已经转移到了面试环节的项目深挖和系统设计上。

最后再分享一个小技巧：笔试完之后不管感觉好坏，趁记忆还热乎，把整张卷子牵涉到的知识点和你的作答情况记录下来。这份记录就是秋招后半段的复习大纲。我当年用这个方法，把七八家公司的笔试复盘合成了一份个人错题集，靠它高效搞定了后续好几场面试。希望这套思路也能帮你走好秋招这段路。