每年秋招结束总有一批同学拿着贝壳找房的笔试链接来找我复盘。说实话这份试卷在2023届校招前端题里属于“看着不难、但分差极大”的类型——它不像某些大厂那样堆偏题怪题而是把前端的基础功底、工程化理解和业务场景设计揉在一起考。如果你只是刷过八股文而没有真实项目经验很容易在场景题和手写题上露馅。这篇博文我不会去复述网上流传的“原题答案”而是站在复盘的角度把贝壳这类房产交易平台前端校招试卷的核心考点、答题思路、常见失分点全部拆开讲一遍。无论你是正在准备校招的应届生还是想查漏补缺的前端新人这份拆解都能帮你理解一份合格的前端校招卷子到底在筛选什么样的人。1. 先从试卷看贝壳前端在招什么样的人很多同学拿到试卷第一反应是“赶紧做题”但我的习惯是反过来——先看这套题想筛什么。贝壳找房的产品形态决定了它的前端技术栈不会太冷门房源列表、楼盘详情、地图找房、IM咨询、VR看房这些业务涉及大量的列表渲染、地图交互、长列表性能优化和跨端适配。所以试卷里那些看似常规的题背后都贴着业务场景。1.1 贝壳前端技术栈与校招命题逻辑贝壳找房的Web前端过去几年主力栈是React TypeScript部分偏中后台的业务线用Vue工程化层面比较看重Webpack/Vite的配置能力、组件库建设、SSR/SEO方案。这不是什么秘密从他们的招聘JD就能看到要求熟悉React或Vue、了解前端工程化、有性能优化意识。校招命题的逻辑一般是三层递进第一层语言与基础。JavaScript核心机制、浏览器工作原理、网络协议、CSS布局。这层是筛掉“简历写了但基础不牢”的人。第二层框架与工程化。React/Vue原理、组件通信、状态管理、构建工具、代码规范。这层是筛掉“只会调API但不懂原理”的人。第三层场景与综合。手写代码题、业务设计题、算法题。这层是筛掉“只背题但不会解决实际问题”的人。三层不是割裂的试卷通常会交叉出题。比如一道“实现一个带防抖的搜索框”表面是手写防抖实际上是在模拟贝壳App里搜索房源的真实交互——用户连续输入时不能每敲一个字符就发一次请求这种题答得好不好直接反映你有没有处理过真实业务。1.2 在线笔试的形式与时间分配贝壳校招前端笔试题型按近两年情况看一般是“客观题 编程题”的组合。客观题覆盖选择题和填空题编程题则依赖在线OJ系统。整个笔试时长通常在90分钟到120分钟之间。时间分配上我见过太多人翻车前面客观题纠结太久后面编程题只能胡写。我的建议是倒着做——先花5分钟把所有题扫一遍优先把编程题里能拿的分拿到再回头啃选择题。因为编程题一题的分值往往顶得上好几道选择题而且编程题只要思路对、能跑通用例就算写得糙也有分。这个顺序在贝壳这类业务型公司尤其重要他们的编程题通常不难但信息量不小需要你留出足够时间去读题和设计数据结构。1.3 复盘的资料来源由于网络上的版本已经打乱我在这里不做“真题搬运”而是按照校招前端试卷的常规题型结合贝壳房产搜索、房源列表、详情页这类典型场景去重构考点和答题思路。如果你是准备面试的同学更该关注的不是某一道题的标准答案而是这套题背后的考察意图和答题框架——框架在手题目怎么变你都能接住。2. 基础与语言类考点JavaScript/TypeScript 的易错点拆解第一类必考题型就是JavaScript语言基础。这类题在贝壳试卷里占比不低但考察方式比较灵活不会直接问你“闭包是什么”而是给你一段代码让你写出输出结果或者让你指出代码里的问题。如果你平时只是“听说过”这些概念没真正手写过这里很容易连续丢分。2.1 变量提升、作用域与闭包的经典考法先看一道高频题var a 1; function foo() { console.log(a); var a 2; } foo();答案是undefined不是1也不是报错。原因就是变量提升——var a被提升到foo函数作用域顶部此时a已经声明但未赋值所以打印出undefined。这道题在试卷上属于送分题但送分题也拦住了不少人因为很多人只记住了“变量提升”这个名词却没有真正理解提升的执行过程。闭包题的考法通常是结合循环for (var i 0; i 5; i) { setTimeout(function () { console.log(i); }, 1000); }输出是5 5 5 5 5。你需要解释清楚为什么然后至少给出三种修法把var改成let、用 IIFE 包一层、用setTimeout的第三个参数传值。答题时不要只写一种解法尽量把三种都写出来并说明各自的原理。贝壳这类重视工程化的公司评分时很看重“你知不知道多种方案”以及“你知不知道选型的理由”。2.2 this 指向与箭头函数的坑this指向是选择题的重灾区。记住一个最朴素的判断方法this的指向取决于函数调用方式而不是定义方式。普通函数调用时this指向调用者箭头函数没有自己的this它继承外层作用域的this。有一道经典的组合题是这样的const obj { name: beike, getName: function () { return this.name; }, getNameArrow: () { return this.name; } }; console.log(obj.getName()); console.log(obj.getNameArrow());obj.getName()输出beike这没问题。但obj.getNameArrow()输出的是undefined因为箭头函数的this绑定在定义时的外层作用域也就是全局对象上而全局对象上没有name这个属性。很多同学在这里只记住了“箭头函数的this指向定义时所在的对象”却没搞清楚“定义时所在的对象”到底是谁。我建议大家做题时把箭头函数换成普通函数脑补一遍对比一下差异理解会更扎实。2.3 Promise、async/await 与事件循环的必考组合异步编程是前端笔试的重头戏贝壳的卷子里几乎一定会出现。考法很典型给你一段混着setTimeout、Promise、async/await的代码让你按顺序写出输出。我见过一道非常经典的真题变体async function test() { console.log(1); await Promise.resolve(); console.log(2); } console.log(3); test(); console.log(4);输出顺序是3 - 1 - 4 - 2。关键在于await后面的代码会被放入微任务队列而同步代码console.log(4)会先于微任务执行。这个机制如果你只是背结论换一题稍微变一下就会错。我建议你给自己画一张事件循环的顺序图同步代码 → 微任务Promise.then、await后面的代码→ 宏任务setTimeout、setInterval→ 回到微任务…这样无论题目怎么变都能推导出正确结果。在TypeScript方面贝壳这类大规模前端团队是比较看重的。高频考点包括type和interface的区别、泛型的约束、keyof和typeof的使用。这些考点常常藏在代码题里比如让你实现一个类型安全的get函数或者让一个函数的参数类型根据另一个参数动态变化。这种题答好了基本就能在“基础扎实”这一栏高分段锁定。3. 浏览器、网络与性能优化把页面加载讲出业务感第二类考点集中在浏览器和网络。这些知识在纯前端笔试里往往以选择题形式出现但贝壳的试卷里会结合性能优化成场景题——毕竟房产页面图片多、数据量大加载速度直接影响用户转化。这个模块不难但有技巧。3.1 从输入URL到页面渲染的完整回答框架“从输入URL到页面展示发生了什么”是前端校招几乎必考的一道题贝壳也不例外。这道题考察的不是你会不会背而是你能否有逻辑地串联起网络、浏览器、渲染引擎三块知识。我的回答框架是五段式网络请求阶段DNS解析 → TCP连接HTTPS还要做TLS握手→ 发送HTTP请求 → 服务器响应返回HTML。解析阶段浏览器拿到HTML后解析HTML生成DOM树同时解析CSS生成CSSOM树。构建渲染树DOM树和CSSOM树合并成渲染树Render Tree只包含可见节点。布局与绘制根据渲染树计算每个节点的几何信息Layout然后进行绘制Paint。合成与展示合成层交给GPU处理最终呈现在屏幕上。如果你只是背到这里那只能算及格。想拿高分一定要补上下面的优化细节HTML解析过程中遇到script标签会阻塞解析所以脚本要加defer或asyncCSS会阻塞渲染所以CSS要尽量合并减少请求图片不会阻塞DOM解析但会阻塞页面加载完成事件所以要用懒加载。这些细节贝壳的业务场景全都能用上——房源列表里几十张图片不做懒加载页面首屏根本出不来。3.2 HTTP缓存策略与浏览器存储的选型逻辑缓存是另一个考查重点。你需要把两套缓存机制说清楚强缓存通过Cache-Control和Expires控制命中的话直接读本地缓存不发请求。协商缓存通过Last-Modified/If-Modified-Since和ETag/If-None-Match控制需要向服务器发请求确认是否可用。答题时建议配一张小表格来对比缓存类型判断方式优点缺点强缓存直接读缓存不发请求快更新不灵活协商缓存发请求问服务器能拿到最新内容请求数多浏览器存储方面localStorage、sessionStorage、cookie、IndexedDB各是什么、能存多少、什么时候用都要能对比清楚。这里有个易错点cookie的容量只有4KB左右而localStorage可以达到5MB现在很多项目里会把用户身份信息从cookie迁移到了localStorage或更安全的方案。如果你在答题时能提一句“cookie 容易受CSRF攻击影响”会显得你有真实的安全意识这是额外加分项。3.3 性能指标与房产业务的优化结合点纯性能指标题考的是你对前端性能监控的了解。核心指标有FCP首次内容绘制、LCP最大内容绘制、TTI可交互时间、CLS布局偏移、FID首次输入延迟。你需要说出来每个指标的含义以及怎么用Performance面板或第三方工具去测量。但贝壳这类业务型公司更爱问的是如果线上某个房源详情页加载很慢你会怎么排查我的答题思路是先看网络请求是接口慢还是静态资源慢打开DevTools的Network面板找出耗时最高的请求。看资源体积有没有图片没压缩、JS/CSS有没有做代码分割、有没有Tree Shaking。看渲染过程有没有长任务阻塞主线程React/Vue的组件有没有不必要的重渲染看缓存命中静态资源有没有配好强缓存接口数据有没有做前端缓存看代码层面有没有排查过内存泄漏比如全局变量、未清理的监听器、定时器。这套排查思路不是背出来的是真实项目里反复用到的。我在简历辅导时经常跟同学说性能优化题不要只答“图片懒加载、CDN、Gzip”三件套一定要结合业务场景说清楚“优化前后发生了什么变化”才能拿高分。贝壳这类房产平台房源图片特别多说图片懒加载和CDN配置是完全可以拉满细节的。4. 框架与工程化React/Vue 与前端基建的实战视角到了第三层贝壳的试卷会明显加大对框架原理和工程化能力的考察。这部分不是简单的框架API记忆而是考察你是否真正理解框架的运行机制以及你有没有在真实项目里面对过工程复杂度的挑战。4.1 React Hooks闭包陷阱与依赖处理如果试卷里明确考ReactuseEffect、useCallback、useMemo几乎是必出题。最常见的坑是useEffect的依赖数组const [count, setCount] useState(0); useEffect(() { const timer setInterval(() { setCount(count 1); }, 1000); return () clearInterval(timer); }, []);这段代码的意图是每秒让count加1但实际效果是count永远停留在1。原因就是setInterval的回调里捕获了初始渲染时的count 0而依赖数组为[]导致useEffect不会重新执行、永远不会捕获到最新的count。正确答案有很多比如用函数式更新setCount(c c 1)或者把count加入依赖数组。这种题我建议你不仅要会改还要能说出背后的原理Hooks 的闭包机制就是每次渲染都会生成一份独立的闭包useEffect 依赖数组的作用是让 React 判断是否需要重新生成这份闭包。能把这个原理讲明白考察点就完整了。4.2 Vue 响应式原理与虚拟 DOM如果试卷里选考Vue那你需要重点准备两块响应式原理和虚拟DOM diff算法。Vue 3 的响应式原理是基于Proxy实现的拦截对象属性的读写操作通过track和trigger维护依赖关系Vue 2 则使用Object.defineProperty只能劫持已有属性所以会有$set这个API来处理新增属性。如果题目问“Vue 3 为什么用 Proxy 替代 defineProperty”你要能答出三点Proxy 可以监听整个对象而非某个属性、可以监听属性的新增和删除、是标准规范而 defineProperty 是 ES5 的老方案。虚拟 DOM diff 的考点是同级比较、key 的作用、为什么不建议用 index 作为 key。我见过一道很经典的考题“列表顺序反转时用 index 作为 key 会有什么问题”答案是key 相同React/Vue 会认为节点没变只做复用和移动但节点内部状态比如输入框内容会错乱同时也会有性能问题。这种题没有现场逻辑推演能力纯背答案很容易翻车。4.3 工程化Webpack/Vite、模块化与代码规范贝壳这类企业的前端团队工程化是他们内部的“基础设施”所以笔试对构建工具的考察也很上心。高频考点如下Webpack 的核心概念entry、output、loader、plugin、resolve。你要能说清 loader 和 plugin 的区别loader 处理文件转换plugin 处理构建流程中的扩展。常用 loader 和 pluginbabel-loader、ts-loader、css-loader、style-loader、MiniCssExtractPlugin、HtmlWebpackPlugin、CopyWebpackPlugin。代码分割与懒加载动态import()实现按需加载、SplitChunksPlugin提取公共代码。Vite 和 Webpack 的对比Vite 基于 ES Module开发环境启动快、热更新快但生产构建使用的是 RollupWebpack 生态更成熟、配置更复杂。工程化题目想要答好一定要有一个真实项目经验撑腰。哪怕是学校项目、个人博客只要你真的配过一次 Webpack、拆过包、优化过打包体积你答出来的细节和“纯背概念”完全不同。我建议如果时间充裕就自己动手配一遍 Vite React 或 Vue 的项目看懂配置文件的每一行作用再去应对这类题目。代码规范也是贝壳这类公司很看重的点。你至少要知道 ESLint、Prettier、Husky lint-staged 的组合用法ESLint 做代码检查、Prettier 做格式化、Husky 在 Git 提交前执行 lint-staged 只检查暂存区的代码。如果题目问你“前端代码规范一般包括哪些维度”你可以从代码风格、命名规范、目录结构规范、Git 提交规范Commitlint几个角度展开这是能看出你有没有团队协作经验的地方。5. 手写题与场景题一份可直接复现的完整作答现在到了整份试卷最见真章的部分手写代码题和场景设计题。贝壳这类公司非常看重这块因为前端岗位入职后几乎每天都在写业务代码你的代码组织和问题拆解能力在这里暴露得最彻底。5.1 高频手写题防抖、节流、深拷贝、Promise.all手写题是校招笔试的“硬通货”贝壳的卷子里通常会出现2到3道。这里我把最高频的几个手写实现整理出来你直接对着练防抖debounce的核心思想在事件被连续触发时只在最后一次触发后等待一段时间才执行函数。function debounce(fn, delay 300) { let timer null; return function (...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; }注意点有两个一是要用apply把this绑定到调用方二是要处理参数透传。很多同学在笔试时只写出了清除定时器的逻辑忘了绑定this这就扣分了。节流throttle的核心思想在一段时间内只执行一次函数。有两种实现时间戳版和定时器版。时间戳版立即执行、停止触发后不会再执行定时器版延迟执行、停止触发后会再执行一次。答题时可以写一种再加一句“另一种实现是 xxx”显得你理解全面。深拷贝的完整版应该支持对象、数组、函数、Date、RegExp并且要考虑循环引用function deepClone(obj, hash new WeakMap()) { if (obj null || typeof obj ! object) return obj; if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return new RegExp(obj); if (hash.has(obj)) return hash.get(obj); const clone Array.isArray(obj) ? [] : {}; hash.set(obj, clone); Reflect.ownKeys(obj).forEach((key) { clone[key] deepClone(obj[key], hash); }); return clone; }如果你能写出用WeakMap处理循环引用的版本这道题基本就是满分如果能用Reflect.ownKeys处理 Symbol 类型的 key还能再加分。Promise.all的手写是“看起来简单、写起来容易漏”的典型function promiseAll(promises) { return new Promise((resolve, reject) { const results []; let count 0; promises.forEach((p, index) { Promise.resolve(p).then((val) { results[index] val; count; if (count promises.length) resolve(results); }).catch(reject); }); if (promises.length 0) resolve(results); }); }这里最容易被忽略的是空数组边界如果传入空数组应该直接resolve([])。另外结果需要按传入顺序返回不能用push要用索引赋值。5.2 场景设计题实现一个房源搜索页的完整思路贝壳的试卷很多时候会出现综合场景题比如“请设计一个房源的搜索筛选页面包含搜索框、筛选条件、房源列表要求考虑性能优化、状态管理和错误处理。”这类题没有唯一答案但你需要展示出完整的思考链路。我的模板如下数据层用 React 的useReducer或状态管理库Redux/Zustand管理筛选条件把搜索条件设计成一个对象{ keyword, region, priceRange, page }每次筛选条件变化都触发新的请求。UI层搜索框用防抖处理输入列表用分页或无限滚动加载中显示骨架屏请求失败显示错误提示和重试按钮空数据给空的兜底UI。性能层列表项用React.memo包裹避免筛选条件变化时整列表重渲染图片用懒加载大列表用虚拟滚动react-window / react-virtualized。交互层搜索中的竞态问题用AbortController或者请求序号来丢弃过期响应筛选条件变化时自动重置页码。答这类题的重点不是“标准答案”而是你对边界问题的考虑是否充分。能把竞态处理、空数据兜底、错误重试这三个点说出来基本就能跟普通候选人拉开差距。5.3 算法题的常见类型与应对策略算法题在校招前端卷里通常占1到2道。贝壳这类公司的算法难度通常不会太高以LeetCode简单到中等的题目为主常见类型有数组类两数之和、三数之和、合并有序数组、移动零。字符串类最长公共前缀、有效的括号、字符串反转。链表类反转链表、合并两个有序链表。树类二叉树的前中后序遍历、最大深度、层序遍历。建议无论如何先把高频题型刷熟尤其是“两数之和”和“反转链表”这两道属于出现概率极高的题目。算法题的答题技巧是先写思路再写代码。即便最后代码没写完只要注释里写清楚了“我打算用双指针左指针从0开始右指针从末尾开始”阅卷人能看出你的思路方向是对的也能给部分分数。6. 现场发挥与备赛心法避开那些高手也会踩的坑最后这部分我不聊具体题目聊聊真正影响你分数的“场外因素”。我见过技术不错但笔试翻车的例子太多了问题往往不在技术本身而是出在答题习惯、时间管理和表达方式上。6.1 笔试环境与答题顺序线上笔试常见的坑有以下几类第一编辑器不顺手。很多在线OJ环境没有自动补齐代码提示也弱。平时写代码太依赖IDE的同学会非常不适应。我的建议是提前去牛客网、力扣的在线环境练习几次手写代码让自己适应“裸写”的感觉。第二输入输出格式。线上笔试的算法题经常要自己写readline处理输入很多人死在字符串处理上。高频的处理技巧要提前掌握比如用空格或换行切割输入、把字符串转为数字数组。第三时间分配失衡。前面题耗太多时间后面大题来不及写。我的策略是“先拿保底分再冲附加分”先把所有会写的题写完再回头磕不确定的题。编程题哪怕只写了个框架也要提交上去得个步骤分。6.2 面试中讲技术点怎么讲才不像背八股如果你笔试通过了后面还有面试。但面试的技术问题往往和笔试高度相关。贝壳的面试官经常是让你现场写代码然后不断追问看你能否讲出“为什么”。我辅导同学面试时最常说的一句话是技术点不要只答定义要答出“为什么需要它”以及“不用它有什么问题”。比如问到useMemo别只说“它用于缓存计算结果”要补一句“组件重新渲染时如果某个计算结果开销很大且依赖没变useMemo可以避免重复计算从而提升性能。但滥用useMemo反而会导致内存占用和依赖管理问题”。这种有正面、有反面、有取舍的回答才显得你是真的用过。另外面试官问到你不熟悉的领域时千万不要硬编。诚实的说法是“这个我没有在生产环境实际用过但根据我的理解它大概是……”——这种回答虽然暴露了知识盲区但展示了你的推导能力和求知态度远比瞎编一个答案体面。6.3 备战时间线与个人经验如果你现在离校招还有3到6个月我的建议是把时间分成三个阶段第一个月打基础。过一遍JavaScript核心机制作用域、闭包、事件循环、this、Promise、HTTP与浏览器原理、CSS布局。每学一个知识点就找一个前端面试题来做不要只看不写。第二到第三个月刷专项。按“框架原理”、“工程化”、“手写题”、“算法”四个方向专项突破。手写题每天写两道持续一个月基本能覆盖90%的高频手写题。最后一个月模拟与复盘。每周做一次完整模拟笔试用牛客网的企业真题模拟严格限时做完后把错题整理成自己的错题本。最后再分享一个我踩过多次坑之后总结出来的经验笔试中即使一道题你完全没有思路也不要留空。把题目重新读一遍把你认为可能相关的知识点、哪怕半截代码写在答题区有时候会得到意外的步骤分。更重要的是交卷前5分钟一定要回头检查一遍答案有没有明显的低级错误比如函数没调用、缺少分号、变量名拼写不一致。这些细节在阅卷人眼里往往代表了你的代码习惯是否职业化。 贝壳找房前端校招笔试题复盘：核心考点与答题思路拆解
每年秋招结束总有一批同学拿着贝壳找房的笔试链接来找我复盘。说实话这份试卷在2023届校招前端题里属于“看着不难、但分差极大”的类型——它不像某些大厂那样堆偏题怪题而是把前端的基础功底、工程化理解和业务场景设计揉在一起考。如果你只是刷过八股文而没有真实项目经验很容易在场景题和手写题上露馅。这篇博文我不会去复述网上流传的“原题答案”而是站在复盘的角度把贝壳这类房产交易平台前端校招试卷的核心考点、答题思路、常见失分点全部拆开讲一遍。无论你是正在准备校招的应届生还是想查漏补缺的前端新人这份拆解都能帮你理解一份合格的前端校招卷子到底在筛选什么样的人。1. 先从试卷看贝壳前端在招什么样的人很多同学拿到试卷第一反应是“赶紧做题”但我的习惯是反过来——先看这套题想筛什么。贝壳找房的产品形态决定了它的前端技术栈不会太冷门房源列表、楼盘详情、地图找房、IM咨询、VR看房这些业务涉及大量的列表渲染、地图交互、长列表性能优化和跨端适配。所以试卷里那些看似常规的题背后都贴着业务场景。1.1 贝壳前端技术栈与校招命题逻辑贝壳找房的Web前端过去几年主力栈是React TypeScript部分偏中后台的业务线用Vue工程化层面比较看重Webpack/Vite的配置能力、组件库建设、SSR/SEO方案。这不是什么秘密从他们的招聘JD就能看到要求熟悉React或Vue、了解前端工程化、有性能优化意识。校招命题的逻辑一般是三层递进第一层语言与基础。JavaScript核心机制、浏览器工作原理、网络协议、CSS布局。这层是筛掉“简历写了但基础不牢”的人。第二层框架与工程化。React/Vue原理、组件通信、状态管理、构建工具、代码规范。这层是筛掉“只会调API但不懂原理”的人。第三层场景与综合。手写代码题、业务设计题、算法题。这层是筛掉“只背题但不会解决实际问题”的人。三层不是割裂的试卷通常会交叉出题。比如一道“实现一个带防抖的搜索框”表面是手写防抖实际上是在模拟贝壳App里搜索房源的真实交互——用户连续输入时不能每敲一个字符就发一次请求这种题答得好不好直接反映你有没有处理过真实业务。1.2 在线笔试的形式与时间分配贝壳校招前端笔试题型按近两年情况看一般是“客观题 编程题”的组合。客观题覆盖选择题和填空题编程题则依赖在线OJ系统。整个笔试时长通常在90分钟到120分钟之间。时间分配上我见过太多人翻车前面客观题纠结太久后面编程题只能胡写。我的建议是倒着做——先花5分钟把所有题扫一遍优先把编程题里能拿的分拿到再回头啃选择题。因为编程题一题的分值往往顶得上好几道选择题而且编程题只要思路对、能跑通用例就算写得糙也有分。这个顺序在贝壳这类业务型公司尤其重要他们的编程题通常不难但信息量不小需要你留出足够时间去读题和设计数据结构。1.3 复盘的资料来源由于网络上的版本已经打乱我在这里不做“真题搬运”而是按照校招前端试卷的常规题型结合贝壳房产搜索、房源列表、详情页这类典型场景去重构考点和答题思路。如果你是准备面试的同学更该关注的不是某一道题的标准答案而是这套题背后的考察意图和答题框架——框架在手题目怎么变你都能接住。2. 基础与语言类考点JavaScript/TypeScript 的易错点拆解第一类必考题型就是JavaScript语言基础。这类题在贝壳试卷里占比不低但考察方式比较灵活不会直接问你“闭包是什么”而是给你一段代码让你写出输出结果或者让你指出代码里的问题。如果你平时只是“听说过”这些概念没真正手写过这里很容易连续丢分。2.1 变量提升、作用域与闭包的经典考法先看一道高频题var a 1; function foo() { console.log(a); var a 2; } foo();答案是undefined不是1也不是报错。原因就是变量提升——var a被提升到foo函数作用域顶部此时a已经声明但未赋值所以打印出undefined。这道题在试卷上属于送分题但送分题也拦住了不少人因为很多人只记住了“变量提升”这个名词却没有真正理解提升的执行过程。闭包题的考法通常是结合循环for (var i 0; i 5; i) { setTimeout(function () { console.log(i); }, 1000); }输出是5 5 5 5 5。你需要解释清楚为什么然后至少给出三种修法把var改成let、用 IIFE 包一层、用setTimeout的第三个参数传值。答题时不要只写一种解法尽量把三种都写出来并说明各自的原理。贝壳这类重视工程化的公司评分时很看重“你知不知道多种方案”以及“你知不知道选型的理由”。2.2 this 指向与箭头函数的坑this指向是选择题的重灾区。记住一个最朴素的判断方法this的指向取决于函数调用方式而不是定义方式。普通函数调用时this指向调用者箭头函数没有自己的this它继承外层作用域的this。有一道经典的组合题是这样的const obj { name: beike, getName: function () { return this.name; }, getNameArrow: () { return this.name; } }; console.log(obj.getName()); console.log(obj.getNameArrow());obj.getName()输出beike这没问题。但obj.getNameArrow()输出的是undefined因为箭头函数的this绑定在定义时的外层作用域也就是全局对象上而全局对象上没有name这个属性。很多同学在这里只记住了“箭头函数的this指向定义时所在的对象”却没搞清楚“定义时所在的对象”到底是谁。我建议大家做题时把箭头函数换成普通函数脑补一遍对比一下差异理解会更扎实。2.3 Promise、async/await 与事件循环的必考组合异步编程是前端笔试的重头戏贝壳的卷子里几乎一定会出现。考法很典型给你一段混着setTimeout、Promise、async/await的代码让你按顺序写出输出。我见过一道非常经典的真题变体async function test() { console.log(1); await Promise.resolve(); console.log(2); } console.log(3); test(); console.log(4);输出顺序是3 - 1 - 4 - 2。关键在于await后面的代码会被放入微任务队列而同步代码console.log(4)会先于微任务执行。这个机制如果你只是背结论换一题稍微变一下就会错。我建议你给自己画一张事件循环的顺序图同步代码 → 微任务Promise.then、await后面的代码→ 宏任务setTimeout、setInterval→ 回到微任务…这样无论题目怎么变都能推导出正确结果。在TypeScript方面贝壳这类大规模前端团队是比较看重的。高频考点包括type和interface的区别、泛型的约束、keyof和typeof的使用。这些考点常常藏在代码题里比如让你实现一个类型安全的get函数或者让一个函数的参数类型根据另一个参数动态变化。这种题答好了基本就能在“基础扎实”这一栏高分段锁定。3. 浏览器、网络与性能优化把页面加载讲出业务感第二类考点集中在浏览器和网络。这些知识在纯前端笔试里往往以选择题形式出现但贝壳的试卷里会结合性能优化成场景题——毕竟房产页面图片多、数据量大加载速度直接影响用户转化。这个模块不难但有技巧。3.1 从输入URL到页面渲染的完整回答框架“从输入URL到页面展示发生了什么”是前端校招几乎必考的一道题贝壳也不例外。这道题考察的不是你会不会背而是你能否有逻辑地串联起网络、浏览器、渲染引擎三块知识。我的回答框架是五段式网络请求阶段DNS解析 → TCP连接HTTPS还要做TLS握手→ 发送HTTP请求 → 服务器响应返回HTML。解析阶段浏览器拿到HTML后解析HTML生成DOM树同时解析CSS生成CSSOM树。构建渲染树DOM树和CSSOM树合并成渲染树Render Tree只包含可见节点。布局与绘制根据渲染树计算每个节点的几何信息Layout然后进行绘制Paint。合成与展示合成层交给GPU处理最终呈现在屏幕上。如果你只是背到这里那只能算及格。想拿高分一定要补上下面的优化细节HTML解析过程中遇到script标签会阻塞解析所以脚本要加defer或asyncCSS会阻塞渲染所以CSS要尽量合并减少请求图片不会阻塞DOM解析但会阻塞页面加载完成事件所以要用懒加载。这些细节贝壳的业务场景全都能用上——房源列表里几十张图片不做懒加载页面首屏根本出不来。3.2 HTTP缓存策略与浏览器存储的选型逻辑缓存是另一个考查重点。你需要把两套缓存机制说清楚强缓存通过Cache-Control和Expires控制命中的话直接读本地缓存不发请求。协商缓存通过Last-Modified/If-Modified-Since和ETag/If-None-Match控制需要向服务器发请求确认是否可用。答题时建议配一张小表格来对比缓存类型判断方式优点缺点强缓存直接读缓存不发请求快更新不灵活协商缓存发请求问服务器能拿到最新内容请求数多浏览器存储方面localStorage、sessionStorage、cookie、IndexedDB各是什么、能存多少、什么时候用都要能对比清楚。这里有个易错点cookie的容量只有4KB左右而localStorage可以达到5MB现在很多项目里会把用户身份信息从cookie迁移到了localStorage或更安全的方案。如果你在答题时能提一句“cookie 容易受CSRF攻击影响”会显得你有真实的安全意识这是额外加分项。3.3 性能指标与房产业务的优化结合点纯性能指标题考的是你对前端性能监控的了解。核心指标有FCP首次内容绘制、LCP最大内容绘制、TTI可交互时间、CLS布局偏移、FID首次输入延迟。你需要说出来每个指标的含义以及怎么用Performance面板或第三方工具去测量。但贝壳这类业务型公司更爱问的是如果线上某个房源详情页加载很慢你会怎么排查我的答题思路是先看网络请求是接口慢还是静态资源慢打开DevTools的Network面板找出耗时最高的请求。看资源体积有没有图片没压缩、JS/CSS有没有做代码分割、有没有Tree Shaking。看渲染过程有没有长任务阻塞主线程React/Vue的组件有没有不必要的重渲染看缓存命中静态资源有没有配好强缓存接口数据有没有做前端缓存看代码层面有没有排查过内存泄漏比如全局变量、未清理的监听器、定时器。这套排查思路不是背出来的是真实项目里反复用到的。我在简历辅导时经常跟同学说性能优化题不要只答“图片懒加载、CDN、Gzip”三件套一定要结合业务场景说清楚“优化前后发生了什么变化”才能拿高分。贝壳这类房产平台房源图片特别多说图片懒加载和CDN配置是完全可以拉满细节的。4. 框架与工程化React/Vue 与前端基建的实战视角到了第三层贝壳的试卷会明显加大对框架原理和工程化能力的考察。这部分不是简单的框架API记忆而是考察你是否真正理解框架的运行机制以及你有没有在真实项目里面对过工程复杂度的挑战。4.1 React Hooks闭包陷阱与依赖处理如果试卷里明确考ReactuseEffect、useCallback、useMemo几乎是必出题。最常见的坑是useEffect的依赖数组const [count, setCount] useState(0); useEffect(() { const timer setInterval(() { setCount(count 1); }, 1000); return () clearInterval(timer); }, []);这段代码的意图是每秒让count加1但实际效果是count永远停留在1。原因就是setInterval的回调里捕获了初始渲染时的count 0而依赖数组为[]导致useEffect不会重新执行、永远不会捕获到最新的count。正确答案有很多比如用函数式更新setCount(c c 1)或者把count加入依赖数组。这种题我建议你不仅要会改还要能说出背后的原理Hooks 的闭包机制就是每次渲染都会生成一份独立的闭包useEffect 依赖数组的作用是让 React 判断是否需要重新生成这份闭包。能把这个原理讲明白考察点就完整了。4.2 Vue 响应式原理与虚拟 DOM如果试卷里选考Vue那你需要重点准备两块响应式原理和虚拟DOM diff算法。Vue 3 的响应式原理是基于Proxy实现的拦截对象属性的读写操作通过track和trigger维护依赖关系Vue 2 则使用Object.defineProperty只能劫持已有属性所以会有$set这个API来处理新增属性。如果题目问“Vue 3 为什么用 Proxy 替代 defineProperty”你要能答出三点Proxy 可以监听整个对象而非某个属性、可以监听属性的新增和删除、是标准规范而 defineProperty 是 ES5 的老方案。虚拟 DOM diff 的考点是同级比较、key 的作用、为什么不建议用 index 作为 key。我见过一道很经典的考题“列表顺序反转时用 index 作为 key 会有什么问题”答案是key 相同React/Vue 会认为节点没变只做复用和移动但节点内部状态比如输入框内容会错乱同时也会有性能问题。这种题没有现场逻辑推演能力纯背答案很容易翻车。4.3 工程化Webpack/Vite、模块化与代码规范贝壳这类企业的前端团队工程化是他们内部的“基础设施”所以笔试对构建工具的考察也很上心。高频考点如下Webpack 的核心概念entry、output、loader、plugin、resolve。你要能说清 loader 和 plugin 的区别loader 处理文件转换plugin 处理构建流程中的扩展。常用 loader 和 pluginbabel-loader、ts-loader、css-loader、style-loader、MiniCssExtractPlugin、HtmlWebpackPlugin、CopyWebpackPlugin。代码分割与懒加载动态import()实现按需加载、SplitChunksPlugin提取公共代码。Vite 和 Webpack 的对比Vite 基于 ES Module开发环境启动快、热更新快但生产构建使用的是 RollupWebpack 生态更成熟、配置更复杂。工程化题目想要答好一定要有一个真实项目经验撑腰。哪怕是学校项目、个人博客只要你真的配过一次 Webpack、拆过包、优化过打包体积你答出来的细节和“纯背概念”完全不同。我建议如果时间充裕就自己动手配一遍 Vite React 或 Vue 的项目看懂配置文件的每一行作用再去应对这类题目。代码规范也是贝壳这类公司很看重的点。你至少要知道 ESLint、Prettier、Husky lint-staged 的组合用法ESLint 做代码检查、Prettier 做格式化、Husky 在 Git 提交前执行 lint-staged 只检查暂存区的代码。如果题目问你“前端代码规范一般包括哪些维度”你可以从代码风格、命名规范、目录结构规范、Git 提交规范Commitlint几个角度展开这是能看出你有没有团队协作经验的地方。5. 手写题与场景题一份可直接复现的完整作答现在到了整份试卷最见真章的部分手写代码题和场景设计题。贝壳这类公司非常看重这块因为前端岗位入职后几乎每天都在写业务代码你的代码组织和问题拆解能力在这里暴露得最彻底。5.1 高频手写题防抖、节流、深拷贝、Promise.all手写题是校招笔试的“硬通货”贝壳的卷子里通常会出现2到3道。这里我把最高频的几个手写实现整理出来你直接对着练防抖debounce的核心思想在事件被连续触发时只在最后一次触发后等待一段时间才执行函数。function debounce(fn, delay 300) { let timer null; return function (...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; }注意点有两个一是要用apply把this绑定到调用方二是要处理参数透传。很多同学在笔试时只写出了清除定时器的逻辑忘了绑定this这就扣分了。节流throttle的核心思想在一段时间内只执行一次函数。有两种实现时间戳版和定时器版。时间戳版立即执行、停止触发后不会再执行定时器版延迟执行、停止触发后会再执行一次。答题时可以写一种再加一句“另一种实现是 xxx”显得你理解全面。深拷贝的完整版应该支持对象、数组、函数、Date、RegExp并且要考虑循环引用function deepClone(obj, hash new WeakMap()) { if (obj null || typeof obj ! object) return obj; if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return new RegExp(obj); if (hash.has(obj)) return hash.get(obj); const clone Array.isArray(obj) ? [] : {}; hash.set(obj, clone); Reflect.ownKeys(obj).forEach((key) { clone[key] deepClone(obj[key], hash); }); return clone; }如果你能写出用WeakMap处理循环引用的版本这道题基本就是满分如果能用Reflect.ownKeys处理 Symbol 类型的 key还能再加分。Promise.all的手写是“看起来简单、写起来容易漏”的典型function promiseAll(promises) { return new Promise((resolve, reject) { const results []; let count 0; promises.forEach((p, index) { Promise.resolve(p).then((val) { results[index] val; count; if (count promises.length) resolve(results); }).catch(reject); }); if (promises.length 0) resolve(results); }); }这里最容易被忽略的是空数组边界如果传入空数组应该直接resolve([])。另外结果需要按传入顺序返回不能用push要用索引赋值。5.2 场景设计题实现一个房源搜索页的完整思路贝壳的试卷很多时候会出现综合场景题比如“请设计一个房源的搜索筛选页面包含搜索框、筛选条件、房源列表要求考虑性能优化、状态管理和错误处理。”这类题没有唯一答案但你需要展示出完整的思考链路。我的模板如下数据层用 React 的useReducer或状态管理库Redux/Zustand管理筛选条件把搜索条件设计成一个对象{ keyword, region, priceRange, page }每次筛选条件变化都触发新的请求。UI层搜索框用防抖处理输入列表用分页或无限滚动加载中显示骨架屏请求失败显示错误提示和重试按钮空数据给空的兜底UI。性能层列表项用React.memo包裹避免筛选条件变化时整列表重渲染图片用懒加载大列表用虚拟滚动react-window / react-virtualized。交互层搜索中的竞态问题用AbortController或者请求序号来丢弃过期响应筛选条件变化时自动重置页码。答这类题的重点不是“标准答案”而是你对边界问题的考虑是否充分。能把竞态处理、空数据兜底、错误重试这三个点说出来基本就能跟普通候选人拉开差距。5.3 算法题的常见类型与应对策略算法题在校招前端卷里通常占1到2道。贝壳这类公司的算法难度通常不会太高以LeetCode简单到中等的题目为主常见类型有数组类两数之和、三数之和、合并有序数组、移动零。字符串类最长公共前缀、有效的括号、字符串反转。链表类反转链表、合并两个有序链表。树类二叉树的前中后序遍历、最大深度、层序遍历。建议无论如何先把高频题型刷熟尤其是“两数之和”和“反转链表”这两道属于出现概率极高的题目。算法题的答题技巧是先写思路再写代码。即便最后代码没写完只要注释里写清楚了“我打算用双指针左指针从0开始右指针从末尾开始”阅卷人能看出你的思路方向是对的也能给部分分数。6. 现场发挥与备赛心法避开那些高手也会踩的坑最后这部分我不聊具体题目聊聊真正影响你分数的“场外因素”。我见过技术不错但笔试翻车的例子太多了问题往往不在技术本身而是出在答题习惯、时间管理和表达方式上。6.1 笔试环境与答题顺序线上笔试常见的坑有以下几类第一编辑器不顺手。很多在线OJ环境没有自动补齐代码提示也弱。平时写代码太依赖IDE的同学会非常不适应。我的建议是提前去牛客网、力扣的在线环境练习几次手写代码让自己适应“裸写”的感觉。第二输入输出格式。线上笔试的算法题经常要自己写readline处理输入很多人死在字符串处理上。高频的处理技巧要提前掌握比如用空格或换行切割输入、把字符串转为数字数组。第三时间分配失衡。前面题耗太多时间后面大题来不及写。我的策略是“先拿保底分再冲附加分”先把所有会写的题写完再回头磕不确定的题。编程题哪怕只写了个框架也要提交上去得个步骤分。6.2 面试中讲技术点怎么讲才不像背八股如果你笔试通过了后面还有面试。但面试的技术问题往往和笔试高度相关。贝壳的面试官经常是让你现场写代码然后不断追问看你能否讲出“为什么”。我辅导同学面试时最常说的一句话是技术点不要只答定义要答出“为什么需要它”以及“不用它有什么问题”。比如问到useMemo别只说“它用于缓存计算结果”要补一句“组件重新渲染时如果某个计算结果开销很大且依赖没变useMemo可以避免重复计算从而提升性能。但滥用useMemo反而会导致内存占用和依赖管理问题”。这种有正面、有反面、有取舍的回答才显得你是真的用过。另外面试官问到你不熟悉的领域时千万不要硬编。诚实的说法是“这个我没有在生产环境实际用过但根据我的理解它大概是……”——这种回答虽然暴露了知识盲区但展示了你的推导能力和求知态度远比瞎编一个答案体面。6.3 备战时间线与个人经验如果你现在离校招还有3到6个月我的建议是把时间分成三个阶段第一个月打基础。过一遍JavaScript核心机制作用域、闭包、事件循环、this、Promise、HTTP与浏览器原理、CSS布局。每学一个知识点就找一个前端面试题来做不要只看不写。第二到第三个月刷专项。按“框架原理”、“工程化”、“手写题”、“算法”四个方向专项突破。手写题每天写两道持续一个月基本能覆盖90%的高频手写题。最后一个月模拟与复盘。每周做一次完整模拟笔试用牛客网的企业真题模拟严格限时做完后把错题整理成自己的错题本。最后再分享一个我踩过多次坑之后总结出来的经验笔试中即使一道题你完全没有思路也不要留空。把题目重新读一遍把你认为可能相关的知识点、哪怕半截代码写在答题区有时候会得到意外的步骤分。更重要的是交卷前5分钟一定要回头检查一遍答案有没有明显的低级错误比如函数没调用、缺少分号、变量名拼写不一致。这些细节在阅卷人眼里往往代表了你的代码习惯是否职业化。