开篇先交代背景2024年秋招的节奏比往年更紧凑Shopee提前批笔试属于“早鸟场”一般挂在七月下旬到八月中旬之间和正式批共用一套题库但批次不同。很多人以为提前批只是试水实际上它决定了你能不能拿到后续面试的“优先通道”。我当年就是吃了信息差的亏以为提前批随便写写就行结果笔试排名靠后直接被锁了一轮流程。这篇把这套笔试的考察逻辑、准备方向和复盘方法完整拆开给准备投Shopee前端岗位的同学一份可以直接照着准备的清单。需要明确一个事实Shopee前端提前批笔试的难度整体处于中大厂校招的中等偏上水平。它不是纯刷题就能过的也不是只背八股就能过的。题目设计上明显带着“电商业务”的影子——高并发场景、数据状态管理、性能优化、组件设计、跨端适配甚至还有基于真实业务场景的开放题。这和Shopee的团队结构有关前端岗位不仅要写页面还要承担大量业务逻辑、数据层的联动工作所以笔试会刻意筛选那些“能干活”而不是“会背书”的人。我这次把笔试拆成五个模块来讲整体设计思路、前端专项核心考点、代码题实操分析、常见翻车点、以及从笔试延伸到面试的进阶准备建议。每一块都会结合具体的题型来展开尽量还原考场上的真实思考过程而不是单纯放答案。1. 整体设计与考察思路拆解1.1 提前批笔试的定位筛“可培养度”不筛“熟练度”先看一个很现实的点校招笔试和社招笔试的筛选逻辑完全不同。社招看的是你来了能不能直接上手所以题目会偏向框架细节、复杂业务架构、线上问题排查。校招不一样大部分候选人没有大规模线上项目的经验面试官想看到的不是“你什么都会”而是“你在不会的东西面前能不能快速建立正确的思考路径”。Shopee提前批笔试的题目设置就体现得很明显。基础题部分不会故意出偏题怪题考的都是JS原生功底、异步编程、数据结构和基础算法这是用来确认你已经具备了“工作半年后能独立上手”的底线。专项题部分则会更贴近真实业务比如缓存策略、渲染性能、状态管理、网络协议这些做一两个项目就能碰到但很少有人能讲透。所以这套笔试并不需要你“背多少题”它考的是你平时写代码时有没有积累正确的判断力。比如同样是写一个防抖函数有人能顺手把leading、trailing边界说清楚有人只知道setTimeout包一层——这就是区分度所在。1.2 题型结构与时间分配拿到卷子先看一眼大局按照往年规律Shopee前端提前批笔试一般是120分钟到150分钟题目分为三个板块编程题、前端专项选择题、场景设计题。编程题通常是两到三道分值占比最高判断题和选择题数量多但单题分值低场景设计题通常是最后一道占二十分左右。这里有个最常见的策略错误很多人拿到卷子就从第一道选择题开始老老实实做结果做到编程题的时候只剩半小时。我建议拿到卷子先用两分钟把全部题目扫一遍搞清楚编程题的分值和难度分布优先保证编程题有充足时间。因为前端专项题哪怕你有几道不会蒙对的概率也不低而编程题一道没写出来就是直接零分差距能瞬间拉开。时间分配上我的个人经验是编程题预留50到60分钟前端专项题控制在30分钟内场景设计题留20到25分钟剩下的时间用来检查边界条件和补测试用例。1.3 这个岗位到底在选什么样的人从笔试题目能反向推导出团队对前端工程师的核心要求大致可以归纳为四点。第一是基础功扎实。JS的闭包、原型链、作用域、事件循环、Promise机制这些必须达到“本能反应”而不是“回忆”的级别。第二是对浏览器和网络有系统性认知不是背“输入URL后发生了什么”而是能站在性能优化和异常排查的角度去理解每一层的作用。第三是具备数据状态管理意识电商场景下异步操作多、状态变更频繁状态管理设计得好不好直接影响应用复杂度。第四是“工程师思维”也就是面对模糊需求时能不能拆解问题、设定边界、给出取舍方案。这四点在笔试题里都有对应的考察方式。基础功对应选择题和手写代码浏览器网络对应专项题状态管理和设计思维对应最后的场景题。你在准备的时候就可以按照这个框架去查漏补缺而不是无头苍蝇一样地刷题。2. 核心考点详解与准备思路2.1 前端基础题不是背概念是看你能不能讲清楚来龙去脉前端专项选择题里最常出现的考点我做了个分类汇总基本跑不出下面这张表考点类别常见出题角度准备建议JS语言特性闭包、原型链、this指向、变量提升、作用域链用实际代码验证自己的理解不要只看概念异步编程Promise链式调用、async/await错误处理、事件循环顺序手动画执行顺序图把微任务和宏任务区分清楚浏览器机制渲染流程、回流重绘、缓存策略、存储方式结合Performance面板实测记忆会更牢网络协议HTTP状态码、HTTPS握手过程、TCP握手挥手、CDN原理重点理解每个状态码的业务含义而不是只记数字CSS与布局盒模型、BFC、flex和grid、响应式方案能解释“为什么这样写能实现居中”工程化工具Webpack构建流程、模块化方案、Tree Shaking原理至少能画出构建流程的主链路前沿方向微前端、Serverless、WebAssembly、跨端框架了解核心思想即可不用深挖源码选择题中容易丢分的是“判断题变体”题干会给出几段代码问你输出什么。这类题目没有任何捷径只能靠平时的手写练习来建立肌肉记忆。我建议对着上面的表格每个考点都至少找出十道相关题目刷一遍并且把错题的知识点整理成自己的笔记不要只收藏正确答案。2.2 网络与缓存专项电商场景下最容易考到的深水区Shopee毕竟是跨境电商页面需要同时面向多个地区、多端访问网络问题天然是重点。笔试选择题中网络部分占比不低而且面试追问时也喜欢沿着网络往下挖。HTTP缓存是必考内容。要熟练掌握强缓存Expires、Cache-Control和协商缓存Last-Modified/ETag的完整流程理解Cache-Control中max-age、no-cache、no-store、s-maxage这些字段的区别。很多人只记住了名词但笔试更愿意考的是“修改接口返回的Cache-Control会导致什么行为变化”。这里有一个必背的结论当服务器返回Cache-Control: no-cache时并不是不缓存而是每次使用前必须重新验证资源有效性协商缓存仍然可能命中304。CDN的考察频率也很高。电商静态资源基本都是走CDN的笔试常见的问题是描述图片资源从浏览器请求到CDN节点返回的完整链路以及如何保证资源更新后用户能拿到新版而不是命中旧缓存。这背后涉及CDN缓存刷新、版本号策略、URL指纹等机制建议把“静态资源发布后如何保证一致性”作为一个专题来准备这既是笔试高频考点也是日常开发的真实痛点。2.3 性能优化专题提前批笔试题里的“隐形加分项”如果选择题里出现了性能优化相关题目大概率不会直接问“如何做性能优化”而是会结合具体场景比如“首屏白屏时间长列出可能的排查手段”或者“长列表滚动卡顿应该从哪些角度优化”。这类题目的作答逻辑要遵循“从指标到方案再到验证”的链路。先说指标你要知道FP、FCP、LCP、CLS、INP这些核心Web Vitals各自衡量什么、正常范围是多少。再说方案根据指标异常反推可能的瓶颈再给出针对性的解决手段。比如LCP缓慢可能的原因包括服务器响应慢、首屏图片过大、渲染路径阻塞对应的优化手段就包括SSR、图片压缩、预加载、关键CSS内联等。还有一个容易被忽略的点是“性能优化不仅仅是加载性能”交互性能同样重要。React项目中的重复渲染优化、虚拟列表、防抖节流、Web Worker处理复杂计算都属于交互性能的范畴。笔试时如果允许补充说明我会宁可多写几个方向的优化点也不要只抓住一个方向死磕。2.4 场景设计题没有标准答案但必须有思考框架场景设计题通常是压轴题。往年出现过“设计一个电商搜索结果页的无限滚动列表”、“设计一个支持多端适配的商品详情页模块”这类题目2024年还有可能结合AI能力比如“给商品页面增加一个基于大模型的智能推荐模块请描述前端如何设计”。这类题目没有标准答案但评分标准实际上很明确看你能不能把需求拆解成可执行的模块有没有考虑数据流、组件粒度、异常处理、性能边界和可扩展性。我给你一个可以直接套用的解答框架按照这个顺序去思考问题基本不会踩大坑。第一步先澄清需求。如果题目描述不够细在答卷里明确写出你的假设比如“假设这个模块需要同时支持移动端和PC端假设单次返回结果为20条”。第二步画架构图。在答题框里用文字描述组件的层级关系和依赖方向比如“父组件负责数据请求子组件负责渲染列表项每个列表项内部用React.memo包裹”。第三步描述数据流。说明数据从哪里来、状态存在哪一层、如何更新。第四步列出需要考虑的边界场景。比如网络异常、数据为空、快速滚动导致请求竞态、下拉刷新的节流策略每写一个边界条件都是加分点。第五步讲清楚优化空间。如果需要你给出方案就说清楚为什么做这个取舍。3. 实操过程与代码级复盘3.1 手写代码题的几个高频类型与解法演进编程题部分是拉开差距的关键。在我接触过的Shopee笔试和模拟题里常见类型包括数组和字符串处理、链表操作、二叉树遍历、动态规划的基础题以及和前端强相关的手写题。两类我都会展开讲。先说说前端手写代码题这类题的核心不是“实现功能”而是“实现得规范”。以手写深拷贝为例很多人的第一版是这样的function deepClone(obj) { return JSON.parse(JSON.stringify(obj)); }这版在笔试中如果直接交上去面试官会觉得你“知道深拷贝但没深入思考过”。因为JSON方式至少有四个明显问题函数和undefined会被丢弃、Date对象会变成字符串、RegExp和Map/Set等特殊对象无法正确处理、循环引用会直接报错。一个能体现功力的版本是对特殊类型做判断同时使用WeakMap解决循环引用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 (obj instanceof Map) { const result new Map(); obj.forEach((value, key) result.set(deepClone(key, hash), deepClone(value, hash))); return result; } if (obj instanceof Set) { const result new Set(); obj.forEach(value result.add(deepClone(value, hash))); return result; } 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; }这段代码在笔试里能同时展示你对原型链的掌握、对内置对象的理解、对循环引用的考虑以及对Reflect API的熟悉程度。哪怕笔试时写不了这么完整也建议在平时练习中把它啃透这个代码在面试时的复用率非常高。3.2 一道经典算法题的完整演化从暴力解到最优解笔试里的算法题通常不会特别变态但也不会让你纯暴力过。我拿一道常见的题来分析思路给定一个整数数组找出其中两个数之和等于目标值的所有唯一组合返回索引下标。暴力解是双重循环时间复杂度O(n²)。这在数据量小的时候能过但笔试系统往往会有大数据的隐藏测试用例O(n²)很可能超时。所以需要优化。优化的思路是空间换时间用哈希表记录已经遍历过的数字和对应的下标。遍历每个数字时检查target - current是否已经在哈希表里存在就返回结果。这样时间复杂度降到O(n)空间复杂度O(n)。这个解法一般就能通过笔试了但如果想继续体现思考深度还可以提一下“如果数组是排好序的可以用双指针做到O(1)额外空间”这会让面试官觉得你脑子里有一整套解法图谱。笔试时的一个实用建议是每道编程题提交前都自己手动构造几组测试用例空数组、单个元素、重复元素、正负数混合、目标值不存在等情况。不要只测示例输入隐藏用例往往会在边界条件上卡人。我在笔试时吃过亏有些题目示例能跑通但忘记处理空数组导致用例覆盖不全白白丢分。3.3 前端框架题React 和 Vue 都考的“状态管理”思维Shopee的前端团队主力技术栈是React但笔试中不会拘泥于具体框架而是考察框架底层的通用设计思想。选择题里常见的考察点是React的函数组件与类组件区别、Hooks的依赖数组原理、useEffect和useLayoutEffect的差别、React.memo和useMemo的使用场景、Vue的响应式原理和依赖收集。这里有一个容易混淆的点React的useMemo和React.memo虽然名字里有memo但使用场景完全不同。useMemo是缓存计算结果React.memo是避免组件重复渲染。笔试选择题特别喜欢在这种细节上设坑一定要区分清楚。编程题如果涉及组件设计通常会让一个组件在高频父组件更新时保持自身状态不被重置。这个问题的本质是理解组件的key和重新渲染机制。如果你能让组件的props保持引用稳定并用useMemo包裹计算密集的部分就能降低不必要的render开销。答题时如果时间允许把函数组件写成完整可运行的代码再加入注释说明你的优化思路这部分得分率会高很多。3.4 关于“逆向思维”和“Doris FE/BE”笔试之外的技术深度储备最近在搜索热词里看到“shopee逆向”和“doris fe和be”这些词表面看着和笔试关系不大但其实是面试阶段的高频题。既然提前批笔试通过后马上就会进入面试环节我建议在准备笔试的同时就把这几个方向先铺好路。所谓“逆向”在校园招聘的语境里通常不是指破解什么而是指线上问题排查能力。举个例子线上环境某个详情页白屏率突然升高你怎么从“现象”反推“原因”这就叫逆向排查。考察的是你能否从浏览器控制台报错、Network请求状态、服务端日志、数据埋点这几个层面层层缩小范围。笔试不会直接考这样的题目但面试官很可能在聊项目经历时冷不丁地问一句“如果你负责的页面线上出问题了你的排查思路是什么”。另一个方向是分布式系统基础网上经常会聊到“Doris FE和BE”这其实是Apache Doris这个OLAP分析型数据库的两个核心节点角色。FE是Frontend节点负责SQL解析、查询规划和元数据管理BE是Backend节点负责数据存储和查询计算。前端同学很自然地会联想到自己工作中的“前后端分离”概念。懂了这个概念在面试中聊到大流量业务下的报表需求、实时数据展示时就能体现出你对后端数据链路的理解而这一点是很多前端候选人完全不具备的差别优势。4. 常见问题与避坑指南4.1 时间分配失控选择题耗时过多编程题来不及写这是笔试翻车最常见的原因没有之一。我见过身边不少同学前面的选择题每道都反复斟酌结果编程题只剩十分钟只能写个空壳子。应对办法很简单拿到卷子先扫题把编程题做完、做扎实再回头处理选择题。选择题哪怕最后没有时间全部做完你尽力蒙上的正确率也比编程题零分要好看得多。4.2 编程题不写注释、变量命名随意导致改错笔试系统通常不允许你可以“事后解释”你的思路代码就是你唯一的表达方式。不写注释、i和tmp满天飞很容易在修改代码过程中把自己绕晕。我以前觉得笔试时间紧张注释可以省略后来发现完全不是这样。写注释的过程其实是整理思路的过程你在注释里写出“这一步在做去重”时如果逻辑不对自己马上就能发现。命名方面建议至少做到语义明确。同样的逻辑用currentIndex就比用i更容易在调试时定位问题。特别是在涉及递归、循环、指针移动的时候清晰的命名能帮你省下大量的自我排查时间。4.3 边界条件考虑不周导致隐藏用例失败很多同学在自测时只测题目给的示例忽视了边界条件隐藏用例一跑就挂。我在这里列一个通用检查清单做任何一道编程题时都可以逐项过一遍空输入或长度为0的输入是否能正常返回只有一个元素时逻辑是否正确目标结果是否存在多个、重复元素是否处理数字是否可能出现负数、极大值、超出整数范围指针和索引是否会出现负值或越界递归函数是否存在无限递归的风险这六个问题的答案在写代码过程中就要提前想清楚而不是等代码写完了再来测。把边界检查前置效率要比写完后反复调试高很多。4.4 场景设计题答得宽泛没有落地的技术方案场景设计题最怕的写法是“要优化性能要提升体验”这种空泛口号。不要用形容词答题要用名词和动词来答题。举个例子描述无限滚动列表时“使用虚拟滚动”这个方案比“优化性能”更有信息量。你再进一步“采用固定行高的虚拟列表维护可视区起始索引和结束索引利用transform执行位移动画”就更像一个工程师在说话。这体现的不仅是知识量更是“把想法落地成技术动作”的能力。4.5 对框架和原生API的边界认识不清笔试中经常出现让你“不使用框架实现某个功能”的题目考验的是对原生API的掌握程度。很多同学平时框架写得多原生方法反而生疏了。比如让你用原生JS实现事件总线有人会卡在addEventListener和EventTarget的用法上。针对这个问题我在笔试前专门做了一次原生API的梳理把数组的各类方法、字符串方法、Object.keys和Reflect.ownKeys的区别、EventTarget接口的用法都重新过了一遍。这个过程很枯燥但效果非常明显至少让我在手写题时不至于因为API不熟而卡壳。5. 笔试后的衔接与延伸准备5.1 考完别躺平笔试复盘和面试衔接要同步进行笔试交卷后的一到两周内可能会收到面试通知但很多人在这段时间里完全松懈了等面试通知来了才开始准备往往手忙脚乱。我的建议是笔试后的当天晚上就对题目做一次完整的复盘。不用等成绩出来你心里其实知道自己哪些题目答得不确定。把不确定的考点标记出来逐个查资料补清楚。更关键的是笔试中出现的场景题大概率会在面试中被延伸追问。比如说笔试写了“组件加React.memo做优化”面试官就会追问“memo的深层比较是如何实现的”“为什么props保持引用稳定能避免渲染”。所以笔试结束不是解脱而是下一轮精准查漏补缺的开始。5.2 从笔试到面试为什么系统设计题越来越重要近几年大厂前端面试越来越重视系统设计题不单是Shopee整个行业都是这个趋势。原因很简单单纯问八股很难区分候选人的真实水平而系统设计题能让面试官看到一个人面对复杂问题时的思考链路。系统设计题和笔试场景题的区别在于面试需要通过语言交互推进你一边说思路面试官一边追问和引导。这里容易踩的坑是想当然地一开始就给方案没有先讨论约束条件。比如面试官让你设计一个购物车的状态管理方案你直接扑到Redux写法上但人家可能想让你先讨论多端同步、临时态和持久态的区别、订单并发时的数据一致性。先把问题边界划清楚再谈技术选型是面试中很重要的能力。5.3 拓展知识面从“前端”向“全链路”延伸的加分项笔试中的技术广度是可以通过短期冲刺临时补上的但能让你真正拉开差距的往往在现场写代码和面试交流。这里我特别推荐所有前端候选人去了解一些分布式系统和数据库的基础概念不一定是为了面试而是为了建立“全链路”的技术视野。很多同学会问前端为什么要懂Doris的FE和BE、为什么要知道数据节点和计算节点的分工。原因很简单电商平台的核心是交易数据和商品数据前端页面展示的每个模块背后都是复杂的数据流转链路。当你理解了数据从写入到分析、从OLTP到OLAP的流转过程你在做前端技术方案时就会多一层思考当前展示的数据是从哪里来的、它的时效性有多高、能否缓存、能否预加载。这些思考在笔试和面试的场景题里都会成为你回答里的“高光点”。5.4 资源推荐三个月内可以走完的备考路线最后给一套自学资源清单和路线。时间有限的话优先掌握框架基础不要追求读完所有源码。第一阶段第一到两周做基础查漏补缺重点看JS核心概念、浏览器工作原理、HTTP缓存、手写深拷贝和防抖节流这类高频手写题。第二阶段第三到四周进入框架深度学习建议围绕“状态管理”这个主线去看Redux、Zustand或Pinia重点理解它们解决的问题和性能差异。第三阶段第五到六周刷算法题每天保持两到三道优先覆盖数组、字符串、链表、二叉树和基础动态规划。第四阶段最后两周打乱模块做模拟笔试严格按照120分钟的时间限制来练训练自己在时间压力下保持输出稳定。笔试说到底是一次“能力策略”的组合测试。能力决定了你能做对多少题策略决定了你明明会做的题能不能拿满分数。把每个模块的正确率稳定在85%以上再把时间分配练成肌肉记忆通过概率自然会上去。我个人在备考过程中最深的体会是笔试不只是拿到面试门票的跳板它更像一面镜子能把你的知识盲区照得很清楚。与其焦虑“能不能过”不如把每次练习都当成一次定位漏洞的机会。当你把漏洞一个个补上Offer其实就是顺带的事。最后再分享一个小技巧如果你手头有两三套模拟题不要一次性全做完每次做一套都留时间复盘错题隔三天再做下一套这样能让错题在你脑子里的印象更加深刻比盲目刷十套题的效果好得多。