2020年那阵子制造业巨头的技术岗笔试还处在从“传统笔试卷”向“在线测评”过渡的阶段格力秋招前端岗的题就挺有代表性的。不夸张地说这套题考察的深度不算变态但覆盖面非常广从JS基础到浏览器原理从手写代码到业务场景设计都有涉及能比较真实地反映出候选人“前端基本功扎不扎实”。我当时帮好几个学弟学妹复盘过这套题也和几个参加过阅卷的同行交流过出题意图。今天就把这套题掰开揉碎聊一聊重点不是报答案而是告诉你每道题背后出题人到底想考你什么以及面对这类笔试怎样用一套可复用的答题框架去应对。1. 先看清全局制造业大厂的前端笔试到底在考什么很多同学在准备校招笔试时有一个误区觉得大厂笔试就是刷LeetCode把算法题刷明白了就能过。但格力这类企业不是纯互联网公司它的前端岗位主要支撑的是官网、电商商城、企业内部管理系统、智能家电配套的H5和小程序等业务。这就决定了它的笔试风格和字节、腾讯完全是两回事——算法题占比不高基础知识和工程能力的考察占了大头。我把这套题的考察结构拆开看大概是这样一个比例考察模块题量占比核心考察目标JavaScript基础30%左右语言特性、运行机制、手写实现浏览器与网络20%左右渲染原理、HTTP协议、性能优化CSS与页面布局15%左右经典布局方案、适配方案框架与工程化20%左右Vue/React用法、构建工具理解算法与逻辑15%左右基础算法、数据结构、编程思维这个分布透露了一个关键信息这套题默认你是一个“能直接上手干活”的前端而不是一个“算法竞赛选手”。它考察的是你在真实业务里每天都会用到的东西——变量提升会不会踩坑、事件循环怎么理解、跨域怎么解决、首屏加载怎么优化。这些知识和你在简历上写的项目经历是直接挂钩的笔试过不了说明你简历里写的“熟练掌握”是要打问号的。另一个值得注意的点是时间分配。整套题大概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到页面渲染完成经历了哪些过程”这是一道没有标准答案的开放题但答得好不好一眼就能看出水平差距。一个合格的答案应该覆盖这么几个阶段URL解析与编码处理DNS域名解析本地缓存、DNS服务器逐级查询TCP连接建立三次握手HTTPS还要加TLS握手发送HTTP请求服务器处理并返回响应浏览器接收响应判断状态码HTML解析构建DOM树CSS解析构建CSSOM树DOM树和CSSOM树合成渲染树布局Layout/Reflow和绘制Paint合成与显示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 先花两分钟通读全卷再做优先级排序拿到卷子后不要立刻动手做第一题先花两分钟快速浏览所有题目按“会做且分值高”和“会做但分值低”以及“完全没思路”三个维度把题目分类。做题顺序建议是先做会做且分值高的手写代码题再做会做的简答题和概念题然后做有一定思路的开放题最后处理完全没思路的题原因是手写代码题靠的是清晰的思维状态放到后面会因为脑力消耗过大而更容易出错。而概念题哪怕只用零散知识也能拿部分分放在中间比较合适。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年最新的面试题你也能从底层原理出发推导出答案而不是背了一堆过时的“八股文”。我个人在实际操作中的体会是笔试准备最好的状态不是“我刷完了多少题”而是“我看到一道前端问题能脱口而出它属于哪个知识模块、核心原理是什么、常见坑在哪里”。达到这个状态笔试就只是走个流程真正有区分度的战场已经转移到了面试环节的项目深挖和系统设计上。最后再分享一个小技巧笔试完之后不管感觉好坏趁记忆还热乎把整张卷子牵涉到的知识点和你的作答情况记录下来。这份记录就是秋招后半段的复习大纲。我当年用这个方法把七八家公司的笔试复盘合成了一份个人错题集靠它高效搞定了后续好几场面试。希望这套思路也能帮你走好秋招这段路。