前阵子在整理旧笔记的时候翻到一套保存下来的“格力2020秋招前端岗笔试题”复盘记录。当时做完这套题我最大的感受是题目本身的难度不算高真正考验的是基础扎不扎实、答题节奏稳不稳。今天刚好趁这个机会把整套题的出题逻辑和关键题目拆一遍聊聊这套题到底在考什么、每个考点背后的原理是什么以及如果你想冲刺类似的制造业头部企业前端岗平时应该怎么准备。这套笔试题比较典型覆盖了JavaScript基础、CSS布局、浏览器原理、Vue框架基础、工程化常识几个大块题型上以选择填空加手写代码为主穿插一两道场景设计题。不管你是今年秋招的应届生还是已经在做前端开发、想拿一套题来检验自己知识体系有没有漏洞的从业者这篇复盘都会有点参考价值。1. 这套题到底在考什么格力秋招前端笔试题的出题逻辑1.1 题型分布与分值设计先说整体结构。格力2020秋招前端岗这套题用的是在线笔试系统总时长120分钟满分100分。题型大致可以分为四块。选择题和判断题占35分内容覆盖JavaScript基础语法、ES6新增特性、浏览器缓存、HTTP状态码、CSS选择器优先级这些。这类题的特点是非常“广”基本不超纲但容易在细节上翻车。填空题占15分主要考查输出结果题给一段代码让你写出执行结果考的是作用域、闭包、事件循环、变量提升这一类JS核心机制。手写代码题占40分是整套题里分值最重的部分。这道题里出现了防抖函数、深拷贝、Promise相关实现还有一道用flex实现特定布局的CSS题。最后还有10分左右的一道场景设计题我记得是让设计一个商品列表页要求考虑数据请求、状态管理、性能优化和异常处理这题考察的是一个前端工程师面对真实业务时的综合设计能力。从分值分配就能看出一个明确信号这套题不追求难题偏题而是想确认你有没有一个完整且正确的前端知识底座。选择填空看的是知识面广不广手写题看的是基本功熟不熟场景题看的是有没有项目思维。1.2 出题人真正想筛选的是什么人很多准备校招的同学有一个误区觉得头部互联网大厂才值得认真准备传统制造企业的笔试草草应付就行。但格力这类企业的前端笔试有一个很实际的考量招进来的人直接会参与官网、商城、售后服务系统这类真实业务的前端开发所以要的是“上手就能干活”的人而不是“理论背得很熟但手写代码就露馅”的人。这意味着什么意味着你在笔试里的每一道手写题阅卷人都会默认你写过类似的功能。比如考防抖函数不是考你知不知道这个名词而是考你有没有在真实项目中处理过搜索框输入、窗口resize这类高频触发事件。考深拷贝是默认你处理过复杂对象的数据备份。考flex布局是默认你接过移动端页面。所以这套题看起来“基础”实际上是拿真实工作里最常见的场景来检验你。另外制造企业的前端团队规模不会特别大分工也不像大厂那么细。这里的前端工程师往往要能独立负责一个完整的业务模块甚至要兼顾一些后端模板渲染、小程序开发的事情。所以笔试里出现工程化相关的问题、出现跨域、性能优化这类“纯前端之外”的问题也就不奇怪了。2. 核心题型逐题拆解从JS基础到框架实战2.1 JS基础与手写题防抖、深拷贝、Promise这套卷子的手写题第一题就是防抖函数。原题大概是实现一个防抖函数debounce要求支持在调用时传入一个immediate参数控制是否立即执行一次。这题我给当时一起准备秋招的朋友讲了不下五遍因为它太典型了——几乎每三场前端笔试里就能碰到一次。防抖的本质是“只认最后一次”。在事件被连续触发时只有最后一次触发后的等待时间结束才会执行目标函数。为什么需要它因为像搜索框输入、窗口缩放这类事件触发频率非常高如果每次触发都去发请求或者执行计算性能会急剧下降。节流则不同它是“固定频率执行”无论触发多少次每隔一段时间执行一次典型场景是滚动加载。回到这题的代码实现。一个支持immediate参数的防抖我当时写的是function debounce(fn, wait 500, immediate false) { let timer null; let isInvoked false; return function(...args) { const context this; if (timer) clearTimeout(timer); if (immediate !isInvoked) { fn.apply(context, args); isInvoked true; return; } timer setTimeout(() { fn.apply(context, args); isInvoked false; timer null; }, wait); }; }阅卷人看这道题的时候重点不是看你写得对不对而是看几个关键细节。第一有没有正确处理this指向如果直接调用fn(...args)当debounce包裹的方法属于某个对象时this就会丢失。第二有没有正确处理参数透传用arguments或者剩余参数而不是写死参数列表。第三有没有考虑定时器的清理与重置避免内存泄漏和重复触发。第四immediate这个参数是否真正实现了“首次立即执行停止触发后恢复初始状态”的逻辑。第二道手写题是深拷贝。这道题坑很多很多同学第一反应是写JSON.parse(JSON.stringify(obj))但这在笔试里拿不到满分甚至会被扣分。原因很简单JSON.stringify在面对undefined、Symbol、函数、正则对象、日期对象、循环引用时都会出问题。比如对象的某个值是new Date()经过JSON.stringify会变成字符串如果是undefined整个属性会被丢弃如果存在循环引用直接报错。比较稳妥的答案是手写一个递归深拷贝至少处理数组、日期、基本类型再进一步可以考虑Map、Set、循环引用。我当时的实现是这样的function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) return target; if (target instanceof Date) return new Date(target.getTime()); if (target instanceof RegExp) return new RegExp(target.source, target.flags); if (target instanceof Map) { const result new Map(); target.forEach((value, key) result.set(key, deepClone(value, map))); return result; } if (target instanceof Set) { const result new Set(); target.forEach(value result.add(deepClone(value, map))); return result; } const existing map.get(target); if (existing) return existing; const result Array.isArray(target) ? [] : {}; map.set(target, result); Reflect.ownKeys(target).forEach(key { result[key] deepClone(target[key], map); }); return result; }这里用到WeakMap来处理循环引用Reflect.ownKeys可以拿到包括Symbol在内的所有键。这题的考点其实不在“写一个深拷贝”而在于你对 JavaScript 内置对象类型的了解程度以及能不能考虑到边界情况。第三题是手写Promise.all或者用 Promise 实现一个串行请求的控制流程。这道题更看重思路而不是完整实现因为Promise.all本身可以调原生的。我当时是直接说明思路接收一个数组遍历每个元素用Promise.resolve包裹然后通过计数器判断所有任务是否都完成。关键是“失败一个就整体 reject”和“保持结果顺序与传入顺序一致”这两个特性。2.2 CSS布局题flex两栏布局和垂直居中的N种方案这套题里有一道CSS手写题要求用flex实现一个经典的页面布局左侧固定宽度200px右侧自适应。这道题出现在笔试里其实是想确认你平时是真的在写页面还是只会对着UI稿“盲写”。答案是页面级布局里最常见的结构之一一个侧边栏加一个主内容区。用flex实现非常直接div classcontainer aside classsidebar/aside main classcontent/main /div.container { display: flex; min-height: 100vh; } .sidebar { flex: 0 0 200px; background: #f5f5f5; } .content { flex: 1; background: #fff; }这里的核心知识点是flex: 0 0 200px的含义。它等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px;意思是这个元素不放大、不缩小、基准宽度固定为200px。配合.content的flex: 1剩余空间就都分配给了主内容区。这道题还可以往外延伸如果左栏要随屏幕宽度变化比如在移动端隐藏应该怎么加媒体查询如果侧边栏本身内部还要垂直居中怎么做如果整个页面是上下结构的后台管理布局右边主内容区内部还要再嵌套一层flex怎么组织这些延伸都是阅卷人在面试环节可能追问的。有个容易忽略的点是老式的float布局和position布局也能实现同样的效果但为什么企业里现在普遍用 flex 或 grid因为 flex 天然支持“剩余空间分配”这个语义不需要通过margin-left: 200px这种人为算宽度的方法来避让侧边栏。代码可读性、可维护性都更好。垂直居中是另一道高频小题。常规方案有flex align-items: center justify-content: center、position: absolute top: 50% transform: translateY(-50%)、grid place-items: center几种。我当时在试卷上写的是flex方案并且额外注明了一个细节flex布局下子元素设置margin: auto也能实现水平垂直居中这是一个很多人不知道但很好用的技巧。2.3 浏览器与网络基础URL解析和跨域问题选择填空里有一道“从输入URL到页面渲染完成经历了哪些过程”的题看起来是老生常谈但在笔试里是拉开差距的地方。很多同学的答案是背出来的只能列出“DNS解析、TCP连接、HTTP请求、渲染”这几个大词稍微问细一点就懵了。我当时的回答分为两个层面。第一层面是网络层面DNS解析域名拿到IP建立TCP连接发起HTTP请求服务器返回响应浏览器拿到HTML后开始解析。第二层面是渲染层面解析HTML构建DOM树解析CSS构建CSSOM树两者合并生成渲染树然后经过布局和绘制最终呈现在屏幕上。这里最关键的是理解“渲染进程”的概念浏览器拿到HTML后不是一次性全部渲染完而是边解析边加载遇到外部CSS和JS会有阻塞行为所以现代页面会把CSS放在head里、JS放在body底部或者给script标签加defer和async。关于跨域的题卷子里考了一个场景前端页面在a.com接口在b.com问如何处理。这题在传统制造企业的后台管理系统里特别常见因为前端部署和API服务经常分开。我当时列了三种方案JSONP、CORS、代理。JSONP已经有些过时但作为知识储备要能说出它的原理——利用script标签不受同源策略限制通过回调函数接收数据。CORS是主流方案后端在响应头里加Access-Control-Allow-Origin。本地开发最常见的则是代理webpack devServer 配置一个proxy把/api开头的请求转发到目标服务器。2.4 Vue与工程化响应式原理和组件通信这套题里有一道Vue的简答题问Vue2的响应式原理。这个知识点已经是校招笔试题里的“钉子户”了几乎每一家考Vue的企业都会问。核心要答到三句话Vue2通过Object.defineProperty对data中的每个属性进行getter和setter拦截当属性被访问时收集依赖Watcher当属性被修改时通知依赖更新从而触发视图重新渲染。这里有个进阶考点是Vue2的defineProperty只能拦截对象的属性访问和修改无法拦截新增属性和删除属性所以Vue提供了Vue.set/this.$set来解决。对于数组defineProperty也无法直接监听通过索引修改元素的操作所以Vue2重写了数组的push、pop、shift、unshift、splice、sort、reverse七个方法。搞清楚这些你才算真正理解了为什么这个题目这么常考。Vue3相关的题也出现了比如问Vue3的响应式基于什么实现。答案是Proxy它可以拦截对象层面的操作包括属性新增和删除所以不再需要Vue.set这种补充方案而且性能更好。当时这道题刚出的时候很多人还不熟悉Vue3能答上来的人不多。组件通信也是常考内容。父子组件通过props传参、通过$emit触发事件回传数据这是基础中的基础。跨层级通信则可以通过provide / inject、Vuex或Pinia、事件总线三种方式。笔试里的场景一般是两个兄弟组件要共享一个数据状态应该怎么做。最合理的答案是引入全局状态管理而不是通过父组件层层中转。答题的时候我会把Vuex的核心概念按流程串一遍组件通过dispatch触发actionsactions通过commit调用mutationsmutations修改state视图层通过getters派生数据。这个流程反映了Vuex单向数据流的设计思想写清楚能明显加分。工程化方面考了一道webpack的loader和plugin有什么区别。这题没有标准答案但也最好答到本质loader是文件处理器的概念负责将不同类型的文件转换为模块本质是一个函数接收文件内容作为参数返回处理后的结果。plugin则是一个插件系统可以在webpack构建的各个生命周期阶段执行自定义任务比如打包后的文件压缩、资源清理、环境变量注入。用生活化的类比就是loader是车间里的加工机器plugin是车间的监工和管理系统负责整个生产流程的调度和优化。3. 考场上怎么分配时间一个亲测有效的答题策略3.1 主观题和客观题的时间边界这套题120分钟如果均匀分配每一块大概30分钟但实际操作下来这样分配风险很大。选择题填空虽然分多但单题耗时可控手写题分值高一旦卡住很容易整段崩盘。我当时给自己定了一个原则客观题不超过45分钟手写题保证70分钟以上剩余5到10分钟检查。为什么客观题要控制在这个时间因为选择题里一定会有几道需要计算的题比如事件循环的输出顺序、CSS选择器优先级计算这类题耗时长且容易算错如果一道题卡了3分钟以上就果断先标记跳过等所有题目做完一遍再回头处理。笔试系统和面试不一样它没有“即时反馈”的压力你需要自己管理节奏。填空题里的输出结果题我强烈建议直接在草稿纸上写代码执行流程一个个变量标记值一层层函数调用画调用栈。尤其遇到闭包相关题目口头心算很容易漏掉执行上下文的变化。我当时就因为在两道输出题上草稿打得不够细错把var和let在循环中的作用域机制搞混白白丢了几分。3.2 手写题的作答顺序和代码组织手写题是整场笔试的胜负手。我的策略是先做最有把握的再做略微陌生的最后做综合性最强的。比如这套题里flex布局那道题对大部分同学来说是最容易拿满分的就先写。防抖函数相对熟悉排第二。深拷贝涉及边界情况多放第三。Promise相关的题假如需要写完整实现放最后。写代码的时候有几点经验值得分享。第一在写代码之前先花30秒在注释或草稿纸上列一下你要处理的边界情况比如参数为空的处理、非对象类型值的处理这样写出来的代码结构会更完整。第二变量命名要清晰fn、wait、result这类语义明确的名称就足够不需要为了炫技写很短的变量名。第三每写完一个函数回头扫一眼有没有return遗漏、有没有在定时器里忘记引用正确的this。还有一个容易被忽略的细节在线笔试系统里有些平台不支持ES6的某些新语法或者代码编辑器会自动做格式调整。遇到这种情况不要慌尽量使用比较通用的语法比如用function而不是箭头函数作为外层函数用var或let而不是const在老旧语法环境下有的平台会显示报错。虽然这类问题在2020年的笔试平台里已经很少见但保守一点总没错。3.3 在线笔试平台那些防不胜防的坑格力的笔试用的是第三方在线笔试平台这类平台在校招里非常普遍。这里有几个实操层面的坑提前知道能帮你避免无谓的丢分。平台一般会开启防作弊模式禁止离开浏览器页面、禁止切换窗口、可能要求打开摄像头。不要在考试过程中尝试搜索答案不仅可能被判作弊而且切屏次数多了会被系统强制交卷这比做错题严重得多。建议提前找一个安静、网络稳定的环境关闭所有无关软件和浏览器插件。有的平台在进入考试之前会要求做摄像头检测和环境检测提前半小时处理完这些流程。还有一个经常踩坑的点代码题的判题方式分为“人工阅卷”和“自动判题”两类。格力这套题里手写题大多是人工阅卷所以代码哪怕跑不出来只要思路清楚、关键步骤有注释也能拿一部分分。但如果题目明确标注了“通过测试用例判定”那一定要在代码里加上输入输出的处理确保可以运行。如果是后者考前花几分钟熟悉平台提供的测试用例调试功能争取每道题都多过几个用例。平台崩溃的概率虽然不高但我也听说过同学在笔试中途断网导致交卷失败的案例。稳妥的做法是在考试开始前用手机热点做后备网络如果笔试过程中发现页面卡顿先截屏保留当前状态再尝试刷新或重进千万不要自己直接关闭页面。4. 这套题背后的完整知识清单照着准备就够了4.1 六大方向高频考点速查表从格力这套题往回推一套合格的前端校招笔试题基本逃不开下面这张知识地图。我按方向整理了高频考点你可以拿来做一次全面自检方向高频考点推荐掌握程度JavaScript基础数据类型、深拷贝、原型链、闭包、作用域、this指向、事件循环不仅能背概念还要能手写实现ES6let/const、箭头函数、解构赋值、Promise、async/await、Module了解每个特性的使用场景和底层原理CSS选择器优先级、盒模型、flex/grid布局、垂直居中、BFC、响应式要能手写常见布局能解释为什么这样写浏览器与网络从URL到页面渲染、HTTP缓存、跨域、TCP连接、状态码能画图、能分步骤讲解每个阶段细节Vue/框架生命周期、响应式原理、组件通信、路由守卫、状态管理要能结合项目经历说明而不只是背概念工程化webpack核心概念、loader与plugin、Git工作流、代码规范理解构建流程会配置常见场景就足够了这张表其实是一个很好的“体检清单”。如果你哪一行看着都比较虚说明你在对应的方面还缺练习。如果每一行都能展开讲出20分钟的内容那笔试基本不会太差。4.2 手写题专项训练法刷三遍而不是背三遍关于手写题的准备我总结了一个“刷三遍”的方法用过之后效果很好。第一遍对着题目在草稿纸上写出完整的实现思路不需要打开编辑器。目的不是把代码写对而是逼自己想清楚“这个函数它要处理什么问题、输入是什么、输出是什么、边界情况有哪几种”。比如防抖函数你的思路要能落到返回一个新函数、这个函数内部有定时器、每次调用时清除上一次定时器、到达等待时间后执行原函数。第二遍照着思路在本地编辑器里写出实现然后自己造几个用例去跑。这一步的重点是验证思路的正确性同时看看有没有漏掉的边界。拿深拷贝来说测试用例至少要有嵌套对象、数组、日期、正则、Map/Set、循环引用、Symbol作为键的情况。第三遍给自己限时15到20分钟在没有任何参考的情况下手写实现最好是在空白文档里写模拟笔试环境。如果三遍都能顺利完成这道题才算真正掌握了。需要说明的是这个方法不要用在所有的前端知识点上只对“高频且大概率手写”的题目值得这样做比如防抖节流、深拷贝、instanceof、new、Promise.all、数组去重、事件总线、简易发布订阅。把这些题刷到条件反射笔试手写题的60%就已经稳了。4.3 八股文不是背出来的是“讲”出来的很多资料把前端面试整理成“八股文”但我个人的经验是八股文是有用的就怕你只会背。面试官稍微追问一个“为什么”就露馅了。比如问你“原型链”你能背出“每个对象都有__proto__属性指向它的构造函数的prototype”这句话但不一定能解释清楚“为什么通过实例可以访问构造函数原型上的方法”。正确的准备方式是每学一个知识点把它讲给一个不懂前端的人听。你会发现一旦你真正理解了一件事你就能用生活化的类比把它讲清楚。比如this的指向可以类比成“谁调用我我就指向谁”事件循环可以类比成“主线程只有一个队列异步任务放到队列里排队执行”prototype可以理解成“所有对象都有一根隐形的绳子沿着绳子能找到大家共享的方法”。能够讲出来说明内化了只会背概念面试官追问两轮就撑不住了。顺着这个思路前面表格里列的那些考点你都可以尝试给自己出一道“五岁小孩都能听懂”的解释题用最直白的话把机制表达清楚。这个方法花时间但收益是最扎实的。5. 从笔试到Offer复盘方法论与进阶路线5.1 笔试结束后怎么评估自己的发挥走出笔试系统之后不要急着对答案或者焦虑先花10分钟做一次快速复盘。我一般是按三个维度自评客观题的正确率有没有达到80%以上手写题有没有哪怕一道是完全卡住没有思路的时间分配是否符合自己的预期有没有因为某一道题打乱整体节奏如果客观题正确率在70%以上、手写题至少完成两道且思路清晰那进面试的概率就比较大。格力这类企业的校招流程一般是笔试通过之后进入技术面试面试官会拿到你的笔试成绩和答卷记录。如果你在某些手写题上写了一半、思路有亮点面试时可能会主动提问给你一次“解释思路”的机会。这也是为什么我前面强调“代码写不完也要留注释”——阅卷人不仅看结果还看过程。如果自评结果不理想那就要立刻开始查漏补缺。把你没做出来的题找出来按考点归类找到它在你知识体系里的位置然后针对性地补。千万不要搞“题海战术”式地继续大量刷题因为笔试暴露出来的问题通常集中在某个具体模块比如事件循环、flex布局、Promise控制并发把这一类问题吃透比泛泛刷100道题有效得多。5.2 用笔试带出面试准备的大方向笔试和面试之间有一条很长的隐藏线索笔试考的知识点面试会换个方式继续考。比如笔试考了深拷贝面试环节很可能会让你现场讲一讲JSON.stringify深拷贝有什么缺陷笔试考了Vue响应式面试可能会追问“为什么Vue3用Proxy重写响应式”笔试考了跨域面试可能扩展到“你们项目里前后端联调是怎么解决跨域的”。所以笔试结束后到一个比较好的面试准备策略就是把笔试里出现过的每个知识点向外扩展一层。防抖节流对应的是性能优化要能延伸到项目里哪些场景用了为什么用flex布局对应的是CSS布局体系要能延伸出页面排版由浅入深的演进过程跨域对应的是浏览器同源策略要能延伸到Cookie、token、常见鉴权方案的原理。项目经历也是一个躲不开的环节。如果你在简历里写了一个商品列表页项目面试官大概率会按前面场景设计题的思路问你数据从哪来加载状态怎么管理图片懒加载怎么处理列表滚动性能怎么优化登录态怎么维持这些问题本质上就是笔试场景设计题的口头版。建议把简历里的每个项目都写成“业务背景、技术方案、遇到的问题、最终效果”四个段落准备得越细面试越自信。5.3 针对格力这类企业前端岗的长期学习路线如果你特别想去格力这种传统制造业的头部企业做前端除了通用的前端知识还可以往几个方向做深一点。第一个方向是Vue技术栈的深度使用。格力前端岗的JD里明确写了Vue所以Vue全家桶要非常熟练包括Vue Router、Vuex或Pinia、Element UI等组件库还要了解Vite构建工具和Composition API。平时练习时多写几个完整的中后台项目比如后台管理系统的商品管理、订单管理、用户管理模块练到“不用查文档就能开车”的程度。第二个方向是性能优化。制造企业的官网和商城页面通常承载着品牌形象页面加载速度和SEO效果都很重要所以在SSR服务端渲染、首屏加载优化、资源压缩与拆包、图片格式选择这些方面有经验会是非常大的加分项。可以找一个真实网站做性能分析练习用Lighthouse测分、看Network面板的耗时、分析阻塞渲染的资源然后逐个优化并记录效果。第三个方向是工程化与协作能力。制造业企业里前端团队往往负责多条业务线大家会共用一套组件库和构建配置。掌握组件封装、npm包发布、Git多人协作流程、代码规范与Code Review体系能让你在加入团队后更顺畅地融入。如果能在简历里体现“独立搭建前端工程”或者“优化了团队的构建流程”面试官会认为你不是一个单纯写页面的人。最后再分享一点小技巧这套题复盘到这儿其实可以停笔了。但我想再多说一句关于笔试准备的体会做题的时候不要把自己当成“答题的人”试着切换到“出题的人”的视角去想问题。每道题背后都有一个明确的考察意图。防抖函数在考察什么是考察你有没有做过搜索框实时查询。深拷贝在考察什么是考察你有没有处理过复杂对象的数据备份。flex布局在考察什么是考察你有没有真正排版过实际页面。只要你顺着这个逻辑去准备就不容易陷入“背题”的泥潭。我当初准备秋招的时候把每一次笔试都当成一次免费的体检做错的每一道题都认真录进错题本等秋招结束时翻看发现自己其实在短短几个月里进步非常大。这套格力2020秋招前端岗笔试题后来也成为我推荐给学弟学妹们的经典练习卷。希望这篇复盘也能帮到你祝你笔试顺利offer到手。 格力2020秋招前端笔试题复盘：核心考点与备考策略
前阵子在整理旧笔记的时候翻到一套保存下来的“格力2020秋招前端岗笔试题”复盘记录。当时做完这套题我最大的感受是题目本身的难度不算高真正考验的是基础扎不扎实、答题节奏稳不稳。今天刚好趁这个机会把整套题的出题逻辑和关键题目拆一遍聊聊这套题到底在考什么、每个考点背后的原理是什么以及如果你想冲刺类似的制造业头部企业前端岗平时应该怎么准备。这套笔试题比较典型覆盖了JavaScript基础、CSS布局、浏览器原理、Vue框架基础、工程化常识几个大块题型上以选择填空加手写代码为主穿插一两道场景设计题。不管你是今年秋招的应届生还是已经在做前端开发、想拿一套题来检验自己知识体系有没有漏洞的从业者这篇复盘都会有点参考价值。1. 这套题到底在考什么格力秋招前端笔试题的出题逻辑1.1 题型分布与分值设计先说整体结构。格力2020秋招前端岗这套题用的是在线笔试系统总时长120分钟满分100分。题型大致可以分为四块。选择题和判断题占35分内容覆盖JavaScript基础语法、ES6新增特性、浏览器缓存、HTTP状态码、CSS选择器优先级这些。这类题的特点是非常“广”基本不超纲但容易在细节上翻车。填空题占15分主要考查输出结果题给一段代码让你写出执行结果考的是作用域、闭包、事件循环、变量提升这一类JS核心机制。手写代码题占40分是整套题里分值最重的部分。这道题里出现了防抖函数、深拷贝、Promise相关实现还有一道用flex实现特定布局的CSS题。最后还有10分左右的一道场景设计题我记得是让设计一个商品列表页要求考虑数据请求、状态管理、性能优化和异常处理这题考察的是一个前端工程师面对真实业务时的综合设计能力。从分值分配就能看出一个明确信号这套题不追求难题偏题而是想确认你有没有一个完整且正确的前端知识底座。选择填空看的是知识面广不广手写题看的是基本功熟不熟场景题看的是有没有项目思维。1.2 出题人真正想筛选的是什么人很多准备校招的同学有一个误区觉得头部互联网大厂才值得认真准备传统制造企业的笔试草草应付就行。但格力这类企业的前端笔试有一个很实际的考量招进来的人直接会参与官网、商城、售后服务系统这类真实业务的前端开发所以要的是“上手就能干活”的人而不是“理论背得很熟但手写代码就露馅”的人。这意味着什么意味着你在笔试里的每一道手写题阅卷人都会默认你写过类似的功能。比如考防抖函数不是考你知不知道这个名词而是考你有没有在真实项目中处理过搜索框输入、窗口resize这类高频触发事件。考深拷贝是默认你处理过复杂对象的数据备份。考flex布局是默认你接过移动端页面。所以这套题看起来“基础”实际上是拿真实工作里最常见的场景来检验你。另外制造企业的前端团队规模不会特别大分工也不像大厂那么细。这里的前端工程师往往要能独立负责一个完整的业务模块甚至要兼顾一些后端模板渲染、小程序开发的事情。所以笔试里出现工程化相关的问题、出现跨域、性能优化这类“纯前端之外”的问题也就不奇怪了。2. 核心题型逐题拆解从JS基础到框架实战2.1 JS基础与手写题防抖、深拷贝、Promise这套卷子的手写题第一题就是防抖函数。原题大概是实现一个防抖函数debounce要求支持在调用时传入一个immediate参数控制是否立即执行一次。这题我给当时一起准备秋招的朋友讲了不下五遍因为它太典型了——几乎每三场前端笔试里就能碰到一次。防抖的本质是“只认最后一次”。在事件被连续触发时只有最后一次触发后的等待时间结束才会执行目标函数。为什么需要它因为像搜索框输入、窗口缩放这类事件触发频率非常高如果每次触发都去发请求或者执行计算性能会急剧下降。节流则不同它是“固定频率执行”无论触发多少次每隔一段时间执行一次典型场景是滚动加载。回到这题的代码实现。一个支持immediate参数的防抖我当时写的是function debounce(fn, wait 500, immediate false) { let timer null; let isInvoked false; return function(...args) { const context this; if (timer) clearTimeout(timer); if (immediate !isInvoked) { fn.apply(context, args); isInvoked true; return; } timer setTimeout(() { fn.apply(context, args); isInvoked false; timer null; }, wait); }; }阅卷人看这道题的时候重点不是看你写得对不对而是看几个关键细节。第一有没有正确处理this指向如果直接调用fn(...args)当debounce包裹的方法属于某个对象时this就会丢失。第二有没有正确处理参数透传用arguments或者剩余参数而不是写死参数列表。第三有没有考虑定时器的清理与重置避免内存泄漏和重复触发。第四immediate这个参数是否真正实现了“首次立即执行停止触发后恢复初始状态”的逻辑。第二道手写题是深拷贝。这道题坑很多很多同学第一反应是写JSON.parse(JSON.stringify(obj))但这在笔试里拿不到满分甚至会被扣分。原因很简单JSON.stringify在面对undefined、Symbol、函数、正则对象、日期对象、循环引用时都会出问题。比如对象的某个值是new Date()经过JSON.stringify会变成字符串如果是undefined整个属性会被丢弃如果存在循环引用直接报错。比较稳妥的答案是手写一个递归深拷贝至少处理数组、日期、基本类型再进一步可以考虑Map、Set、循环引用。我当时的实现是这样的function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) return target; if (target instanceof Date) return new Date(target.getTime()); if (target instanceof RegExp) return new RegExp(target.source, target.flags); if (target instanceof Map) { const result new Map(); target.forEach((value, key) result.set(key, deepClone(value, map))); return result; } if (target instanceof Set) { const result new Set(); target.forEach(value result.add(deepClone(value, map))); return result; } const existing map.get(target); if (existing) return existing; const result Array.isArray(target) ? [] : {}; map.set(target, result); Reflect.ownKeys(target).forEach(key { result[key] deepClone(target[key], map); }); return result; }这里用到WeakMap来处理循环引用Reflect.ownKeys可以拿到包括Symbol在内的所有键。这题的考点其实不在“写一个深拷贝”而在于你对 JavaScript 内置对象类型的了解程度以及能不能考虑到边界情况。第三题是手写Promise.all或者用 Promise 实现一个串行请求的控制流程。这道题更看重思路而不是完整实现因为Promise.all本身可以调原生的。我当时是直接说明思路接收一个数组遍历每个元素用Promise.resolve包裹然后通过计数器判断所有任务是否都完成。关键是“失败一个就整体 reject”和“保持结果顺序与传入顺序一致”这两个特性。2.2 CSS布局题flex两栏布局和垂直居中的N种方案这套题里有一道CSS手写题要求用flex实现一个经典的页面布局左侧固定宽度200px右侧自适应。这道题出现在笔试里其实是想确认你平时是真的在写页面还是只会对着UI稿“盲写”。答案是页面级布局里最常见的结构之一一个侧边栏加一个主内容区。用flex实现非常直接div classcontainer aside classsidebar/aside main classcontent/main /div.container { display: flex; min-height: 100vh; } .sidebar { flex: 0 0 200px; background: #f5f5f5; } .content { flex: 1; background: #fff; }这里的核心知识点是flex: 0 0 200px的含义。它等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px;意思是这个元素不放大、不缩小、基准宽度固定为200px。配合.content的flex: 1剩余空间就都分配给了主内容区。这道题还可以往外延伸如果左栏要随屏幕宽度变化比如在移动端隐藏应该怎么加媒体查询如果侧边栏本身内部还要垂直居中怎么做如果整个页面是上下结构的后台管理布局右边主内容区内部还要再嵌套一层flex怎么组织这些延伸都是阅卷人在面试环节可能追问的。有个容易忽略的点是老式的float布局和position布局也能实现同样的效果但为什么企业里现在普遍用 flex 或 grid因为 flex 天然支持“剩余空间分配”这个语义不需要通过margin-left: 200px这种人为算宽度的方法来避让侧边栏。代码可读性、可维护性都更好。垂直居中是另一道高频小题。常规方案有flex align-items: center justify-content: center、position: absolute top: 50% transform: translateY(-50%)、grid place-items: center几种。我当时在试卷上写的是flex方案并且额外注明了一个细节flex布局下子元素设置margin: auto也能实现水平垂直居中这是一个很多人不知道但很好用的技巧。2.3 浏览器与网络基础URL解析和跨域问题选择填空里有一道“从输入URL到页面渲染完成经历了哪些过程”的题看起来是老生常谈但在笔试里是拉开差距的地方。很多同学的答案是背出来的只能列出“DNS解析、TCP连接、HTTP请求、渲染”这几个大词稍微问细一点就懵了。我当时的回答分为两个层面。第一层面是网络层面DNS解析域名拿到IP建立TCP连接发起HTTP请求服务器返回响应浏览器拿到HTML后开始解析。第二层面是渲染层面解析HTML构建DOM树解析CSS构建CSSOM树两者合并生成渲染树然后经过布局和绘制最终呈现在屏幕上。这里最关键的是理解“渲染进程”的概念浏览器拿到HTML后不是一次性全部渲染完而是边解析边加载遇到外部CSS和JS会有阻塞行为所以现代页面会把CSS放在head里、JS放在body底部或者给script标签加defer和async。关于跨域的题卷子里考了一个场景前端页面在a.com接口在b.com问如何处理。这题在传统制造企业的后台管理系统里特别常见因为前端部署和API服务经常分开。我当时列了三种方案JSONP、CORS、代理。JSONP已经有些过时但作为知识储备要能说出它的原理——利用script标签不受同源策略限制通过回调函数接收数据。CORS是主流方案后端在响应头里加Access-Control-Allow-Origin。本地开发最常见的则是代理webpack devServer 配置一个proxy把/api开头的请求转发到目标服务器。2.4 Vue与工程化响应式原理和组件通信这套题里有一道Vue的简答题问Vue2的响应式原理。这个知识点已经是校招笔试题里的“钉子户”了几乎每一家考Vue的企业都会问。核心要答到三句话Vue2通过Object.defineProperty对data中的每个属性进行getter和setter拦截当属性被访问时收集依赖Watcher当属性被修改时通知依赖更新从而触发视图重新渲染。这里有个进阶考点是Vue2的defineProperty只能拦截对象的属性访问和修改无法拦截新增属性和删除属性所以Vue提供了Vue.set/this.$set来解决。对于数组defineProperty也无法直接监听通过索引修改元素的操作所以Vue2重写了数组的push、pop、shift、unshift、splice、sort、reverse七个方法。搞清楚这些你才算真正理解了为什么这个题目这么常考。Vue3相关的题也出现了比如问Vue3的响应式基于什么实现。答案是Proxy它可以拦截对象层面的操作包括属性新增和删除所以不再需要Vue.set这种补充方案而且性能更好。当时这道题刚出的时候很多人还不熟悉Vue3能答上来的人不多。组件通信也是常考内容。父子组件通过props传参、通过$emit触发事件回传数据这是基础中的基础。跨层级通信则可以通过provide / inject、Vuex或Pinia、事件总线三种方式。笔试里的场景一般是两个兄弟组件要共享一个数据状态应该怎么做。最合理的答案是引入全局状态管理而不是通过父组件层层中转。答题的时候我会把Vuex的核心概念按流程串一遍组件通过dispatch触发actionsactions通过commit调用mutationsmutations修改state视图层通过getters派生数据。这个流程反映了Vuex单向数据流的设计思想写清楚能明显加分。工程化方面考了一道webpack的loader和plugin有什么区别。这题没有标准答案但也最好答到本质loader是文件处理器的概念负责将不同类型的文件转换为模块本质是一个函数接收文件内容作为参数返回处理后的结果。plugin则是一个插件系统可以在webpack构建的各个生命周期阶段执行自定义任务比如打包后的文件压缩、资源清理、环境变量注入。用生活化的类比就是loader是车间里的加工机器plugin是车间的监工和管理系统负责整个生产流程的调度和优化。3. 考场上怎么分配时间一个亲测有效的答题策略3.1 主观题和客观题的时间边界这套题120分钟如果均匀分配每一块大概30分钟但实际操作下来这样分配风险很大。选择题填空虽然分多但单题耗时可控手写题分值高一旦卡住很容易整段崩盘。我当时给自己定了一个原则客观题不超过45分钟手写题保证70分钟以上剩余5到10分钟检查。为什么客观题要控制在这个时间因为选择题里一定会有几道需要计算的题比如事件循环的输出顺序、CSS选择器优先级计算这类题耗时长且容易算错如果一道题卡了3分钟以上就果断先标记跳过等所有题目做完一遍再回头处理。笔试系统和面试不一样它没有“即时反馈”的压力你需要自己管理节奏。填空题里的输出结果题我强烈建议直接在草稿纸上写代码执行流程一个个变量标记值一层层函数调用画调用栈。尤其遇到闭包相关题目口头心算很容易漏掉执行上下文的变化。我当时就因为在两道输出题上草稿打得不够细错把var和let在循环中的作用域机制搞混白白丢了几分。3.2 手写题的作答顺序和代码组织手写题是整场笔试的胜负手。我的策略是先做最有把握的再做略微陌生的最后做综合性最强的。比如这套题里flex布局那道题对大部分同学来说是最容易拿满分的就先写。防抖函数相对熟悉排第二。深拷贝涉及边界情况多放第三。Promise相关的题假如需要写完整实现放最后。写代码的时候有几点经验值得分享。第一在写代码之前先花30秒在注释或草稿纸上列一下你要处理的边界情况比如参数为空的处理、非对象类型值的处理这样写出来的代码结构会更完整。第二变量命名要清晰fn、wait、result这类语义明确的名称就足够不需要为了炫技写很短的变量名。第三每写完一个函数回头扫一眼有没有return遗漏、有没有在定时器里忘记引用正确的this。还有一个容易被忽略的细节在线笔试系统里有些平台不支持ES6的某些新语法或者代码编辑器会自动做格式调整。遇到这种情况不要慌尽量使用比较通用的语法比如用function而不是箭头函数作为外层函数用var或let而不是const在老旧语法环境下有的平台会显示报错。虽然这类问题在2020年的笔试平台里已经很少见但保守一点总没错。3.3 在线笔试平台那些防不胜防的坑格力的笔试用的是第三方在线笔试平台这类平台在校招里非常普遍。这里有几个实操层面的坑提前知道能帮你避免无谓的丢分。平台一般会开启防作弊模式禁止离开浏览器页面、禁止切换窗口、可能要求打开摄像头。不要在考试过程中尝试搜索答案不仅可能被判作弊而且切屏次数多了会被系统强制交卷这比做错题严重得多。建议提前找一个安静、网络稳定的环境关闭所有无关软件和浏览器插件。有的平台在进入考试之前会要求做摄像头检测和环境检测提前半小时处理完这些流程。还有一个经常踩坑的点代码题的判题方式分为“人工阅卷”和“自动判题”两类。格力这套题里手写题大多是人工阅卷所以代码哪怕跑不出来只要思路清楚、关键步骤有注释也能拿一部分分。但如果题目明确标注了“通过测试用例判定”那一定要在代码里加上输入输出的处理确保可以运行。如果是后者考前花几分钟熟悉平台提供的测试用例调试功能争取每道题都多过几个用例。平台崩溃的概率虽然不高但我也听说过同学在笔试中途断网导致交卷失败的案例。稳妥的做法是在考试开始前用手机热点做后备网络如果笔试过程中发现页面卡顿先截屏保留当前状态再尝试刷新或重进千万不要自己直接关闭页面。4. 这套题背后的完整知识清单照着准备就够了4.1 六大方向高频考点速查表从格力这套题往回推一套合格的前端校招笔试题基本逃不开下面这张知识地图。我按方向整理了高频考点你可以拿来做一次全面自检方向高频考点推荐掌握程度JavaScript基础数据类型、深拷贝、原型链、闭包、作用域、this指向、事件循环不仅能背概念还要能手写实现ES6let/const、箭头函数、解构赋值、Promise、async/await、Module了解每个特性的使用场景和底层原理CSS选择器优先级、盒模型、flex/grid布局、垂直居中、BFC、响应式要能手写常见布局能解释为什么这样写浏览器与网络从URL到页面渲染、HTTP缓存、跨域、TCP连接、状态码能画图、能分步骤讲解每个阶段细节Vue/框架生命周期、响应式原理、组件通信、路由守卫、状态管理要能结合项目经历说明而不只是背概念工程化webpack核心概念、loader与plugin、Git工作流、代码规范理解构建流程会配置常见场景就足够了这张表其实是一个很好的“体检清单”。如果你哪一行看着都比较虚说明你在对应的方面还缺练习。如果每一行都能展开讲出20分钟的内容那笔试基本不会太差。4.2 手写题专项训练法刷三遍而不是背三遍关于手写题的准备我总结了一个“刷三遍”的方法用过之后效果很好。第一遍对着题目在草稿纸上写出完整的实现思路不需要打开编辑器。目的不是把代码写对而是逼自己想清楚“这个函数它要处理什么问题、输入是什么、输出是什么、边界情况有哪几种”。比如防抖函数你的思路要能落到返回一个新函数、这个函数内部有定时器、每次调用时清除上一次定时器、到达等待时间后执行原函数。第二遍照着思路在本地编辑器里写出实现然后自己造几个用例去跑。这一步的重点是验证思路的正确性同时看看有没有漏掉的边界。拿深拷贝来说测试用例至少要有嵌套对象、数组、日期、正则、Map/Set、循环引用、Symbol作为键的情况。第三遍给自己限时15到20分钟在没有任何参考的情况下手写实现最好是在空白文档里写模拟笔试环境。如果三遍都能顺利完成这道题才算真正掌握了。需要说明的是这个方法不要用在所有的前端知识点上只对“高频且大概率手写”的题目值得这样做比如防抖节流、深拷贝、instanceof、new、Promise.all、数组去重、事件总线、简易发布订阅。把这些题刷到条件反射笔试手写题的60%就已经稳了。4.3 八股文不是背出来的是“讲”出来的很多资料把前端面试整理成“八股文”但我个人的经验是八股文是有用的就怕你只会背。面试官稍微追问一个“为什么”就露馅了。比如问你“原型链”你能背出“每个对象都有__proto__属性指向它的构造函数的prototype”这句话但不一定能解释清楚“为什么通过实例可以访问构造函数原型上的方法”。正确的准备方式是每学一个知识点把它讲给一个不懂前端的人听。你会发现一旦你真正理解了一件事你就能用生活化的类比把它讲清楚。比如this的指向可以类比成“谁调用我我就指向谁”事件循环可以类比成“主线程只有一个队列异步任务放到队列里排队执行”prototype可以理解成“所有对象都有一根隐形的绳子沿着绳子能找到大家共享的方法”。能够讲出来说明内化了只会背概念面试官追问两轮就撑不住了。顺着这个思路前面表格里列的那些考点你都可以尝试给自己出一道“五岁小孩都能听懂”的解释题用最直白的话把机制表达清楚。这个方法花时间但收益是最扎实的。5. 从笔试到Offer复盘方法论与进阶路线5.1 笔试结束后怎么评估自己的发挥走出笔试系统之后不要急着对答案或者焦虑先花10分钟做一次快速复盘。我一般是按三个维度自评客观题的正确率有没有达到80%以上手写题有没有哪怕一道是完全卡住没有思路的时间分配是否符合自己的预期有没有因为某一道题打乱整体节奏如果客观题正确率在70%以上、手写题至少完成两道且思路清晰那进面试的概率就比较大。格力这类企业的校招流程一般是笔试通过之后进入技术面试面试官会拿到你的笔试成绩和答卷记录。如果你在某些手写题上写了一半、思路有亮点面试时可能会主动提问给你一次“解释思路”的机会。这也是为什么我前面强调“代码写不完也要留注释”——阅卷人不仅看结果还看过程。如果自评结果不理想那就要立刻开始查漏补缺。把你没做出来的题找出来按考点归类找到它在你知识体系里的位置然后针对性地补。千万不要搞“题海战术”式地继续大量刷题因为笔试暴露出来的问题通常集中在某个具体模块比如事件循环、flex布局、Promise控制并发把这一类问题吃透比泛泛刷100道题有效得多。5.2 用笔试带出面试准备的大方向笔试和面试之间有一条很长的隐藏线索笔试考的知识点面试会换个方式继续考。比如笔试考了深拷贝面试环节很可能会让你现场讲一讲JSON.stringify深拷贝有什么缺陷笔试考了Vue响应式面试可能会追问“为什么Vue3用Proxy重写响应式”笔试考了跨域面试可能扩展到“你们项目里前后端联调是怎么解决跨域的”。所以笔试结束后到一个比较好的面试准备策略就是把笔试里出现过的每个知识点向外扩展一层。防抖节流对应的是性能优化要能延伸到项目里哪些场景用了为什么用flex布局对应的是CSS布局体系要能延伸出页面排版由浅入深的演进过程跨域对应的是浏览器同源策略要能延伸到Cookie、token、常见鉴权方案的原理。项目经历也是一个躲不开的环节。如果你在简历里写了一个商品列表页项目面试官大概率会按前面场景设计题的思路问你数据从哪来加载状态怎么管理图片懒加载怎么处理列表滚动性能怎么优化登录态怎么维持这些问题本质上就是笔试场景设计题的口头版。建议把简历里的每个项目都写成“业务背景、技术方案、遇到的问题、最终效果”四个段落准备得越细面试越自信。5.3 针对格力这类企业前端岗的长期学习路线如果你特别想去格力这种传统制造业的头部企业做前端除了通用的前端知识还可以往几个方向做深一点。第一个方向是Vue技术栈的深度使用。格力前端岗的JD里明确写了Vue所以Vue全家桶要非常熟练包括Vue Router、Vuex或Pinia、Element UI等组件库还要了解Vite构建工具和Composition API。平时练习时多写几个完整的中后台项目比如后台管理系统的商品管理、订单管理、用户管理模块练到“不用查文档就能开车”的程度。第二个方向是性能优化。制造企业的官网和商城页面通常承载着品牌形象页面加载速度和SEO效果都很重要所以在SSR服务端渲染、首屏加载优化、资源压缩与拆包、图片格式选择这些方面有经验会是非常大的加分项。可以找一个真实网站做性能分析练习用Lighthouse测分、看Network面板的耗时、分析阻塞渲染的资源然后逐个优化并记录效果。第三个方向是工程化与协作能力。制造业企业里前端团队往往负责多条业务线大家会共用一套组件库和构建配置。掌握组件封装、npm包发布、Git多人协作流程、代码规范与Code Review体系能让你在加入团队后更顺畅地融入。如果能在简历里体现“独立搭建前端工程”或者“优化了团队的构建流程”面试官会认为你不是一个单纯写页面的人。最后再分享一点小技巧这套题复盘到这儿其实可以停笔了。但我想再多说一句关于笔试准备的体会做题的时候不要把自己当成“答题的人”试着切换到“出题的人”的视角去想问题。每道题背后都有一个明确的考察意图。防抖函数在考察什么是考察你有没有做过搜索框实时查询。深拷贝在考察什么是考察你有没有处理过复杂对象的数据备份。flex布局在考察什么是考察你有没有真正排版过实际页面。只要你顺着这个逻辑去准备就不容易陷入“背题”的泥潭。我当初准备秋招的时候把每一次笔试都当成一次免费的体检做错的每一道题都认真录进错题本等秋招结束时翻看发现自己其实在短短几个月里进步非常大。这套格力2020秋招前端岗笔试题后来也成为我推荐给学弟学妹们的经典练习卷。希望这篇复盘也能帮到你祝你笔试顺利offer到手。