每年一到七八月秋招的气氛就开始热起来。要说互联网技术岗里投递人数最多、竞争最卷的方向Web前端绝对排在前列。前端岗位的笔试不像后端那样动辄系统设计、海量算法但考察范围极广从HTML/CSS到JavaScript底层原理从浏览器渲染到网络协议甚至还会掺几道算法题很多同学一不留神就挂在第一轮笔试上。我参加过2023年度小满秋招Web前端岗的第一批笔试整体感觉是题量不小、范围很杂、编程题比想象中多。这篇文章就围绕这场笔试把我经历的题型、考点、答题节奏和踩坑点完整复盘一遍给正在准备秋招的朋友一个参考。内容不只针对小满这一家基本可以延伸到大多数互联网公司前端岗的笔试题型有准备的价值。1. 整体设计与思路拆解前端笔试到底在考什么1.1 前端笔试的考察逻辑和筛选目标先聊一个大家最容易忽略的问题笔试到底想筛什么人很多人以为笔试就是考技术深度其实不完全对。校招笔试面对的是一大批应届生公司要的不是“什么都会的天才”而是“基础扎实、能干活、有潜力”的候选人。所以前端笔试题的设计通常遵循三个原则第一是覆盖广度优先。一道题可能不深但考点一定要多。比如一个JavaScript题目可能同时涉及变量提升、闭包、事件循环和this指向目的就是快速判断你的知识面有没有死角。第二是工程能力前置考察。前端笔试不是在学校里做期末卷很多公司会把真实业务里踩过的坑包装成笔试题。比如“实现一个带并发限制的异步请求调度器”其实就是业务中控制请求并发数的简化版。这类题看的是你有没有工程思维而不仅仅是语法熟练度。第三是编程基本功不能拖后腿。虽然前端不像后端那样强调算法但剑指Offer难度级别的题目还是会出现。小满这场笔试的编程题一共有四道两道偏纯JavaScript手写两道偏数据结构和算法整体难度在中低档但写不出来的人比例仍然很高。1.2 小满笔试的题目结构和时间分配我看到卷子的第一反应是时间紧。90分钟45道题其中选择题30道、简答题5道、编程题4道、附加题6道。这个题量放在前端岗位里属于中等偏上如果前面选择题磨蹭太久后面编程题基本没时间写。题型分布大致是这样的题型数量单题分值涉及知识点单选题202分HTML、CSS、JavaScript基础多选题103分浏览器原理、ES6、工程化简答题54分概念解释、方案设计编程题410分手写代码、算法、数据结构附加题6选做开放性问题、综合设计从分值占比来看编程题是最大头四道题各10分。也就是说如果编程题只做出一道这份卷子基本就告别面试了。我的答题策略是先快速扫一遍选择题遇到不确定的先标记跳过确保留给编程题至少40分钟。1.3 为什么前端笔试会这样设计小满作为一家面向C端用户的互联网公司前端团队规模不小业务场景覆盖移动端H5、后台管理系统、可视化大屏等。所以笔试题目偏重基础的同时也会加入一些跟业务贴近的场景题比如“首屏加载性能优化方案”“大列表渲染卡顿如何解决”这类问题。另外我注意到他们的多选题几乎都是“以下哪些说法正确”的形式这种题很容易丢分。原因很简单少选不得分多选也不得分。它考察的不只是你记得多少知识点而是你对概念边界的理解够不够准确。这一点和很多公司的出题思路是一致的。前端知识点看似零散但核心主线很清晰从输入URL到页面展示的完整链路、JavaScript运行时机制、CSS布局与渲染、网络请求与缓存、前端工程化与性能优化。笔试题目再变化基本都不会跳出这条主线。2. 核心知识考点拆解哪些题最容易拉开差距2.1 JavaScript基础与进阶考点重点分析JavaScript相关题目在整张卷子中占比接近四成是绝对的核心。小满这套笔试题里JavaScript考点覆盖了以下几个高频区块。变量提升和暂时性死区几乎是必考题考法通常是给一段代码让你判断输出结果比如console.log(a); // undefined var a 1; console.log(b); // ReferenceError: Cannot access b before initialization let b 2;var声明的变量会被提升到作用域顶部但赋值不提升所以第一次打印是undefined。而let和const存在暂时性死区声明之前访问会直接报错。这个考点看似基础却是很多人两秒钟就丢分的盲区。闭包和this指向也是重头戏。有一道题我记得很清楚考察的是for循环中使用var和let定义变量的区别配合setTimeout输出结果。核心结论大家都背过但真正理解背后原理的人不多。var定义的是函数级作用域循环结束之后变量i已经变成最终值let定义的是块级作用域每次循环都会生成一个新的绑定所以输出结果是0、1、2而不是3、3、3。事件循环机制在选择题和简答题里都出现了。它考察的是宏任务和微任务的执行顺序。有一个典型的例子setTimeout(() console.log(timeout), 0); Promise.resolve().then(() console.log(promise)); console.log(sync);正确输出顺序是sync、promise、timeout。原因在于同步代码先执行然后清空微任务队列最后才轮到宏任务。Promise的then回调属于微任务setTimeout的回调属于宏任务这个优先级关系必须清楚。2.2 HTML与CSS考察方向和高频陷阱HTML部分的题目非常常规主要考察语义化标签的使用场景、meta标签的作用、HTML5新增的表单属性等。比如article、section、aside的区别canvas和svg的使用差异datalist和select的区别这些都是送分题但基础不牢的人会在这上面翻车。CSS部分才是真正拉开差距的地方。小满的笔试题里出了一道经典的垂直居中方案选择选项有五种写法要在其中选出可以保证无论元素尺寸如何变化都居中的方案。这里我建议大家把以下三种方案烂熟于心/* 方案一flex布局 */ .parent { display: flex; align-items: center; justify-content: center; } /* 方案二绝对定位 transform */ .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 方案三grid布局 */ .parent { display: grid; place-items: center; }另外还有一个高频考点是BFC块级格式化上下文。题目问的是如何清除浮动、防止margin合并选项里列出了overflow: hidden、display: inline-block、display: flex、float: left等方案。要记住创建BFC的方式不止一种但不同方式带来的副作用不同比如float会影响元素自身的定位方式flex会改变子元素的布局模型实际使用时要结合场景选择。Flex布局和Grid布局的对比也出现了。这里我建议大家不仅要会写还要能说出两者的典型应用场景。Flex适合一维布局主轴方向明确比如导航栏、按钮组Grid适合二维布局行列同时控制比如整个页面骨架、卡片网格。2.3 网络与浏览器考点面试官的隐藏爱好网络协议在前端笔试中出现频率非常高这次也不例外。HTTP缓存是必考内容考法一般是给你一张请求-响应图判断哪些资源命中强缓存、哪些命中协商缓存。要理解Cache-Control和ETag/If-None-Match的配合关系Cache-Control: max-age3600 表示资源在3600秒内直接使用本地缓存不发请求缓存过期后浏览器带上 If-None-Match值来自响应头里的 ETag发请求服务器返回 304 则继续用本地缓存如果服务器返回 200 和新资源则更新缓存。TCP三次握手和四次挥手也出现了但考得非常浅主要是握手过程的状态迁移和为什么需要三次。这里有个答题技巧不要只背“SYN、SYN-ACK、ACK”这个流程最好能说出来为什么两次不行、为什么要第四次挥手这样简答题才能拿高分。浏览器渲染流程是简答题的常客。题目问的是“从输入URL到页面展示发生了什么”这道题非常经典但很多人答得不够完整。标准的答题框架至少包含六个环节DNS解析、建立TCP连接、发送HTTP请求、服务器响应并返回HTML、浏览器解析HTML构建DOM树、解析CSS构建CSSOM树、合成渲染树、布局计算、绘制、合成。除了主流程建议加上“遇到script标签时解析会阻塞”和“defer和async的区别”这样能体现你考虑到了性能因素。3. 实操过程与核心环节实现3.1 选择题和简答题的答题策略进入笔试页面之后我先花了两分钟把全部题目浏览了一遍。这是我从几次笔试中总结出来的习惯千万不要拿到卷子就从第一题开始死磕。快速浏览的价值在于了解编程题的难度先判断哪道题是自己有把握做出来的标记出选择题里的难题避免在单个题目上浪费太多时间对整场考试的节奏心中有数。小满笔试的选择题部分我实际用了大约25分钟。这个速度不算快因为多选题非常烧脑。多选题一定要注意题目里的“正确”“错误”“包括”“不包括”这类词汇。很多时候两个选项意思完全相反必须看清楚题目到底让你选什么。简答题有五道我大致回忆了其中几道题目第一道是“解释浏览器同源策略以及跨域解决方案”。跨域问题属于前端必知必会答题时建议先解释同源策略的定义和限制再分三种场景展开JSONP适用于GET请求CORS适用于需要通过后端配置响应头的场景代理转发适用于开发环境。如果能提一下postMessage和WebSocket的场景会显得知识面更广。第二道是“讲讲你对前端工程化的理解”。这种题每个面试官喜好不同但核心离不开模块化、组件化、自动化、规范化。模块化包括ES Module和CommonJS的区别组件化强调的是UI复用和业务解耦自动化包括构建部署流程和CI/CD规范化包括代码规范、提交规范和Code Review机制。答题时尽量结合自己实际做过的项目来说不要只是堆砌名词。第三道是“如何提升首屏加载速度”。这道题和小满的业务场景非常契合。可以从资源加载、渲染性能、感知体验三个层面去答。资源加载层面有CDN加速、资源压缩、按需加载渲染性能层面有减少DOM操作、避免同步加载script标签、合理使用CSS动画替代JavaScript动画感知体验层面有骨架屏、loading过渡、关键CSS内联。能提到PRPL模式这种工程化方案会在印象分上加不少。3.2 编程题分析与手写方案参考编程题是这场笔试的重头戏我按实际答题顺序说一下。第一道编程题是数组去重。题目要求实现一个函数对数组进行去重同时去重后保持元素原有的顺序。表面上看这题非常基础但它考核的是你对多种去重方案的理解深度。我当时的答题思路是先写Set版本因为这个版本最简洁代码量最少然后补充说明它的局限性比如去重使用的是SameValueZero算法对于对象类型效率地按引用判断再写一个reduce配合includes的版本兼容性更好适合数组中含有NaN的情况。把两个版本都写上并在注释里解释原因这种答题方式比只写一个版本更能展示你对细节的理解。第二道编程题是防抖函数但要求支持立即执行选项。这道题如果只是简单写个定时器版本代码很快就写完了但很多人在“立即执行”这个需求上栽了跟头。我写的是这样的function debounce(fn, wait, immediate false) { let timer null; let isInvoked false; return function (...args) { const context this; if (immediate !isInvoked) { fn.apply(context, args); isInvoked true; } clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); isInvoked false; }, wait); }; }这里的关键点是立即执行模式下第一次触发时直接调用函数并在wait时间内禁止再次立即执行最后一次触发依然会在wait之后执行除非isInvoked被重置。要注意this指向必须用function关键字而不是箭头函数因为箭头函数没有自己的this。第三道编程题是一道标准的算法题给定一个二叉树返回层序遍历结果要求按层输出。这道题的解法不止一种最标准的是使用队列实现。我选择用数组模拟队列通过记录当前层节点数量的方式来实现按层输出function levelOrder(root) { if (!root) return []; const result []; const queue [root]; while (queue.length) { let len queue.length; const currentLevel []; for (let i 0; i len; i) { const node queue.shift(); currentLevel.push(node.val); if (node.left) queue.push(node.left); if (node.right) queue.push(node.right); } result.push(currentLevel); } return result; }第四道编程题是手写一个简单版的Promise.all。这道题有难度核心考察点是入参可能不是Promise对象需要先用Promise.resolve包装结果要按照入参顺序返回而不是按照执行完成的顺序任何一个Promise失败整体就立即失败要支持空数组的情况。我答题时特别关注了第二点因为很多同学会把结果push到数组里这样一旦前面的Promise比后面的慢结果顺序就会错乱。正确的做法是用索引赋值的方式保证返回结果和入参一一对应。附加题部分我选择了两道做了解答涉及的内容是性能监控指标FP、FCP、LCP、CLS的含义和采集方式以及大前端趋势理解。这类题没有标准答案主要看你的技术视野。建议回答时多写自己的理解哪怕理解不深也要展示你思考过。3.3 笔试环境的注意事项与实际体验小满这场笔试用的在线编程平台是常见的牛客网模式。有几个细节值得提一下。输入输出模式要提前确认。牛客和赛码的格式略有差异有些平台是ACM模式需要自己处理输入输出有些是核心代码模式只需要写函数实现。小满的编程题是核心代码模式答题时不需要处理输入输出部分只要完成函数逻辑即可。但为了保险起见我还是先花了30秒看清楚了题目给出的函数签名确认参数类型和返回值类型再动手写代码。在线IDE没有自动补全功能这是我每次笔试都特别提醒自己的一件事。平时在VSCode里写代码智能提示帮我们解决了很多拼写问题但笔试平台的编辑器往往比较简陋。如果你连querySelector都拼不对或者经常把getElementById的大小写写错笔试过程中会浪费大量时间在调试低级错误上。建议在笔试前一周刻意用纯文本编辑器写几道题找回没有联想功能的编码手感。另外笔试过程中要随时注意保存。大部分在线平台都有自动保存功能但我遇到过代码写到一半因为页面切出去看题目而触发了浏览器防作弊机制的提醒差点丢失内容。经验是在答题期间不要频繁切换浏览器标签页如果需要回忆某个知识点宁可在草稿纸上推理也不要冒险切走。4. 常见问题与排查技巧实录4.1 时间不够用的破局方法考完试之后我刷了一圈讨论帖发现吐槽最多的问题就是时间不够用。90分钟要完成45道题平均每道题只有2分钟确实紧张。但我个人的体感是如果策略得当时间完全来得及。核心思路是分级处理。第一遍做题时按照“会做的立刻做、不会的快速跳过、模棱两可的标记出来”的原则先保证把所有能拿的分全部拿到手。选择题不要停留超过90秒一道题想不出来就猜一个不要有任何心理负担。第二遍集中攻克编程题。编程题是高分值区四道题加起来40分必须优先保障。做题顺序上先挑自己最擅长的题做不一定要按照题目顺序来。我第一道写的是数组去重因为这道题最稳能够快速积累信心然后写防抖再写算法题最后处理Promise.all。每道题写完先跑一遍自测用例确认输出正确再提交。第三遍再回来处理标记过的选择题和简答题。这时候时间已经不多选择题可以凭借第一感觉作答简答题列出答题要点即可。宁可要一个提纲式的回答也不要放弃这道题。4.2 编程题常见的隐蔽丢分点编程题丢分很多时候不是算法不会而是细节不够严谨。这里我把踩过的坑和看到别人踩的坑做一个归纳。第一是返回值类型不匹配。题目要求返回数组结果函数里返回了null或者undefined。这类问题在核心代码模式下尤其容易犯因为不需要自定义输入输出直接在函数体末尾return即可但很多人写循环时忘记了返回值。第二是空数组和空对象的边界情况。比如Promise.all传入空数组应该返回一个已决议的Promise实例二叉树层序遍历传入空根节点应该返回空数组。这些边界情况如果没考虑测试用例很容易挂掉。我的习惯是函数写好之后先在心里跑一遍空数据、单元素数据、多元素数据三个场景。第三是手写代码的语法错误。笔试题的代码不会像真实项目那样做ESLint检查所以你的代码有没有语法问题完全靠自己的“手感”。我见过有同学箭头函数少写了一个等号导致整段代码语法报错拿不到任何分数。建议提交之前从上到下读一遍代码把括号、分号、变量名的拼写都检查一遍。第四是代码注释太少。这个不算丢分点但会影响面试官对你的印象分。笔试之后面试官会看到你的答卷一份有清晰注释的代码比一份光秃秃的代码更容易获得好感。注释不一定要写多但要在关键逻辑处说明思路。4.3 容易忽略的知识点盲区考完整张卷子我复盘时发现有四个知识点是容易被忽略但出现频率不低的提醒大家重点准备。其一浏览器存储方案的对比。Cookie、localStorage、sessionStorage、IndexedDB四种方案要能说清楚大小限制、生命周期、是否会随请求发送到服务器。特别是Cookie的HttpOnly属性和SameSite属性题目里考过“XSS攻击时无法窃取哪种Cookie”答案就是标记了HttpOnly的Cookie。其二ES Module和CommonJS的区别。这两种模块化方案的对比是简答题的高频题。答题要点包括CommonJS是同步加载ES Module是异步加载CommonJS输出的是值的拷贝ES Module输出的是值的引用CommonJS在运行时确定依赖关系ES Module在编译时就确定依赖关系并做静态分析。其三事件委托和事件冒泡。这个知识点隐藏在选择题里但考察方式比较灵活。核心问题就是ul下挂着多个li点击每个li获取对应的内容。使用事件委托时需要先判断event.target的标签名是否匹配再通过closest方法处理边界情况。其四CSS中选择器优先级计算规则。!important 行内样式 ID选择器 类选择器 标签选择器。但还有一个容易忽略的细节同优先级情况下后写的样式会覆盖先写的样式。这些规则看似简单实际答题时需要逐项计算优先级值不能凭感觉判断。4.4 笔试结束之后应该立刻做的事笔试不是终点考完之后的工作同样重要。在提交试卷之后我会在半小时内趁记忆清晰把自己不确定的题目赶紧查一遍。比如小满笔试里有一道关于CSS contain属性的多选题我当时只知道它可能用来做性能优化但不确认它包含哪些可选值。考完立刻查证发现它有layout、paint、size等取值对应的场景各不相同。虽然这次笔试不会因为补上这个知识点加分但下一次面试如果遇到同类问题至少不会慌乱。更重要的建议是把本次笔试的所有真题做一份回忆版发给一起备考的同学或者上传到自己的博客和大家讨论。前端笔试涉及的考点高度相似这一轮笔试中出现的题目很可能就是其他公司笔试中会出现的题型。通过整理真题查漏补缺比盲目刷一百道力扣题效率更高。我在笔试之后专门建了一个文档把这次考试涉及的所有考点按“已掌握”“部分掌握”“完全不懂”三个等级归类然后针对第三类知识点进行专项学习。比如这次笔试让我意识到自己对浏览器缓存细节理解得不够深入于是花了两天时间把缓存策略完整梳理了一遍之后再做其他公司的笔试题明显更有底了。写在最后的小建议回顾这场2023年度小满秋招Web前端岗第一批笔试我最大的感受是前端笔试并不追求偏题怪题它考察的就是你对基础知识的掌握程度和编程基本功。但基础并不意味着简单像事件循环、闭包、缓存策略这些知识点理解到第一层和第三层的差距在笔试里一眼就能看出来。如果你正在准备前端岗位的秋招我建议重点做三件事。第一把JavaScript核心概念完整过一遍确保能不看资料写出防抖节流、深拷贝、Promise.all、数组去重这些高频手写题。第二多刷牛客网的前端专项练习题尤其是多选题和简答题让自己适应这类题型的作答方式。第三找几场笔试试水哪怕是不想去的公司也可以投一下用真实的笔试环境来检验自己的时间分配和答题策略。笔试只是秋招的入场券后面的面试环节还会有更多值得准备的内容但这个第一步如果走不稳后面的一切都是空谈。希望这篇复盘能帮你在笔试环节少走一些弯路。
每年一到七八月秋招的气氛就开始热起来。要说互联网技术岗里投递人数最多、竞争最卷的方向Web前端绝对排在前列。前端岗位的笔试不像后端那样动辄系统设计、海量算法但考察范围极广从HTML/CSS到JavaScript底层原理从浏览器渲染到网络协议甚至还会掺几道算法题很多同学一不留神就挂在第一轮笔试上。我参加过2023年度小满秋招Web前端岗的第一批笔试整体感觉是题量不小、范围很杂、编程题比想象中多。这篇文章就围绕这场笔试把我经历的题型、考点、答题节奏和踩坑点完整复盘一遍给正在准备秋招的朋友一个参考。内容不只针对小满这一家基本可以延伸到大多数互联网公司前端岗的笔试题型有准备的价值。1. 整体设计与思路拆解前端笔试到底在考什么1.1 前端笔试的考察逻辑和筛选目标先聊一个大家最容易忽略的问题笔试到底想筛什么人很多人以为笔试就是考技术深度其实不完全对。校招笔试面对的是一大批应届生公司要的不是“什么都会的天才”而是“基础扎实、能干活、有潜力”的候选人。所以前端笔试题的设计通常遵循三个原则第一是覆盖广度优先。一道题可能不深但考点一定要多。比如一个JavaScript题目可能同时涉及变量提升、闭包、事件循环和this指向目的就是快速判断你的知识面有没有死角。第二是工程能力前置考察。前端笔试不是在学校里做期末卷很多公司会把真实业务里踩过的坑包装成笔试题。比如“实现一个带并发限制的异步请求调度器”其实就是业务中控制请求并发数的简化版。这类题看的是你有没有工程思维而不仅仅是语法熟练度。第三是编程基本功不能拖后腿。虽然前端不像后端那样强调算法但剑指Offer难度级别的题目还是会出现。小满这场笔试的编程题一共有四道两道偏纯JavaScript手写两道偏数据结构和算法整体难度在中低档但写不出来的人比例仍然很高。1.2 小满笔试的题目结构和时间分配我看到卷子的第一反应是时间紧。90分钟45道题其中选择题30道、简答题5道、编程题4道、附加题6道。这个题量放在前端岗位里属于中等偏上如果前面选择题磨蹭太久后面编程题基本没时间写。题型分布大致是这样的题型数量单题分值涉及知识点单选题202分HTML、CSS、JavaScript基础多选题103分浏览器原理、ES6、工程化简答题54分概念解释、方案设计编程题410分手写代码、算法、数据结构附加题6选做开放性问题、综合设计从分值占比来看编程题是最大头四道题各10分。也就是说如果编程题只做出一道这份卷子基本就告别面试了。我的答题策略是先快速扫一遍选择题遇到不确定的先标记跳过确保留给编程题至少40分钟。1.3 为什么前端笔试会这样设计小满作为一家面向C端用户的互联网公司前端团队规模不小业务场景覆盖移动端H5、后台管理系统、可视化大屏等。所以笔试题目偏重基础的同时也会加入一些跟业务贴近的场景题比如“首屏加载性能优化方案”“大列表渲染卡顿如何解决”这类问题。另外我注意到他们的多选题几乎都是“以下哪些说法正确”的形式这种题很容易丢分。原因很简单少选不得分多选也不得分。它考察的不只是你记得多少知识点而是你对概念边界的理解够不够准确。这一点和很多公司的出题思路是一致的。前端知识点看似零散但核心主线很清晰从输入URL到页面展示的完整链路、JavaScript运行时机制、CSS布局与渲染、网络请求与缓存、前端工程化与性能优化。笔试题目再变化基本都不会跳出这条主线。2. 核心知识考点拆解哪些题最容易拉开差距2.1 JavaScript基础与进阶考点重点分析JavaScript相关题目在整张卷子中占比接近四成是绝对的核心。小满这套笔试题里JavaScript考点覆盖了以下几个高频区块。变量提升和暂时性死区几乎是必考题考法通常是给一段代码让你判断输出结果比如console.log(a); // undefined var a 1; console.log(b); // ReferenceError: Cannot access b before initialization let b 2;var声明的变量会被提升到作用域顶部但赋值不提升所以第一次打印是undefined。而let和const存在暂时性死区声明之前访问会直接报错。这个考点看似基础却是很多人两秒钟就丢分的盲区。闭包和this指向也是重头戏。有一道题我记得很清楚考察的是for循环中使用var和let定义变量的区别配合setTimeout输出结果。核心结论大家都背过但真正理解背后原理的人不多。var定义的是函数级作用域循环结束之后变量i已经变成最终值let定义的是块级作用域每次循环都会生成一个新的绑定所以输出结果是0、1、2而不是3、3、3。事件循环机制在选择题和简答题里都出现了。它考察的是宏任务和微任务的执行顺序。有一个典型的例子setTimeout(() console.log(timeout), 0); Promise.resolve().then(() console.log(promise)); console.log(sync);正确输出顺序是sync、promise、timeout。原因在于同步代码先执行然后清空微任务队列最后才轮到宏任务。Promise的then回调属于微任务setTimeout的回调属于宏任务这个优先级关系必须清楚。2.2 HTML与CSS考察方向和高频陷阱HTML部分的题目非常常规主要考察语义化标签的使用场景、meta标签的作用、HTML5新增的表单属性等。比如article、section、aside的区别canvas和svg的使用差异datalist和select的区别这些都是送分题但基础不牢的人会在这上面翻车。CSS部分才是真正拉开差距的地方。小满的笔试题里出了一道经典的垂直居中方案选择选项有五种写法要在其中选出可以保证无论元素尺寸如何变化都居中的方案。这里我建议大家把以下三种方案烂熟于心/* 方案一flex布局 */ .parent { display: flex; align-items: center; justify-content: center; } /* 方案二绝对定位 transform */ .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 方案三grid布局 */ .parent { display: grid; place-items: center; }另外还有一个高频考点是BFC块级格式化上下文。题目问的是如何清除浮动、防止margin合并选项里列出了overflow: hidden、display: inline-block、display: flex、float: left等方案。要记住创建BFC的方式不止一种但不同方式带来的副作用不同比如float会影响元素自身的定位方式flex会改变子元素的布局模型实际使用时要结合场景选择。Flex布局和Grid布局的对比也出现了。这里我建议大家不仅要会写还要能说出两者的典型应用场景。Flex适合一维布局主轴方向明确比如导航栏、按钮组Grid适合二维布局行列同时控制比如整个页面骨架、卡片网格。2.3 网络与浏览器考点面试官的隐藏爱好网络协议在前端笔试中出现频率非常高这次也不例外。HTTP缓存是必考内容考法一般是给你一张请求-响应图判断哪些资源命中强缓存、哪些命中协商缓存。要理解Cache-Control和ETag/If-None-Match的配合关系Cache-Control: max-age3600 表示资源在3600秒内直接使用本地缓存不发请求缓存过期后浏览器带上 If-None-Match值来自响应头里的 ETag发请求服务器返回 304 则继续用本地缓存如果服务器返回 200 和新资源则更新缓存。TCP三次握手和四次挥手也出现了但考得非常浅主要是握手过程的状态迁移和为什么需要三次。这里有个答题技巧不要只背“SYN、SYN-ACK、ACK”这个流程最好能说出来为什么两次不行、为什么要第四次挥手这样简答题才能拿高分。浏览器渲染流程是简答题的常客。题目问的是“从输入URL到页面展示发生了什么”这道题非常经典但很多人答得不够完整。标准的答题框架至少包含六个环节DNS解析、建立TCP连接、发送HTTP请求、服务器响应并返回HTML、浏览器解析HTML构建DOM树、解析CSS构建CSSOM树、合成渲染树、布局计算、绘制、合成。除了主流程建议加上“遇到script标签时解析会阻塞”和“defer和async的区别”这样能体现你考虑到了性能因素。3. 实操过程与核心环节实现3.1 选择题和简答题的答题策略进入笔试页面之后我先花了两分钟把全部题目浏览了一遍。这是我从几次笔试中总结出来的习惯千万不要拿到卷子就从第一题开始死磕。快速浏览的价值在于了解编程题的难度先判断哪道题是自己有把握做出来的标记出选择题里的难题避免在单个题目上浪费太多时间对整场考试的节奏心中有数。小满笔试的选择题部分我实际用了大约25分钟。这个速度不算快因为多选题非常烧脑。多选题一定要注意题目里的“正确”“错误”“包括”“不包括”这类词汇。很多时候两个选项意思完全相反必须看清楚题目到底让你选什么。简答题有五道我大致回忆了其中几道题目第一道是“解释浏览器同源策略以及跨域解决方案”。跨域问题属于前端必知必会答题时建议先解释同源策略的定义和限制再分三种场景展开JSONP适用于GET请求CORS适用于需要通过后端配置响应头的场景代理转发适用于开发环境。如果能提一下postMessage和WebSocket的场景会显得知识面更广。第二道是“讲讲你对前端工程化的理解”。这种题每个面试官喜好不同但核心离不开模块化、组件化、自动化、规范化。模块化包括ES Module和CommonJS的区别组件化强调的是UI复用和业务解耦自动化包括构建部署流程和CI/CD规范化包括代码规范、提交规范和Code Review机制。答题时尽量结合自己实际做过的项目来说不要只是堆砌名词。第三道是“如何提升首屏加载速度”。这道题和小满的业务场景非常契合。可以从资源加载、渲染性能、感知体验三个层面去答。资源加载层面有CDN加速、资源压缩、按需加载渲染性能层面有减少DOM操作、避免同步加载script标签、合理使用CSS动画替代JavaScript动画感知体验层面有骨架屏、loading过渡、关键CSS内联。能提到PRPL模式这种工程化方案会在印象分上加不少。3.2 编程题分析与手写方案参考编程题是这场笔试的重头戏我按实际答题顺序说一下。第一道编程题是数组去重。题目要求实现一个函数对数组进行去重同时去重后保持元素原有的顺序。表面上看这题非常基础但它考核的是你对多种去重方案的理解深度。我当时的答题思路是先写Set版本因为这个版本最简洁代码量最少然后补充说明它的局限性比如去重使用的是SameValueZero算法对于对象类型效率地按引用判断再写一个reduce配合includes的版本兼容性更好适合数组中含有NaN的情况。把两个版本都写上并在注释里解释原因这种答题方式比只写一个版本更能展示你对细节的理解。第二道编程题是防抖函数但要求支持立即执行选项。这道题如果只是简单写个定时器版本代码很快就写完了但很多人在“立即执行”这个需求上栽了跟头。我写的是这样的function debounce(fn, wait, immediate false) { let timer null; let isInvoked false; return function (...args) { const context this; if (immediate !isInvoked) { fn.apply(context, args); isInvoked true; } clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); isInvoked false; }, wait); }; }这里的关键点是立即执行模式下第一次触发时直接调用函数并在wait时间内禁止再次立即执行最后一次触发依然会在wait之后执行除非isInvoked被重置。要注意this指向必须用function关键字而不是箭头函数因为箭头函数没有自己的this。第三道编程题是一道标准的算法题给定一个二叉树返回层序遍历结果要求按层输出。这道题的解法不止一种最标准的是使用队列实现。我选择用数组模拟队列通过记录当前层节点数量的方式来实现按层输出function levelOrder(root) { if (!root) return []; const result []; const queue [root]; while (queue.length) { let len queue.length; const currentLevel []; for (let i 0; i len; i) { const node queue.shift(); currentLevel.push(node.val); if (node.left) queue.push(node.left); if (node.right) queue.push(node.right); } result.push(currentLevel); } return result; }第四道编程题是手写一个简单版的Promise.all。这道题有难度核心考察点是入参可能不是Promise对象需要先用Promise.resolve包装结果要按照入参顺序返回而不是按照执行完成的顺序任何一个Promise失败整体就立即失败要支持空数组的情况。我答题时特别关注了第二点因为很多同学会把结果push到数组里这样一旦前面的Promise比后面的慢结果顺序就会错乱。正确的做法是用索引赋值的方式保证返回结果和入参一一对应。附加题部分我选择了两道做了解答涉及的内容是性能监控指标FP、FCP、LCP、CLS的含义和采集方式以及大前端趋势理解。这类题没有标准答案主要看你的技术视野。建议回答时多写自己的理解哪怕理解不深也要展示你思考过。3.3 笔试环境的注意事项与实际体验小满这场笔试用的在线编程平台是常见的牛客网模式。有几个细节值得提一下。输入输出模式要提前确认。牛客和赛码的格式略有差异有些平台是ACM模式需要自己处理输入输出有些是核心代码模式只需要写函数实现。小满的编程题是核心代码模式答题时不需要处理输入输出部分只要完成函数逻辑即可。但为了保险起见我还是先花了30秒看清楚了题目给出的函数签名确认参数类型和返回值类型再动手写代码。在线IDE没有自动补全功能这是我每次笔试都特别提醒自己的一件事。平时在VSCode里写代码智能提示帮我们解决了很多拼写问题但笔试平台的编辑器往往比较简陋。如果你连querySelector都拼不对或者经常把getElementById的大小写写错笔试过程中会浪费大量时间在调试低级错误上。建议在笔试前一周刻意用纯文本编辑器写几道题找回没有联想功能的编码手感。另外笔试过程中要随时注意保存。大部分在线平台都有自动保存功能但我遇到过代码写到一半因为页面切出去看题目而触发了浏览器防作弊机制的提醒差点丢失内容。经验是在答题期间不要频繁切换浏览器标签页如果需要回忆某个知识点宁可在草稿纸上推理也不要冒险切走。4. 常见问题与排查技巧实录4.1 时间不够用的破局方法考完试之后我刷了一圈讨论帖发现吐槽最多的问题就是时间不够用。90分钟要完成45道题平均每道题只有2分钟确实紧张。但我个人的体感是如果策略得当时间完全来得及。核心思路是分级处理。第一遍做题时按照“会做的立刻做、不会的快速跳过、模棱两可的标记出来”的原则先保证把所有能拿的分全部拿到手。选择题不要停留超过90秒一道题想不出来就猜一个不要有任何心理负担。第二遍集中攻克编程题。编程题是高分值区四道题加起来40分必须优先保障。做题顺序上先挑自己最擅长的题做不一定要按照题目顺序来。我第一道写的是数组去重因为这道题最稳能够快速积累信心然后写防抖再写算法题最后处理Promise.all。每道题写完先跑一遍自测用例确认输出正确再提交。第三遍再回来处理标记过的选择题和简答题。这时候时间已经不多选择题可以凭借第一感觉作答简答题列出答题要点即可。宁可要一个提纲式的回答也不要放弃这道题。4.2 编程题常见的隐蔽丢分点编程题丢分很多时候不是算法不会而是细节不够严谨。这里我把踩过的坑和看到别人踩的坑做一个归纳。第一是返回值类型不匹配。题目要求返回数组结果函数里返回了null或者undefined。这类问题在核心代码模式下尤其容易犯因为不需要自定义输入输出直接在函数体末尾return即可但很多人写循环时忘记了返回值。第二是空数组和空对象的边界情况。比如Promise.all传入空数组应该返回一个已决议的Promise实例二叉树层序遍历传入空根节点应该返回空数组。这些边界情况如果没考虑测试用例很容易挂掉。我的习惯是函数写好之后先在心里跑一遍空数据、单元素数据、多元素数据三个场景。第三是手写代码的语法错误。笔试题的代码不会像真实项目那样做ESLint检查所以你的代码有没有语法问题完全靠自己的“手感”。我见过有同学箭头函数少写了一个等号导致整段代码语法报错拿不到任何分数。建议提交之前从上到下读一遍代码把括号、分号、变量名的拼写都检查一遍。第四是代码注释太少。这个不算丢分点但会影响面试官对你的印象分。笔试之后面试官会看到你的答卷一份有清晰注释的代码比一份光秃秃的代码更容易获得好感。注释不一定要写多但要在关键逻辑处说明思路。4.3 容易忽略的知识点盲区考完整张卷子我复盘时发现有四个知识点是容易被忽略但出现频率不低的提醒大家重点准备。其一浏览器存储方案的对比。Cookie、localStorage、sessionStorage、IndexedDB四种方案要能说清楚大小限制、生命周期、是否会随请求发送到服务器。特别是Cookie的HttpOnly属性和SameSite属性题目里考过“XSS攻击时无法窃取哪种Cookie”答案就是标记了HttpOnly的Cookie。其二ES Module和CommonJS的区别。这两种模块化方案的对比是简答题的高频题。答题要点包括CommonJS是同步加载ES Module是异步加载CommonJS输出的是值的拷贝ES Module输出的是值的引用CommonJS在运行时确定依赖关系ES Module在编译时就确定依赖关系并做静态分析。其三事件委托和事件冒泡。这个知识点隐藏在选择题里但考察方式比较灵活。核心问题就是ul下挂着多个li点击每个li获取对应的内容。使用事件委托时需要先判断event.target的标签名是否匹配再通过closest方法处理边界情况。其四CSS中选择器优先级计算规则。!important 行内样式 ID选择器 类选择器 标签选择器。但还有一个容易忽略的细节同优先级情况下后写的样式会覆盖先写的样式。这些规则看似简单实际答题时需要逐项计算优先级值不能凭感觉判断。4.4 笔试结束之后应该立刻做的事笔试不是终点考完之后的工作同样重要。在提交试卷之后我会在半小时内趁记忆清晰把自己不确定的题目赶紧查一遍。比如小满笔试里有一道关于CSS contain属性的多选题我当时只知道它可能用来做性能优化但不确认它包含哪些可选值。考完立刻查证发现它有layout、paint、size等取值对应的场景各不相同。虽然这次笔试不会因为补上这个知识点加分但下一次面试如果遇到同类问题至少不会慌乱。更重要的建议是把本次笔试的所有真题做一份回忆版发给一起备考的同学或者上传到自己的博客和大家讨论。前端笔试涉及的考点高度相似这一轮笔试中出现的题目很可能就是其他公司笔试中会出现的题型。通过整理真题查漏补缺比盲目刷一百道力扣题效率更高。我在笔试之后专门建了一个文档把这次考试涉及的所有考点按“已掌握”“部分掌握”“完全不懂”三个等级归类然后针对第三类知识点进行专项学习。比如这次笔试让我意识到自己对浏览器缓存细节理解得不够深入于是花了两天时间把缓存策略完整梳理了一遍之后再做其他公司的笔试题明显更有底了。写在最后的小建议回顾这场2023年度小满秋招Web前端岗第一批笔试我最大的感受是前端笔试并不追求偏题怪题它考察的就是你对基础知识的掌握程度和编程基本功。但基础并不意味着简单像事件循环、闭包、缓存策略这些知识点理解到第一层和第三层的差距在笔试里一眼就能看出来。如果你正在准备前端岗位的秋招我建议重点做三件事。第一把JavaScript核心概念完整过一遍确保能不看资料写出防抖节流、深拷贝、Promise.all、数组去重这些高频手写题。第二多刷牛客网的前端专项练习题尤其是多选题和简答题让自己适应这类题型的作答方式。第三找几场笔试试水哪怕是不想去的公司也可以投一下用真实的笔试环境来检验自己的时间分配和答题策略。笔试只是秋招的入场券后面的面试环节还会有更多值得准备的内容但这个第一步如果走不稳后面的一切都是空谈。希望这篇复盘能帮你在笔试环节少走一些弯路。
