1. 先看这一场笔试到底考什么2020年网易校招前端开发工程师正式批这一场我在现场的印象其实挺深。不是因为题量特别大而是它考的方式很“网易”——不跟你绕弯子基础题、原理题、手写题、开放题一股脑全来你要是只会背面试题根本没时间编。先说考试的基本盘。多数大厂校招笔试都分几块单选/多选问答题编程题外加一两道开放性设计题。网易这场也不例外但它的重点明显放在“你能不能解释清楚原理”和“能不能直接写代码”上而不是“你记了多少框架API”。我当时考完跟几个一起准备的同学对了一下大家一致的感觉是JS基础、浏览器原理、网络、手写实现占了很大比例框架题反而不算多Vue和React都有涉及但都是偏原理的东西比如响应式依赖收集、diff过程这种问得很细。这背后的逻辑其实很直接。校招候选人没有太多真实项目经验面试官想知道的是你有没有扎实的底层功底能不能在入职之后快速上手。你简历里写“熟悉Vue”笔试就考你Vue的响应式怎么实现的你写“了解浏览器渲染”笔试就问你怎么减少重排重绘。说白了笔试筛的就是基础扎实程度而不是背了多少库。我把当时整理过的考点分布列个表大家参考考察模块大概占比典型问题方向JavaScript核心25%-30%原型链、闭包、this、事件循环、手写防抖节流/深拷贝浏览器与网络20%左右渲染原理、HTTP缓存、跨域方案、性能优化HTML/CSS10%-15%布局实现、BFC、盒模型、选择器优先级框架与工程化15%-20%Vue/React原理、Webpack配置、组件通信、构建优化算法与编程题20%左右字符串处理、链表、排序、动态规划、手写实现开放性题目5%-10%监控系统设计、首屏优化方案、代码评审这个结构放到今天看依然不过时。这两年前端面试热度词里面前端八股文、前端面试题、前端开发skills这些关键词反复出现说明大家的需求还是集中在“怎么系统梳理大厂考点”这件事上。说白了2020年的时候这些题目是大厂筛人标准到了2025、2026年很多中小厂也把同样的内容拿来做参考。原理永远比题库值钱。2. JavaScript核心考点背八股和懂原理是两码事2.1 原型链与继承绕不开的送分也送命题原型链这块几乎是每次必考。网易这场选择题里出现了一道题给你一串访问对象属性的代码让你判断输出。这类题本身不难但如果你只是知道obj.xxx会沿原型链往上找却没有真正理解prototype、__proto__、constructor三个概念的关系碰到稍微绕一点的链式继承就会卡住。我当时事后复盘理清思路其实只需要记住一个核心prototype是函数对象上的属性__proto__是每个对象都有的属性指向构造它那个函数的prototype。所有对象最终都指向Object.prototype再往上就是null。当你访问一个属性时引擎会沿着__proto__链一层一层找找到就返回找不到返回undefined。继承这块ES5的寄生组合式继承和ES6的class extends是必背的内容。经典考法是让你写一个寄生组合式继承或者让你解释class语法糖底下的原型指向。我当时整理过一段手写大家可以当成参考模板function inherit(Child, Parent) { Child.prototype Object.create(Parent.prototype); Child.prototype.constructor Child; }这行代码很多人会写但被追问一句“为什么不能直接Child.prototype Parent.prototype”就答不上来。直接赋值会让父子共享同一个原型对象子类改原型会影响父类。Object.create的作用是创建一个新的对象新对象的__proto__指向父类原型这样在子类原型上加方法不会污染父类。这就是为什么要多绕一步。2.2 闭包、作用域与this考题里的常青树闭包和this基本是笔试的“双保险”——不考就觉得不完整。这套笔试题里有一个很经典的循环输出题for循环里用var声明变量然后setTimeout输出问输出结果是什么。输出全是最后一次循环的终值因为var是函数级作用域定时器回调执行时拿到的是同一个变量。改法有两种用let或者用闭包包一层。this的四种绑定规则默认绑定、隐式绑定、显式绑定、new绑定也是选择题高频。我当时记住一个判断顺序先看是不是new调用再看有没有call/apply/bind然后看是不是对象方法调用最后才是默认绑定严格模式下是undefined。箭头函数没有自己的this往外层找。这套顺序应对绝大部分判断题都够用。闭包这一块除了概念还喜欢考内存泄漏。被闭包引用的变量不会被垃圾回收所以如果闭包生命周期过长或者被意外挂到了全局就可能在老版本IE里出现循环引用导致的内存泄漏。后来ES6的WeakMap可以巧妙解决这个问题因为WeakMap的键是弱引用不阻止垃圾回收。笔试如果问“WeakMap和Map的区别”十有八九就是冲着这个场景来的。2.3 事件循环与异步输出题好多人挂在 await 这网易这批笔试明显加大了异步输出题的难度。题目经常是这样给几段Promise、async/await、setTimeout混在一起的代码让你写按顺序输出什么。做这类题的关键不是背“微任务先于宏任务”而是理解每一层执行顺序的细节。我总结一个排查顺序同步代码先执行完。执行所有微任务队列里的任务Promise.then、queueMicrotask、MutationObserver等。取出一个宏任务执行setTimeout、setInterval、I/O等。再清空微任务。循环往复。await是另一个坑。await右侧的表达式会立即执行但await后面的代码相当于放进一个微任务里。如果await后面跟着的是一个已经 resolve 的 Promise那么后面的代码要再等一个微任务轮次。很多年前就流传的“async/await 比 Promise 慢一个微任务”就是这里来的。这类题平时练的方式很简单打开控制台把代码粘进去跑一遍把实际输出记下来然后手动推导一遍对不上就一行一行打断点看。踩过几次坑之后基本就能形成肌肉记忆。2.4 手写题防抖节流、深拷贝、Promise.all网易笔试的手写题不搞虚的直接让你写能跑的代码。防抖和节流这种属于“必须闭眼能写出来”的级别。我记得当时的题目是在线编程要求实现一个防抖函数并说清楚使用场景。这两种东西网上有无数版本关键是你得知道区别防抖是“最后一次触发后等一段时间才执行”节流是“固定时间间隔内最多执行一次”。深拷贝是另一道常客。基础的递归写法大多数人都能写但笔试题会加条件需要支持数组、对象、Date、RegExp还要能处理循环引用。我当时用WeakMap存已拷贝对象遇到循环引用直接返回缓存算是个标准解法function deepClone(target, cache new WeakMap()) { if (target null || typeof target ! object) return target; if (cache.has(target)) return cache.get(target); const result Array.isArray(target) ? [] : {}; cache.set(target, result); Object.keys(target).forEach(key { result[key] deepClone(target[key], cache); }); return result; }顺带说一嘴JSON.parse(JSON.stringify(obj))能不能用来做深拷贝能但有限制undefined、函数、Symbol会被丢弃Date会变成字符串循环引用直接报错。笔试问到这你最好主动把这些缺点说出来显得你是真用过而不只是背答案。3. 浏览器与网络前端面试的分水岭在这里3.1 渲染原理从URL输入到页面展示发生了什么网易笔试里有道简答题问的就是输入URL到页面展示的完整过程这算是前端笔试的固定节目。标准回答要从DNS解析开始然后是建立TCP连接、发送HTTP请求、服务器响应拿到HTML后浏览器开始解析构建DOM树和CSSOM树合成渲染树然后布局、绘制、合成。容易被扣分的点在于“重排和重绘的区别”。笔试会问改width、改color、改transform各会触发什么答案分别是重排、重绘、合成。现代浏览器对transform和opacity做了优化能走合成层不触发重排重绘这就是为什么动画推荐用transform而不是改top/left。这个细节很能拉开差距。性能优化题通常也从这个点切入减少DOM操作、批量修改样式、用requestAnimationFrame代替setTimeout做动画、避免在循环里读取导致强制同步布局的样式属性等。笔试考这个不是为了让你背条目而是考察你有没有在真实项目里排查过卡顿问题。3.2 HTTP缓存一问一个准HTTP缓存这块网易笔试有一道选择题考了Cache-Control的优先级Cache-Control出现时Expires会被忽略max-age0和no-cache的区别是前者表示缓存立即过期但依然可以用协商缓存验证后者表示使用缓存前必须去服务器验证。很多人把no-cache理解成“不缓存”其实完全错了它只是“每次都要问服务器让不让用”。协商缓存的两个头要记牢Last-Modified/If-Modified-Since和ETag/If-None-Match。前者以秒为单位存在精度问题后者是内容哈希更精确。如果服务器返回304浏览器可以用本地缓存否则返回200和新的资源。现在大厂里一般强缓存配immutable让文件名带哈希的资源长期缓存HTML不缓存或者短缓存这个策略面试官会很熟悉。3.3 跨域不仅要会方案还要会选型跨域方案是笔试问答题的常客。最基础的三种JSONP只支持GET靠动态创建script标签、CORS服务端设置响应头支持各种请求方式、代理开发环境用webpack devServer proxy生产环境用nginx反向代理转发。容易被深入问的是CORS的预检请求。当请求不是简单请求比如自定义头、Content-Type是application/json、用了PUT/DELETE等方法浏览器会先发一个OPTIONS请求问服务器允不允许。优化方案要么让后端直接处理OPTIONS要么把请求变成简单请求减少预检。前后端联调时经常遇到“请求发不出去”的报错十有八九就是预检没过。跨域问题的底层原因是浏览器的同源策略这是为了保护用户数据安全。所以在回答跨域方案时最好能提一嘴“同源策略防的是什么”这样显得你不只是背了一堆方案而是理解它存在的意义。另外现在常见的还有postMessage跨域通信、document.domain子域名之间、window.name、location.hash但生产环境最常用的还是CORS和代理。3.4 前端正在被问到的新方向这两年笔试和面试的热词里好多跟浏览器能力相关的新方向也很突出比如“前端使用worker上传大文件”、“前端JS解码H264”。大文件上传的核心是分片。把文件切成若干片每片单独上传记录进度断点续传时只传未完成的片。这里面的技术点包括用File.slice()切分、用Blob对象读文件、用Web Worker在主线程外计算文件哈希比如用spark-md5计算整个文件的指纹避免主线程卡死。上传过程还要考虑并发控制、失败重试、服务端合并分片。这类题看着很“工程”但在简历里写自己做过上传功能的同学面试官大概率会追问这些细节。至于JS解码H264WebCodecs和MSE是关键词。WebCodecs允许开发者直接控制视频编解码器配合Web Worker做解码再绘制到Canvas上可以绕开浏览器的解码限制。这类偏门问题大概率不会作为主考题出现但如果笔试里夹杂一个多选题“以下哪些浏览器API可以用于处理视频”你能说出WebCodecs、MediaSource、Canvas面试官印象会好很多。4. HTML/CSS看起来简单全是细节4.1 布局题手写两栏三栏与垂直居中网易笔试的选择题和简答题里都有布局题。垂直居中是最常见的解法包括flexdisplay:flex; align-items:center; justify-content:center、绝对定位加负margin需要知道子元素宽高、绝对定位加transform不需要知道宽高、gridplace-items:center。这几种方案最好都写在脑子里笔试见到直接按场景选。两栏布局左侧固定宽度右侧自适应经典解法是左侧float或position:fixed右侧margin-left给固定宽度现代化方案直接flex左侧flex: 0 0 200px右侧flex: 1。三栏布局可以引出圣杯布局和双飞翼布局这两个虽然已经不太常考但不妨碍有时选择题里会冒出来一个让判断“哪个布局方式实现了中间列优先渲染”。这里提示一个细节flex 中flex: 1其实是1 1 0%不是flex: 1 1 auto。很多人理解成按内容撑开后再等比分配空间其实它表示flex-grow: 1; flex-shrink: 1; flex-basis: 0%也就是宽度从0开始分配剩余空间。笔试考flex时把这个区分讲清楚是很加分的。4.2 BFC、层叠上下文与选择器优先级BFC块级格式化上下文是CSS高频理论考点。触发BFC的方式有这些overflow不是visible如auto/hidden、display: flow-root、position: absolute/fixed、float非none、display: inline-block等。BFC能解决的问题包括父子外边距折叠、清除浮动、阻止元素被浮动元素覆盖。笔试如果给你一段CSS问你两个div之间的间距是多少十有八九考的是外边距塌陷。层叠上下文和BFC经常混着考。创建层叠上下文的条件有position加z-index不为auto、opacity小于1、transform非none、filter非none、will-change等。两个元素都有z-index时谁高谁显示层级相同时后面的元素盖住前面的。选择题特别喜欢把position: relative的z-index: 1和一个处于不同层叠上下文里的z-index: 999放在一起考结论是它们不在同一个上下文时不能直接比较。选择器优先级也是一个选择题重灾区。规则是!important 行内样式 ID class/属性/伪类 元素标签。同样是class后面的规则覆盖前面的。笔试中给一串选择器算权重值不算难难的是混合了:not()不计本身但内部选择器正常计和:nth-child()这种伪类的情况。平时多拿真实代码验证几次就没问题。4.3 盒模型与HTML5细节题box-sizing这个题所有前端面试几乎必考。标准盒模型是content-box宽高只算内容区padding和border额外增加怪异盒模型是border-box宽高包含padding和border。设置box-sizing: border-box后子元素能直接填满父容器不用担心边框撑破。为了开发省心很多团队会全局设置* { box-sizing: border-box; }。另外还有几个冷门但会考的细节img是内联元素但底部会有几像素的间隙因为它是按基线对齐的解决办法是display: block或vertical-align: middle百分比padding的基准是包含块的宽度包括水平方向和垂直方向所以可以用padding-top: 100%实现正方形这是个巧妙的CSS技巧。HTML5语义化标签也是常客header、footer、nav、article、section、aside、figure这些。笔试不会直接问你能列出几个标签而是给你一个页面结构让你用语义化标签重写。回答时顺带说一句“语义化有助于SEO和无障碍访问”就点到了热词里“前端SEO”的需求点上。还有Storage、History、FileReader、Canvas、SVG这些API选择题里偶尔出现知道它们分别的用途就行。5. 框架与工程化从会用变成会解释5.1 Vue与React响应式和diff是核心网易笔试对框架的考察不偏门但问得深。Vue 2的响应式原理是必背Object.defineProperty遍历对象属性给每个属性重写getter和settergetter里收集依赖setter里通知更新。数组和新增属性是它的痛点所以Vue 2要额外重写数组的7个方法也要用Vue.set来处理新增属性。Vue 3用Proxy重写了这部分能监听属性新增和删除、数组变化性能也更好。这道题既考原理又考版本演进答出来基本就能及格。React部分常考Hooks。useEffect的依赖数组逻辑是重点依赖为空时只在挂载后执行一次依赖变化时每次变化后执行返回的清理函数在下一次执行前或卸载时调用。笔试出题通常是让判断一段Hooks代码的渲染次数陷阱往往在于闭包陷阱——函数组件每次渲染都会生成新的函数实例如果useEffect的依赖没写全拿到的就是旧值。解决方式是用useRef存最新值或者把依赖写全。diff算法这块Vue和React都有对应问法。核心思想是同级比较、用key优化、不跨层级移动节点。key的作用是识别节点复用尽量不用index做key因为列表增删会导致复用错乱产生状态bug。这些内容在真正的开发里踩一次坑就懂了笔试时把它有条理地说出来就好。5.2 Webpackloader和plugin的逻辑Webpack的常考点集中在四个问题上loader和plugin的区别、构建流程、热更新的原理、性能优化。loader是文件处理转换器在模块加载时执行比如babel-loader把ES6转成ES5、css-loader处理CSS里的url和importplugin则是插件在构建生命周期里监听事件比如HtmlWebpackPlugin生成HTML、MiniCssExtractPlugin拆分CSS。简单说loader专注“一个文件怎么转”plugin专注“整个构建过程怎么定制”。热更新HMR的原理是Webpack Dev Server启动时通过WebSocket和浏览器建立连接改动文件后重新编译把变更模块的hash推给浏览器浏览器用new Function执行新模块代码并调用相关模块的accept回调去更新页面。平时用起来只是觉得“保存就刷新”但笔试考的是背后的机制。构建性能优化的答案比较固定thread-loader多进程打包、cache-loader缓存、DLLPlugin预编译第三方库、TerserPlugin压缩JS、代码分割splitChunks把公共库独立打包、按需加载import()动态导入拆出路由级别的chunk。回答时提到“小图标用base64、大图片用CDN”这类实际操作会让答案更真实。5.3 组件库、微前端与低代码热词背后的技术从热词里可以看到大家还格外关注“前端组件库”、“hzero前端开发”、“微前端”、“BPMN前端自定义流程”这些方向。组件库的考点是封装思路Props控制行为、Slot/children控制结构、事件转发、样式隔离、按需引入。回答时可以提一下自己的组件库封装经历比如封装一个Table组件需要考虑哪些状态和事件。微前端是这几年比较火的方向。核心概念是“技术栈无关的子应用集成”常见方案有qiankun基于single-spa和Webpack Module Federation模块联邦。qiankun的核心是JS沙箱和样式隔离JS沙箱通过Proxy代理window上的属性子应用卸载时恢复原状样式隔离可以通过Shadow DOM或给子应用容器加特定前缀实现。这类题现在出现的频率越来越高即使笔试不考面试大概率也会跟进追问。BPMN自定义流程、字典管理、数据大屏这些词说明前端正在深入业务系统。字典管理的意义是统一维护枚举值前后端通过字典编码翻译显示文本改字典不用发版。数据大屏部署要关注的则是静态资源缓存、API网关、WebSocket实时推送、Canvas绘制性能这些点。能把业务系统的技术细节讲清楚说明你不是只写页面而是在思考整个系统怎么落地。6. 算法与编程题笔试里最能拉开差距的部分6.1 高频题型与解题思路网易笔试的编程题一般是两到三道限时一共三四十分钟。题型相当固定大部分在LeetCode简单到中等难度之间。我按出现频率排了个序字符串类判断回文、最长无重复子串、字符串反转、数字转中文。数组类两数之和、三数之和、最大子序和、合并两个有序数组、找重复元素。链表类反转链表、判断是否有环、合并两个有序链表、删除倒数第N个节点。栈与队列有效括号、用两个栈实现队列、最小栈。树类二叉树前中后序遍历、层序遍历、最大深度、镜像二叉树。动态规划爬楼梯、打家劫舍、最长递增子序列。面对这些题核心不是背答案而是总结套路。比如“两数之和”可以暴力双重循环但标准解法用哈希表把时间复杂度降到O(n)“有效括号”用栈来匹配遇到左括号入栈遇到右括号出栈最后判断栈是否为空“反转链表”用一个prev指针逐步改变next方向。把这些方法论记牢就算换个题目包装你也能往这几个方向靠。笔试里还有一类“剑指Offer风格”的题比如“实现一个函数输入n输出斐波那契数列第n项”。递归写法能做但会超时因为重复计算太多正确姿势是动态规划用两个变量滚动累加时间复杂度O(n)空间复杂度O(1)。这种“你交了一个能跑的答案但性能不过关”的情况笔试判题时很常见平时得练着分析时空复杂度。6.2 真题思路复盘从读题到调试当时有几道题印象很深。一道是给一个字符串找出最长的不含重复字符的子串长度。这类题标准解法是滑动窗口用两个指针维护一个窗口右指针不断向右扩展遇到重复字符就把左指针移到重复字符的下一个位置用一个哈希表存字符最后出现的下标实时更新最大值。另一道是链表反转要求用迭代和递归两种方式实现。迭代解法比较好想初始化prev null然后遍历链表每次先保存next再把当前节点的next指向prev依次推进。递归解法要理解“假设后面已经反转好了”把当前节点的next的next指向它自己再断开原来的next递归结束条件是链表为空或只有一个节点。还有一道是爬楼梯一次可以上1级或2级问上n级楼梯有几种方法。本质上就是斐波那契数列f(n) f(n-1) f(n-2)。笔试时我直接用了滚动数组写法不会因为递归栈溢出而挂掉。这类题给的建议是不管多简单的题都先想最笨的解法再优化。确保提交上去的代码在边界条件下也能通过比如n等于0或1的情况。6.3 编程题的输入输出与调试技巧很多同学栽在编程题不是不会写而是不会处理输入输出。牛客网和赛码网这类在线笔试系统有些题目要求你自己读取多行输入比如第一行是一个数字n后面n行每行有两个数。如果你平时只在LeetCode上刷题习惯了已经给好的函数参数突然遇到这种“自己处理stdin”的情况就会懵。解决方式很简单提前熟悉readline或process.stdin的写法。JavaScript里最常用的方式是这样的const readline require(readline); const rl readline.createInterface({ input: process.stdin, output: process.stdout }); const lines []; rl.on(line, line lines.push(line)); rl.on(close, () { // 按行解析第一行通常是数量 });还有一个容易忽略的坑笔试平台的代码运行在Node环境不是浏览器。所以不能用alert、prompt、window这些浏览器API。我在笔试中遇到过同学把代码写成了浏览器环境里的调试版本结果在判题系统里直接报错。平时多在这些平台上模拟几次熟悉它们的报错风格和运行机制上了考场才不会因为环境问题翻车。7. 开放性设计题考察的不只是技术7.1 系统设计类做一个前端监控系统网易这套笔试的最后一类题是开放设计题没有标准答案但很能反映一个人有没有系统思考的能力。我当时遇到的设计题是“如何设计一个前端监控系统”。这类题答得好不好往往决定了面试官有没有兴趣给你发下一轮邀约。回答的框架可以拆成四层采集层、上报层、存储层、展示层。采集层负责收集错误信息window.onerror捕获JS运行时错误、unhandledrejection捕获Promise异常、性能数据Performance API拿白屏时间、首屏时间、FP/FCP/LCP、用户行为数据点击、路由跳转。上报层要解决的是“怎么在不影响性能的前提下上报”常见做法是批量上报、用navigator.sendBeacon在页面卸载时可靠发送数据、控制采样率。存储层一般交给后端或日志平台前端要设计好上报的数据结构。展示层就是监控大屏按错误率、报错趋势、影响用户数等维度展示。答这题时能加分的小亮点提到错误上报要区分“脚本错误”和“资源加载错误”提到跨域脚本错误需要服务端配Access-Control-Allow-Origin才能拿到详细堆栈提到上报前对错误信息做去重和采样避免重复数据淹没存储。这些细节能证明你确实想过系统全链路而不只是背一个监控SDK的API。7.2 性能优化与代码评审类另一类开放题是给你一段有问题的代码让你找出问题并优化。常见陷阱包括事件监听器未移除导致内存泄漏、在循环里改DOM导致频繁重排、大量定时器未清理、状态更新异步导致的竞态问题、深层嵌套组件导致的不必要渲染。性能优化题几乎必考“首屏加载慢怎么排查”。答题方向可以从网络层面、渲染层面、代码层面三个维度展开。网络层面看资源体积和请求数量开启gzip、压缩图片、合并请求、用HTTP/2多路复用。渲染层面看关键渲染路径CSS放头部、JS放尾部或加defer/async、减少DOM深度。代码层面看有没有按需加载路由级懒加载、组件级懒加载、图片懒加载、第三方库按需引入。如果再往上走就是SSR、静态化、CDN、边缘渲染这些更重的手段了。这类题我个人觉得最好的答法是“按实际项目的排查顺序来讲”。先看Network面板哪些资源大、哪些请求慢再看Performance面板哪些阶段耗时高最后落到代码层修复。这样听起来像你真的处理过生产事故而不是在回忆面试答案。8. 复盘之后的备考建议少踩一个坑多拿十分8.1 不同基础的人复习重点不一样如果你是还在读大三、准备参加秋招时间比较充裕的话建议按“基础→框架→工程化→算法”的顺序复习。前两个月把JavaScript核心、浏览器原理、CSS布局刷透配合做笔记中间一个月开始刷LeetCode按标签分类刷每天两到三道难度先Easy后Medium最后一个月集中看Vue/React源码解析、Webpack配置、性能优化文章并且把所有大厂真题分类做一遍类似网易这套笔试。如果你已经有一定项目经验但基础薄弱比如工作了两年、想跳大厂那重点放在补原理上。你写过的每个功能背后都对应几个考点你做过审批流那就去看BPMN前端怎么对接流程定义你做过字典管理页面那就弄懂字典数据结构和权限控制的关系你做过大文件上传那就把分片、断点续传、并发控制彻底吃透。把你的项目经历反向映射到考点上效率会非常高。如果你是准备转行时间紧、基础薄我的建议是放弃“全都要”的想法先把高频考点背完、手写题练熟、算法只刷热门前50题。前端面试题2025和2026的热词里八股文汇总依然是大头说明这件事没有捷径但也不是完全无底洞。8.2 笔试现场最容易踩的五个坑第一个坑是答题顺序。笔试总时长是固定的不要在一道选择题上纠结超过两分钟。遇到不会的先标记跳过编程题如果卡住超过15分钟就换下一道先把能拿的分拿满。第二个坑是编程题不看边界条件。很多题看起来简单但“数组为空”“n为0”“字符串只有一位”这些边界情况一测就挂。写完代码后花30秒想几个边界用例是性价比最高的提分手段。第三个坑是环境不熟悉。牛客网、赛码网、企业自研笔试平台这些的输入输出处理方式和LeetCode不一样。提前一周每天到这些平台练一练熟悉它们的代码模板、报错提示、提交逻辑考试时才不会在“怎么读输入”上浪费时间。第四个坑是忽略手写代码的规范。笔试不要求你写出完美代码但变量命名、函数拆分、代码可读性会被面试官看到。写变量用isLoading而不是a函数名用fetchData而不是fn这些细节会给面试官留下“这个人有工程素养”的印象。第五个坑是开放题写太多废话。开放性题没有标准答案但面试官看的是思路框架。回答时用“采集、上报、存储、展示”这样的结构分点写比写一大段流水账更容易让人抓住重点。8.3 心态和定位一场笔试说明不了全部备考这段时间很容易焦虑尤其是看到同学拿到offer而自己的笔试还在流程里的时候。我自己经历过很理解那种状态。但就网易这套笔试的方向和难度来看它筛的其实是“基础扎实、能独立解决问题、有工程思维”的候选人。如果你在某一场笔试里挂了不要立刻否定自己很多大厂笔试通过率本来就不高挂了之后还有补招、社招、实习转正等很多条路。我现在回头看2020年那场笔试最大的收获不是“我答对了多少题”而是那次复盘让我意识到面试官想要的不是会背答案的人而是能讲清楚原理和边界的人。你答防抖函数的时候能说出“leading和trailing两种模式分别在什么场景下用”答HTTP缓存时能画出强缓存和协商缓存的全流程答Vue响应式时能解释为什么Vue 3要换Proxy。这些“多走一步”的思考才是笔试里真正拉开差距的地方。最后说一个我自己后来一直在用的方法每一场面试或笔试结束不管过没过当天晚上把考到的题整理进一个文档按“题目、我的答案、正确思路、笔记链接”四列分类。准备面试的过程本质上就是不断校准“我以为我会”和“我实际会”之间的距离。这套方法帮我从2020年一直用到现在稳得很。 2020网易校招前端笔试复盘：从JS原理到算法与系统设计
1. 先看这一场笔试到底考什么2020年网易校招前端开发工程师正式批这一场我在现场的印象其实挺深。不是因为题量特别大而是它考的方式很“网易”——不跟你绕弯子基础题、原理题、手写题、开放题一股脑全来你要是只会背面试题根本没时间编。先说考试的基本盘。多数大厂校招笔试都分几块单选/多选问答题编程题外加一两道开放性设计题。网易这场也不例外但它的重点明显放在“你能不能解释清楚原理”和“能不能直接写代码”上而不是“你记了多少框架API”。我当时考完跟几个一起准备的同学对了一下大家一致的感觉是JS基础、浏览器原理、网络、手写实现占了很大比例框架题反而不算多Vue和React都有涉及但都是偏原理的东西比如响应式依赖收集、diff过程这种问得很细。这背后的逻辑其实很直接。校招候选人没有太多真实项目经验面试官想知道的是你有没有扎实的底层功底能不能在入职之后快速上手。你简历里写“熟悉Vue”笔试就考你Vue的响应式怎么实现的你写“了解浏览器渲染”笔试就问你怎么减少重排重绘。说白了笔试筛的就是基础扎实程度而不是背了多少库。我把当时整理过的考点分布列个表大家参考考察模块大概占比典型问题方向JavaScript核心25%-30%原型链、闭包、this、事件循环、手写防抖节流/深拷贝浏览器与网络20%左右渲染原理、HTTP缓存、跨域方案、性能优化HTML/CSS10%-15%布局实现、BFC、盒模型、选择器优先级框架与工程化15%-20%Vue/React原理、Webpack配置、组件通信、构建优化算法与编程题20%左右字符串处理、链表、排序、动态规划、手写实现开放性题目5%-10%监控系统设计、首屏优化方案、代码评审这个结构放到今天看依然不过时。这两年前端面试热度词里面前端八股文、前端面试题、前端开发skills这些关键词反复出现说明大家的需求还是集中在“怎么系统梳理大厂考点”这件事上。说白了2020年的时候这些题目是大厂筛人标准到了2025、2026年很多中小厂也把同样的内容拿来做参考。原理永远比题库值钱。2. JavaScript核心考点背八股和懂原理是两码事2.1 原型链与继承绕不开的送分也送命题原型链这块几乎是每次必考。网易这场选择题里出现了一道题给你一串访问对象属性的代码让你判断输出。这类题本身不难但如果你只是知道obj.xxx会沿原型链往上找却没有真正理解prototype、__proto__、constructor三个概念的关系碰到稍微绕一点的链式继承就会卡住。我当时事后复盘理清思路其实只需要记住一个核心prototype是函数对象上的属性__proto__是每个对象都有的属性指向构造它那个函数的prototype。所有对象最终都指向Object.prototype再往上就是null。当你访问一个属性时引擎会沿着__proto__链一层一层找找到就返回找不到返回undefined。继承这块ES5的寄生组合式继承和ES6的class extends是必背的内容。经典考法是让你写一个寄生组合式继承或者让你解释class语法糖底下的原型指向。我当时整理过一段手写大家可以当成参考模板function inherit(Child, Parent) { Child.prototype Object.create(Parent.prototype); Child.prototype.constructor Child; }这行代码很多人会写但被追问一句“为什么不能直接Child.prototype Parent.prototype”就答不上来。直接赋值会让父子共享同一个原型对象子类改原型会影响父类。Object.create的作用是创建一个新的对象新对象的__proto__指向父类原型这样在子类原型上加方法不会污染父类。这就是为什么要多绕一步。2.2 闭包、作用域与this考题里的常青树闭包和this基本是笔试的“双保险”——不考就觉得不完整。这套笔试题里有一个很经典的循环输出题for循环里用var声明变量然后setTimeout输出问输出结果是什么。输出全是最后一次循环的终值因为var是函数级作用域定时器回调执行时拿到的是同一个变量。改法有两种用let或者用闭包包一层。this的四种绑定规则默认绑定、隐式绑定、显式绑定、new绑定也是选择题高频。我当时记住一个判断顺序先看是不是new调用再看有没有call/apply/bind然后看是不是对象方法调用最后才是默认绑定严格模式下是undefined。箭头函数没有自己的this往外层找。这套顺序应对绝大部分判断题都够用。闭包这一块除了概念还喜欢考内存泄漏。被闭包引用的变量不会被垃圾回收所以如果闭包生命周期过长或者被意外挂到了全局就可能在老版本IE里出现循环引用导致的内存泄漏。后来ES6的WeakMap可以巧妙解决这个问题因为WeakMap的键是弱引用不阻止垃圾回收。笔试如果问“WeakMap和Map的区别”十有八九就是冲着这个场景来的。2.3 事件循环与异步输出题好多人挂在 await 这网易这批笔试明显加大了异步输出题的难度。题目经常是这样给几段Promise、async/await、setTimeout混在一起的代码让你写按顺序输出什么。做这类题的关键不是背“微任务先于宏任务”而是理解每一层执行顺序的细节。我总结一个排查顺序同步代码先执行完。执行所有微任务队列里的任务Promise.then、queueMicrotask、MutationObserver等。取出一个宏任务执行setTimeout、setInterval、I/O等。再清空微任务。循环往复。await是另一个坑。await右侧的表达式会立即执行但await后面的代码相当于放进一个微任务里。如果await后面跟着的是一个已经 resolve 的 Promise那么后面的代码要再等一个微任务轮次。很多年前就流传的“async/await 比 Promise 慢一个微任务”就是这里来的。这类题平时练的方式很简单打开控制台把代码粘进去跑一遍把实际输出记下来然后手动推导一遍对不上就一行一行打断点看。踩过几次坑之后基本就能形成肌肉记忆。2.4 手写题防抖节流、深拷贝、Promise.all网易笔试的手写题不搞虚的直接让你写能跑的代码。防抖和节流这种属于“必须闭眼能写出来”的级别。我记得当时的题目是在线编程要求实现一个防抖函数并说清楚使用场景。这两种东西网上有无数版本关键是你得知道区别防抖是“最后一次触发后等一段时间才执行”节流是“固定时间间隔内最多执行一次”。深拷贝是另一道常客。基础的递归写法大多数人都能写但笔试题会加条件需要支持数组、对象、Date、RegExp还要能处理循环引用。我当时用WeakMap存已拷贝对象遇到循环引用直接返回缓存算是个标准解法function deepClone(target, cache new WeakMap()) { if (target null || typeof target ! object) return target; if (cache.has(target)) return cache.get(target); const result Array.isArray(target) ? [] : {}; cache.set(target, result); Object.keys(target).forEach(key { result[key] deepClone(target[key], cache); }); return result; }顺带说一嘴JSON.parse(JSON.stringify(obj))能不能用来做深拷贝能但有限制undefined、函数、Symbol会被丢弃Date会变成字符串循环引用直接报错。笔试问到这你最好主动把这些缺点说出来显得你是真用过而不只是背答案。3. 浏览器与网络前端面试的分水岭在这里3.1 渲染原理从URL输入到页面展示发生了什么网易笔试里有道简答题问的就是输入URL到页面展示的完整过程这算是前端笔试的固定节目。标准回答要从DNS解析开始然后是建立TCP连接、发送HTTP请求、服务器响应拿到HTML后浏览器开始解析构建DOM树和CSSOM树合成渲染树然后布局、绘制、合成。容易被扣分的点在于“重排和重绘的区别”。笔试会问改width、改color、改transform各会触发什么答案分别是重排、重绘、合成。现代浏览器对transform和opacity做了优化能走合成层不触发重排重绘这就是为什么动画推荐用transform而不是改top/left。这个细节很能拉开差距。性能优化题通常也从这个点切入减少DOM操作、批量修改样式、用requestAnimationFrame代替setTimeout做动画、避免在循环里读取导致强制同步布局的样式属性等。笔试考这个不是为了让你背条目而是考察你有没有在真实项目里排查过卡顿问题。3.2 HTTP缓存一问一个准HTTP缓存这块网易笔试有一道选择题考了Cache-Control的优先级Cache-Control出现时Expires会被忽略max-age0和no-cache的区别是前者表示缓存立即过期但依然可以用协商缓存验证后者表示使用缓存前必须去服务器验证。很多人把no-cache理解成“不缓存”其实完全错了它只是“每次都要问服务器让不让用”。协商缓存的两个头要记牢Last-Modified/If-Modified-Since和ETag/If-None-Match。前者以秒为单位存在精度问题后者是内容哈希更精确。如果服务器返回304浏览器可以用本地缓存否则返回200和新的资源。现在大厂里一般强缓存配immutable让文件名带哈希的资源长期缓存HTML不缓存或者短缓存这个策略面试官会很熟悉。3.3 跨域不仅要会方案还要会选型跨域方案是笔试问答题的常客。最基础的三种JSONP只支持GET靠动态创建script标签、CORS服务端设置响应头支持各种请求方式、代理开发环境用webpack devServer proxy生产环境用nginx反向代理转发。容易被深入问的是CORS的预检请求。当请求不是简单请求比如自定义头、Content-Type是application/json、用了PUT/DELETE等方法浏览器会先发一个OPTIONS请求问服务器允不允许。优化方案要么让后端直接处理OPTIONS要么把请求变成简单请求减少预检。前后端联调时经常遇到“请求发不出去”的报错十有八九就是预检没过。跨域问题的底层原因是浏览器的同源策略这是为了保护用户数据安全。所以在回答跨域方案时最好能提一嘴“同源策略防的是什么”这样显得你不只是背了一堆方案而是理解它存在的意义。另外现在常见的还有postMessage跨域通信、document.domain子域名之间、window.name、location.hash但生产环境最常用的还是CORS和代理。3.4 前端正在被问到的新方向这两年笔试和面试的热词里好多跟浏览器能力相关的新方向也很突出比如“前端使用worker上传大文件”、“前端JS解码H264”。大文件上传的核心是分片。把文件切成若干片每片单独上传记录进度断点续传时只传未完成的片。这里面的技术点包括用File.slice()切分、用Blob对象读文件、用Web Worker在主线程外计算文件哈希比如用spark-md5计算整个文件的指纹避免主线程卡死。上传过程还要考虑并发控制、失败重试、服务端合并分片。这类题看着很“工程”但在简历里写自己做过上传功能的同学面试官大概率会追问这些细节。至于JS解码H264WebCodecs和MSE是关键词。WebCodecs允许开发者直接控制视频编解码器配合Web Worker做解码再绘制到Canvas上可以绕开浏览器的解码限制。这类偏门问题大概率不会作为主考题出现但如果笔试里夹杂一个多选题“以下哪些浏览器API可以用于处理视频”你能说出WebCodecs、MediaSource、Canvas面试官印象会好很多。4. HTML/CSS看起来简单全是细节4.1 布局题手写两栏三栏与垂直居中网易笔试的选择题和简答题里都有布局题。垂直居中是最常见的解法包括flexdisplay:flex; align-items:center; justify-content:center、绝对定位加负margin需要知道子元素宽高、绝对定位加transform不需要知道宽高、gridplace-items:center。这几种方案最好都写在脑子里笔试见到直接按场景选。两栏布局左侧固定宽度右侧自适应经典解法是左侧float或position:fixed右侧margin-left给固定宽度现代化方案直接flex左侧flex: 0 0 200px右侧flex: 1。三栏布局可以引出圣杯布局和双飞翼布局这两个虽然已经不太常考但不妨碍有时选择题里会冒出来一个让判断“哪个布局方式实现了中间列优先渲染”。这里提示一个细节flex 中flex: 1其实是1 1 0%不是flex: 1 1 auto。很多人理解成按内容撑开后再等比分配空间其实它表示flex-grow: 1; flex-shrink: 1; flex-basis: 0%也就是宽度从0开始分配剩余空间。笔试考flex时把这个区分讲清楚是很加分的。4.2 BFC、层叠上下文与选择器优先级BFC块级格式化上下文是CSS高频理论考点。触发BFC的方式有这些overflow不是visible如auto/hidden、display: flow-root、position: absolute/fixed、float非none、display: inline-block等。BFC能解决的问题包括父子外边距折叠、清除浮动、阻止元素被浮动元素覆盖。笔试如果给你一段CSS问你两个div之间的间距是多少十有八九考的是外边距塌陷。层叠上下文和BFC经常混着考。创建层叠上下文的条件有position加z-index不为auto、opacity小于1、transform非none、filter非none、will-change等。两个元素都有z-index时谁高谁显示层级相同时后面的元素盖住前面的。选择题特别喜欢把position: relative的z-index: 1和一个处于不同层叠上下文里的z-index: 999放在一起考结论是它们不在同一个上下文时不能直接比较。选择器优先级也是一个选择题重灾区。规则是!important 行内样式 ID class/属性/伪类 元素标签。同样是class后面的规则覆盖前面的。笔试中给一串选择器算权重值不算难难的是混合了:not()不计本身但内部选择器正常计和:nth-child()这种伪类的情况。平时多拿真实代码验证几次就没问题。4.3 盒模型与HTML5细节题box-sizing这个题所有前端面试几乎必考。标准盒模型是content-box宽高只算内容区padding和border额外增加怪异盒模型是border-box宽高包含padding和border。设置box-sizing: border-box后子元素能直接填满父容器不用担心边框撑破。为了开发省心很多团队会全局设置* { box-sizing: border-box; }。另外还有几个冷门但会考的细节img是内联元素但底部会有几像素的间隙因为它是按基线对齐的解决办法是display: block或vertical-align: middle百分比padding的基准是包含块的宽度包括水平方向和垂直方向所以可以用padding-top: 100%实现正方形这是个巧妙的CSS技巧。HTML5语义化标签也是常客header、footer、nav、article、section、aside、figure这些。笔试不会直接问你能列出几个标签而是给你一个页面结构让你用语义化标签重写。回答时顺带说一句“语义化有助于SEO和无障碍访问”就点到了热词里“前端SEO”的需求点上。还有Storage、History、FileReader、Canvas、SVG这些API选择题里偶尔出现知道它们分别的用途就行。5. 框架与工程化从会用变成会解释5.1 Vue与React响应式和diff是核心网易笔试对框架的考察不偏门但问得深。Vue 2的响应式原理是必背Object.defineProperty遍历对象属性给每个属性重写getter和settergetter里收集依赖setter里通知更新。数组和新增属性是它的痛点所以Vue 2要额外重写数组的7个方法也要用Vue.set来处理新增属性。Vue 3用Proxy重写了这部分能监听属性新增和删除、数组变化性能也更好。这道题既考原理又考版本演进答出来基本就能及格。React部分常考Hooks。useEffect的依赖数组逻辑是重点依赖为空时只在挂载后执行一次依赖变化时每次变化后执行返回的清理函数在下一次执行前或卸载时调用。笔试出题通常是让判断一段Hooks代码的渲染次数陷阱往往在于闭包陷阱——函数组件每次渲染都会生成新的函数实例如果useEffect的依赖没写全拿到的就是旧值。解决方式是用useRef存最新值或者把依赖写全。diff算法这块Vue和React都有对应问法。核心思想是同级比较、用key优化、不跨层级移动节点。key的作用是识别节点复用尽量不用index做key因为列表增删会导致复用错乱产生状态bug。这些内容在真正的开发里踩一次坑就懂了笔试时把它有条理地说出来就好。5.2 Webpackloader和plugin的逻辑Webpack的常考点集中在四个问题上loader和plugin的区别、构建流程、热更新的原理、性能优化。loader是文件处理转换器在模块加载时执行比如babel-loader把ES6转成ES5、css-loader处理CSS里的url和importplugin则是插件在构建生命周期里监听事件比如HtmlWebpackPlugin生成HTML、MiniCssExtractPlugin拆分CSS。简单说loader专注“一个文件怎么转”plugin专注“整个构建过程怎么定制”。热更新HMR的原理是Webpack Dev Server启动时通过WebSocket和浏览器建立连接改动文件后重新编译把变更模块的hash推给浏览器浏览器用new Function执行新模块代码并调用相关模块的accept回调去更新页面。平时用起来只是觉得“保存就刷新”但笔试考的是背后的机制。构建性能优化的答案比较固定thread-loader多进程打包、cache-loader缓存、DLLPlugin预编译第三方库、TerserPlugin压缩JS、代码分割splitChunks把公共库独立打包、按需加载import()动态导入拆出路由级别的chunk。回答时提到“小图标用base64、大图片用CDN”这类实际操作会让答案更真实。5.3 组件库、微前端与低代码热词背后的技术从热词里可以看到大家还格外关注“前端组件库”、“hzero前端开发”、“微前端”、“BPMN前端自定义流程”这些方向。组件库的考点是封装思路Props控制行为、Slot/children控制结构、事件转发、样式隔离、按需引入。回答时可以提一下自己的组件库封装经历比如封装一个Table组件需要考虑哪些状态和事件。微前端是这几年比较火的方向。核心概念是“技术栈无关的子应用集成”常见方案有qiankun基于single-spa和Webpack Module Federation模块联邦。qiankun的核心是JS沙箱和样式隔离JS沙箱通过Proxy代理window上的属性子应用卸载时恢复原状样式隔离可以通过Shadow DOM或给子应用容器加特定前缀实现。这类题现在出现的频率越来越高即使笔试不考面试大概率也会跟进追问。BPMN自定义流程、字典管理、数据大屏这些词说明前端正在深入业务系统。字典管理的意义是统一维护枚举值前后端通过字典编码翻译显示文本改字典不用发版。数据大屏部署要关注的则是静态资源缓存、API网关、WebSocket实时推送、Canvas绘制性能这些点。能把业务系统的技术细节讲清楚说明你不是只写页面而是在思考整个系统怎么落地。6. 算法与编程题笔试里最能拉开差距的部分6.1 高频题型与解题思路网易笔试的编程题一般是两到三道限时一共三四十分钟。题型相当固定大部分在LeetCode简单到中等难度之间。我按出现频率排了个序字符串类判断回文、最长无重复子串、字符串反转、数字转中文。数组类两数之和、三数之和、最大子序和、合并两个有序数组、找重复元素。链表类反转链表、判断是否有环、合并两个有序链表、删除倒数第N个节点。栈与队列有效括号、用两个栈实现队列、最小栈。树类二叉树前中后序遍历、层序遍历、最大深度、镜像二叉树。动态规划爬楼梯、打家劫舍、最长递增子序列。面对这些题核心不是背答案而是总结套路。比如“两数之和”可以暴力双重循环但标准解法用哈希表把时间复杂度降到O(n)“有效括号”用栈来匹配遇到左括号入栈遇到右括号出栈最后判断栈是否为空“反转链表”用一个prev指针逐步改变next方向。把这些方法论记牢就算换个题目包装你也能往这几个方向靠。笔试里还有一类“剑指Offer风格”的题比如“实现一个函数输入n输出斐波那契数列第n项”。递归写法能做但会超时因为重复计算太多正确姿势是动态规划用两个变量滚动累加时间复杂度O(n)空间复杂度O(1)。这种“你交了一个能跑的答案但性能不过关”的情况笔试判题时很常见平时得练着分析时空复杂度。6.2 真题思路复盘从读题到调试当时有几道题印象很深。一道是给一个字符串找出最长的不含重复字符的子串长度。这类题标准解法是滑动窗口用两个指针维护一个窗口右指针不断向右扩展遇到重复字符就把左指针移到重复字符的下一个位置用一个哈希表存字符最后出现的下标实时更新最大值。另一道是链表反转要求用迭代和递归两种方式实现。迭代解法比较好想初始化prev null然后遍历链表每次先保存next再把当前节点的next指向prev依次推进。递归解法要理解“假设后面已经反转好了”把当前节点的next的next指向它自己再断开原来的next递归结束条件是链表为空或只有一个节点。还有一道是爬楼梯一次可以上1级或2级问上n级楼梯有几种方法。本质上就是斐波那契数列f(n) f(n-1) f(n-2)。笔试时我直接用了滚动数组写法不会因为递归栈溢出而挂掉。这类题给的建议是不管多简单的题都先想最笨的解法再优化。确保提交上去的代码在边界条件下也能通过比如n等于0或1的情况。6.3 编程题的输入输出与调试技巧很多同学栽在编程题不是不会写而是不会处理输入输出。牛客网和赛码网这类在线笔试系统有些题目要求你自己读取多行输入比如第一行是一个数字n后面n行每行有两个数。如果你平时只在LeetCode上刷题习惯了已经给好的函数参数突然遇到这种“自己处理stdin”的情况就会懵。解决方式很简单提前熟悉readline或process.stdin的写法。JavaScript里最常用的方式是这样的const readline require(readline); const rl readline.createInterface({ input: process.stdin, output: process.stdout }); const lines []; rl.on(line, line lines.push(line)); rl.on(close, () { // 按行解析第一行通常是数量 });还有一个容易忽略的坑笔试平台的代码运行在Node环境不是浏览器。所以不能用alert、prompt、window这些浏览器API。我在笔试中遇到过同学把代码写成了浏览器环境里的调试版本结果在判题系统里直接报错。平时多在这些平台上模拟几次熟悉它们的报错风格和运行机制上了考场才不会因为环境问题翻车。7. 开放性设计题考察的不只是技术7.1 系统设计类做一个前端监控系统网易这套笔试的最后一类题是开放设计题没有标准答案但很能反映一个人有没有系统思考的能力。我当时遇到的设计题是“如何设计一个前端监控系统”。这类题答得好不好往往决定了面试官有没有兴趣给你发下一轮邀约。回答的框架可以拆成四层采集层、上报层、存储层、展示层。采集层负责收集错误信息window.onerror捕获JS运行时错误、unhandledrejection捕获Promise异常、性能数据Performance API拿白屏时间、首屏时间、FP/FCP/LCP、用户行为数据点击、路由跳转。上报层要解决的是“怎么在不影响性能的前提下上报”常见做法是批量上报、用navigator.sendBeacon在页面卸载时可靠发送数据、控制采样率。存储层一般交给后端或日志平台前端要设计好上报的数据结构。展示层就是监控大屏按错误率、报错趋势、影响用户数等维度展示。答这题时能加分的小亮点提到错误上报要区分“脚本错误”和“资源加载错误”提到跨域脚本错误需要服务端配Access-Control-Allow-Origin才能拿到详细堆栈提到上报前对错误信息做去重和采样避免重复数据淹没存储。这些细节能证明你确实想过系统全链路而不只是背一个监控SDK的API。7.2 性能优化与代码评审类另一类开放题是给你一段有问题的代码让你找出问题并优化。常见陷阱包括事件监听器未移除导致内存泄漏、在循环里改DOM导致频繁重排、大量定时器未清理、状态更新异步导致的竞态问题、深层嵌套组件导致的不必要渲染。性能优化题几乎必考“首屏加载慢怎么排查”。答题方向可以从网络层面、渲染层面、代码层面三个维度展开。网络层面看资源体积和请求数量开启gzip、压缩图片、合并请求、用HTTP/2多路复用。渲染层面看关键渲染路径CSS放头部、JS放尾部或加defer/async、减少DOM深度。代码层面看有没有按需加载路由级懒加载、组件级懒加载、图片懒加载、第三方库按需引入。如果再往上走就是SSR、静态化、CDN、边缘渲染这些更重的手段了。这类题我个人觉得最好的答法是“按实际项目的排查顺序来讲”。先看Network面板哪些资源大、哪些请求慢再看Performance面板哪些阶段耗时高最后落到代码层修复。这样听起来像你真的处理过生产事故而不是在回忆面试答案。8. 复盘之后的备考建议少踩一个坑多拿十分8.1 不同基础的人复习重点不一样如果你是还在读大三、准备参加秋招时间比较充裕的话建议按“基础→框架→工程化→算法”的顺序复习。前两个月把JavaScript核心、浏览器原理、CSS布局刷透配合做笔记中间一个月开始刷LeetCode按标签分类刷每天两到三道难度先Easy后Medium最后一个月集中看Vue/React源码解析、Webpack配置、性能优化文章并且把所有大厂真题分类做一遍类似网易这套笔试。如果你已经有一定项目经验但基础薄弱比如工作了两年、想跳大厂那重点放在补原理上。你写过的每个功能背后都对应几个考点你做过审批流那就去看BPMN前端怎么对接流程定义你做过字典管理页面那就弄懂字典数据结构和权限控制的关系你做过大文件上传那就把分片、断点续传、并发控制彻底吃透。把你的项目经历反向映射到考点上效率会非常高。如果你是准备转行时间紧、基础薄我的建议是放弃“全都要”的想法先把高频考点背完、手写题练熟、算法只刷热门前50题。前端面试题2025和2026的热词里八股文汇总依然是大头说明这件事没有捷径但也不是完全无底洞。8.2 笔试现场最容易踩的五个坑第一个坑是答题顺序。笔试总时长是固定的不要在一道选择题上纠结超过两分钟。遇到不会的先标记跳过编程题如果卡住超过15分钟就换下一道先把能拿的分拿满。第二个坑是编程题不看边界条件。很多题看起来简单但“数组为空”“n为0”“字符串只有一位”这些边界情况一测就挂。写完代码后花30秒想几个边界用例是性价比最高的提分手段。第三个坑是环境不熟悉。牛客网、赛码网、企业自研笔试平台这些的输入输出处理方式和LeetCode不一样。提前一周每天到这些平台练一练熟悉它们的代码模板、报错提示、提交逻辑考试时才不会在“怎么读输入”上浪费时间。第四个坑是忽略手写代码的规范。笔试不要求你写出完美代码但变量命名、函数拆分、代码可读性会被面试官看到。写变量用isLoading而不是a函数名用fetchData而不是fn这些细节会给面试官留下“这个人有工程素养”的印象。第五个坑是开放题写太多废话。开放性题没有标准答案但面试官看的是思路框架。回答时用“采集、上报、存储、展示”这样的结构分点写比写一大段流水账更容易让人抓住重点。8.3 心态和定位一场笔试说明不了全部备考这段时间很容易焦虑尤其是看到同学拿到offer而自己的笔试还在流程里的时候。我自己经历过很理解那种状态。但就网易这套笔试的方向和难度来看它筛的其实是“基础扎实、能独立解决问题、有工程思维”的候选人。如果你在某一场笔试里挂了不要立刻否定自己很多大厂笔试通过率本来就不高挂了之后还有补招、社招、实习转正等很多条路。我现在回头看2020年那场笔试最大的收获不是“我答对了多少题”而是那次复盘让我意识到面试官想要的不是会背答案的人而是能讲清楚原理和边界的人。你答防抖函数的时候能说出“leading和trailing两种模式分别在什么场景下用”答HTTP缓存时能画出强缓存和协商缓存的全流程答Vue响应式时能解释为什么Vue 3要换Proxy。这些“多走一步”的思考才是笔试里真正拉开差距的地方。最后说一个我自己后来一直在用的方法每一场面试或笔试结束不管过没过当天晚上把考到的题整理进一个文档按“题目、我的答案、正确思路、笔记链接”四列分类。准备面试的过程本质上就是不断校准“我以为我会”和“我实际会”之间的距离。这套方法帮我从2020年一直用到现在稳得很。