ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

网易校招前端笔试经验:题型分布、核心考点与刷题策略

网易校招前端笔试经验:题型分布、核心考点与刷题策略 每年这个时间点总有学弟学妹来问我网易校招笔试到底考什么、前端岗要怎么准备。我去年参加了2023届网易校招笔试前端开发工程师正式批第二批整体感受是题目不偏不怪但对基础功底和代码熟练度的考察非常扎实。如果你打算冲中大厂前端岗这篇经验贴可以帮你把笔试的考察范围、刷题方向和常见坑一次摸清。全程干货没有任何套路。我会从题型分布、考察重点、算法准备、手写代码、答题技巧到避坑实录完整复盘这一批笔试的经验。无论你目前是大三准备暑期实习还是研二准备秋招这套思路都可以直接参考。1. 笔试整体设计与题型分布1.1 网易这批笔试到底考了什么网易校招前端笔试通常安排在牛客网或者自家在线OJ上完成。正式批第二批的题目结构大致是单选/多选、编程题、简答题三大部分。选择题覆盖HTML、CSS、JavaScript、框架基础、浏览器原理和计算机基础编程题一般是2到4道考察算法和编码能力简答题则更看重你对某个技术点的理解深度和表达能力。先说结论网易前端笔试的难度在互联网大厂中属于中等偏上比字节的相对友好一些但比美团、B站的又更有区分度。它并不是靠一道难题卡死所有人而是靠整体覆盖面拉差距。你如果基础知识扎实、编程题能AC两道以上、简答题能写清楚思路进面试基本没问题。我印象很深的一点是这批笔试题干里的描述非常“工程化”很多时候会给你一个业务场景比如“某个前端项目需要优化首屏加载时间请给出方案”而不是单纯考“什么是重排和重绘”。这说明网易希望招到的不是背八股的人而是真正有项目感觉、能理解业务逻辑的前端开发。1.2 各类题型的权重与答题节奏根据我这批笔试的经验大致权重如下题型题量占比建议用时单选/多选20题左右30%40分钟编程题2-4题50%80分钟简答题/设计题2题左右20%30分钟这个时间分配很重要。选择题不要纠结一眼会的直接选不确定的凭第一印象先选然后标记一下等编程题做完再回头检查。很多同学容易犯一个错误在选择题上反复推敲导致后面编程题时间不够最后只能交白卷。编程题的分数权重远高于选择题优先保编程题永远是正确策略。简答题也别忽视。这一块虽然只占20%但它是面试官初步判断你“能不能把话说清楚”的依据。我见过不少人笔试总分不错结果简答题只写了三行字面试官印象分直接打折扣。后面我会单独讲简答题的答题框架。1.3 在线OJ模式ACM模式要提前适应网易笔试的编程题用的是牛客网的ACM模式不是力扣那种只写核心函数的模式。也就是说你需要自己处理输入输出。有些同学刷题习惯在力扣上直接提交函数体到了笔试现场连readline和print怎么用都要想半天非常吃亏。我当时用的是JavaScript牛客网JavaScript的输入输出大致长这样// 单行输入比如读取一个数字n const line readline(); const n parseInt(line); // 多行输入比如读取n行数据 let lines []; while (line readline()) { lines.push(line); } // 输出结果 print(result);如果遇到输入一次性给完的情况也可以用 Node.js 的process.stdin方式处理但我建议笔试时直接用牛客提供的readline/print因为简单、代码量少、不出错。提前在牛客网上刷十几道题把输入输出模板熟到肌肉记忆能省下大量现场调试时间。2. 前端核心知识点拆解选择题的“送分”与“陷阱”2.1 HTML/CSS高频考点这些分必须拿稳HTML和CSS部分是选择题的基础盘难度不大但陷阱很多。网易比较爱考的包括盒模型、BFC、flex布局、grid布局、CSS选择器优先级、层叠上下文、居中方案、双飞翼布局/圣杯布局。说几个我当时遇到的考点和容易出错的地方盒子模型的区分是老生常谈但一定要记清楚标准盒模型的width只包含contentIE怪异盒模型的width包含contentpaddingborder。用box-sizing: border-box可以统一为怪异盒模型实际开发中这几乎是全局标配所以题目里一旦出现“这个元素的宽度最终是多少”记得先把box-sizing看清楚。flex布局是网易的常客重点考察justify-content和align-items的区别、flex: 1的含义、flex-shrink的计算方式。我碰到过一道题给一个容器设置了display: flex子元素分别设置了flex: 0 0 100px和flex: 1问它们最终宽度各是多少。如果不懂flex的三参数含义这题大概率会错。BFC也是个高频点。不用把BFC的文档背下来但要能判断哪些属性会触发BFCoverflow: hidden、float、position: absolute、display: inline-block等以及BFC能解决什么问题清除浮动、阻止margin合并、阻止元素被浮动元素覆盖。这道题网易几乎每年都会考一个变体。2.2 JavaScript核心机制闭包、原型链、this指向一个都不能少JS基础是前端笔试的重中之重网易在这块的出题比例非常高。常见的考察方向闭包、原型与原型链、this绑定规则、let/const/var区别、事件循环event loop、宏任务/微任务、Promise、async/await、深浅拷贝、垃圾回收。我在这一批笔试中遇到比较深刻的一道题是给定一段Promise和setTimeout嵌套的代码要求写出打印顺序。这类题考察的就是事件循环的完整执行流程。如果你只记结论“先微任务后宏任务”而不清楚每次“宏任务执行完、渲染前”都要清空微任务队列很容易把顺序搞错。this的指向也几乎是必考。核心规则其实就几条默认绑定严格模式undefined、隐式绑定对象方法调用、显式绑定call/apply/bind、new绑定。还有一个常被忽略的点是箭头函数箭头函数没有自己的this它继承外层词法作用域的this。出题人很喜欢在对象方法里嵌套箭头函数来考这个。闭包考点更侧重实际应用。选择题里可能会问你闭包会带来什么问题内存泄漏、变量常驻、如何用闭包实现私有变量。编程题则可能要求手写防抖节流或实现一个计数器。这属于必须掌握的内容闭包本身不复杂关键是作用域链的理解不能含糊。2.3 ES6新特性与...arg展开运算符的多种玩法网易笔试很爱考ES6的新特性其中展开运算符...rest参数出现频率极高。它有两种用法要区分清楚展开spread和剩余rest。展开是把一个数组或对象展开成逗号分隔的值剩余是把逗号分隔的值收集成一个数组。// 展开用法数组合并、对象拷贝、函数调用传参 const arr1 [1, 2, 3]; const arr2 [...arr1, 4, 5]; // [1, 2, 3, 4, 5] const obj { a: 1, b: 2 }; const copy { ...obj, c: 3 }; // { a: 1, b: 2, c: 3 } // 剩余用法rest参数收集剩余参数 function sum(...args) { return args.reduce((acc, cur) acc cur, 0); } sum(1, 2, 3, 4); // 10笔试中经常结合这两种用法出题比如“写出以下代码的输出结果”const arr [1, 2, 3, 4]; const [first, ...rest] arr; console.log(first); // 1 console.log(rest); // [2, 3, 4]还有一个容易被忽略的展开运算符在对象拷贝时是浅拷贝。如果对象嵌套了对象修改嵌套对象的值原对象也会变。这个考点在很多公司笔试里都出现过网易也不例外。2.4 前端开发面试题里的高频手写代码题手写代码题在笔试中既可能以选择题的形式出现比如“以下哪个实现方式是正确的深拷贝”也可能直接作为编程题、简答题的补充。下面是前端开发面试题里出现频率最高、网易也极爱考的几道手写题深拷贝注意处理Date、RegExp、循环引用问题。function deepClone(obj, map 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 (map.has(obj)) return map.get(obj); const clone Array.isArray(obj) ? [] : {}; map.set(obj, clone); for (const key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { clone[key] deepClone(obj[key], map); } } return clone; }如果只是用JSON.parse(JSON.stringify())遇到undefined、函数、Symbol会丢失遇到循环引用直接报错这些都是面试官埋好的坑。防抖与节流防抖的核心是“最后一次触发才生效”节流的核心是“固定间隔内只执行一次”。网易的笔试题往往会要求你给它们加上参数透传和立即执行选项所以别只背简化版。实现instanceoffunction myInstanceof(left, right) { let proto Object.getPrototypeOf(left); const prototype right.prototype; while (true) { if (proto null) return false; if (proto prototype) return true; proto Object.getPrototypeOf(proto); } }实现call/apply/bind核心是改变this指向用到context.fn this的思路bind还要注意返回函数的new优先级。3. Vue与前端工程化框架题不再只问API3.1 Vue2还是Vue3响应式原理对比是必考题网易前端开发的岗位描述里Vue是出现频率极高的关键词。笔试中关于Vue的考察已经明显从“某个API怎么用”转向了“原理是什么、和Vue2的差异在哪里”。这其实也符合现在前端开发的趋势招人不想要只会写模板的人。Vue2的响应式基于Object.defineProperty对对象的属性进行拦截而Vue3的响应式基于Proxy。笔试选择题喜欢让你判断以下说法哪个正确常见的迷惑性表述Vue2也能监听数组下标变化。错误对象通过defineProperty劫持数组则重写了部分方法Vue3的Proxy可以监听属性新增和删除。正确Vue2中this.obj.a 1视图一定会更新。不一定因为a如果不是声明时就存在的属性不是响应式的Vue3的ref在模板中自动解包。正确但在reactive内部自动解包有例外这些细微差别很容易区分到底有没有真正用过Vue3。如果你平时项目还在Vue2开发建议抽出时间把Vue3的Composition API和响应式原理过一遍因为网易的笔试和面试在2023届已经开始全面倾向Vue3了。3.2 Vue组件通信方式大全选择题常客组件通信是Vue部分最常考的API类知识点网易的笔试题很喜欢给一个场景让你选合适的通信方式。比如父组件要控制子组件内部的方法应该用什么答案是ref访问子组件实例。非父子组件之间要共享状态应该用什么答案是Vuex/Pinia或者Event Bus。我整理了一份比较全的表格笔试前过一遍基本不会丢分通信场景推荐方式特点与注意点父传子props单向数据流子组件不能直接修改子传父$emit / v-modelv-model本质是propsemit的语法糖兄弟组件事件总线或Vuex/Pinia小型应用可用Event Bus但不易维护跨层级provide/inject适合祖先给后代传数据但非响应式可用ref配合任意组件共享状态Vuex / PiniaPinia模块化更好TS支持更好父调子方法ref通过this.$refs.child.method()调用这里提醒一点网易笔试中经常会出现“Vue2中$emit和$on的使用是否需要新旧实例一致”这类问题。Vue2中Event Bus需要确保同一个实例发出和监听Vue3中Event Bus已经不再内置得用第三方的mitt库。如果你在简历里面写了“熟悉Vue3”至少要知道这个变化。3.3 前端开发规范与工程化webpack、vite、hzero周边前端开发规范、工程化配置也是网易笔试选择题的常考方向。别以为笔试不会考工程化实际上网易会拿选择题来考察你对构建工具的基本认知比如webpack中loader和plugin的区别是什么tree-shaking依赖什么特性才能生效ES Module静态分析vite为什么比webpack在开发环境下更快ESBuild预构建依赖 原生ES Module按需编译source-map的cheap-module-source-map和eval-source-map分别适合开发还是生产这些问题的答案其实都在日常项目的配置里面。如果你平时只是用脚手架比如Vue CLI、Vite起项目从没看过脚手架生成的vue.config.js和vite.config.js这一部分的题会很难下手。网易杭州研究院很多项目会用到内部的HZERO前端框架它是基于微前端架构的企业级中后台解决方案。笔试阶段不会直接考HZERO的具体API但会考一些微前端和iframe之间的区别、权限控制、子应用通信这类概念性内容。如果简历上写了有微前端相关经验建议把single-spa、qiankun的原理吃透。3.4 浏览器与网络基础白屏排查、缓存、跨域全都要懂前端开发不只是写代码浏览器原理和网络基础是笔试中经常混合出现的一类题。网易的简答题特别喜欢让你“描述从输入URL到页面展示的完整过程”这道题几乎是前端笔试的保留节目。详细流程大概是DNS解析、TCP连接可能涉及HTTPS的TLS握手、发送HTTP请求、服务器响应、浏览器解析HTML构建DOM树、解析CSS构建CSSOM树、执行JavaScript、合成渲染。网络部分的高频考点包括浏览器缓存强缓存和协商缓存的区别Cache-Control和ETag的配合、HTTP状态码304、403、502等、HTTP和HTTPS的区别、跨域解决方案JSONP、CORS、代理。网易笔试中还有一道让我印象深刻的题一个页面出现了部分白屏如何排查这题考察的是综合排查能力常见思路是从资源加载顺序、JS报错、CSS阻塞渲染、图片懒加载、路由懒加载多个角度去定位。这类题目没有标准答案但答得越有层次越能体现真实项目经验。4. 算法笔试刷题范围与高频题型的实战策略4.1 网易前端算法笔试的难度画像网易前端的算法题不是超级难那种不会让你在笔试现场推数学公式。它的难度集中在中等题偏下偶尔出一道中高难度的偏题但大部分题目只要按“数组、字符串、哈希、双指针、链表、二叉树、简单动态规划、DFS/BFS”这套常规刷题清单准备都能覆盖到。当时我总结的网易前端算法题偏好数组类题目滑动窗口、双指针字符串类题目最长不重复子串、字符串匹配变体链表类题目反转、合并、判断环哈希表应用两数之和、前K个高频元素二叉树基础层序遍历、最近公共祖先简单动态规划爬楼梯、打家劫舍、最大子数组和BFS/DFS的简单场景题岛屿数量、括号生成这批笔试里我印象最深的一道题是类似“给定一个字符串请你找出其中不含有重复字符的最长子串的长度”这就是力扣第三题的原型。别觉得笔试一定会出偏题怪题经典题的高频复用率远高于你的想象。4.2 ACM模式下编程题的“套路化”处理前面说过在线OJ要用ACM模式这里具体说说怎么应对。以JavaScript为例输入可能是一组变长数组、多组测试用例也可能是一棵树的序列化表示。你需要有一套成熟的输入解析模板。比如处理“第一行是n第二行是n个整数”这种常见结构const n parseInt(readline()); const arr readline().split( ).map(Number);处理“未知行数的多组输入”let lines []; while (line readline()) { lines.push(line.split( ).map(Number)); }笔试的时候不要想着炫技。用最朴素的readline逐行读取然后split、map转数字这是最稳定也最省事的方案。我见过有人用正则手写tokenizer去解析输入结果浪费了大量时间还调出了bug。笔试不是算法竞赛算对题、AC才是唯一目标。4.3 高频题型的解题思路与模版这里把我自己整理的几个高频题型思路分享出来配合代码直接背滑动窗口找最长不重复子串是经典中的经典。function lengthOfLongestSubstring(s) { const set new Set(); let left 0, maxLen 0; for (let right 0; right s.length; right) { while (set.has(s[right])) { set.delete(s[left]); left; } set.add(s[right]); maxLen Math.max(maxLen, right - left 1); } return maxLen; }核心思路是右指针不断右移遇到重复字符就移动左指针直到不重复。时间复杂度O(n)空间复杂度O(n)。这道题看似简单但能在笔试现场快速写对的同学占比并不高原因就是边界条件处理不好。链表反转迭代法一定要背到肌肉记忆。function reverseList(head) { let prev null, curr head; while (curr) { const next curr.next; curr.next prev; prev curr; curr next; } return prev; }前K个高频元素用堆或桶排序JavaScript笔试用得最多的是桶排序思路因为不用手写堆。二叉树层序遍历BFS模板。function levelOrder(root) { if (!root) return []; const result []; let queue [root]; while (queue.length) { const size queue.length; const level []; for (let i 0; i size; i) { const node queue.shift(); level.push(node.val); if (node.left) queue.push(node.left); if (node.right) queue.push(node.right); } result.push(level); } return result; }4.4 时间复杂度和边界条件最容易丢分的地方网易笔试的编程题在判分的时候会考虑运行时间和内存。很多人题目思路对了结果超时或数组越界最后只拿到部分分数。几个常见的坑数组为空、字符串为空的情况要单独处理。不是所有题目都保证输入非空。二叉树的根节点可能为null递归前要判空。大数问题如果题目说数据范围在10^9以上别用Number.MAX_SAFE_INTEGER之外的大数计算可以考虑BigInt但注意牛客的输入读取方式也要对应调整。时间复杂度过高会导致超时。如果你写出双重循环但数据量是10^5基本必挂。要习惯写题前先估复杂度10^5的数据O(n^2)一定超O(n log n)大概率能过O(n)最优。多组测试用例场景下每个用例执行完要把全局变量重置否则下一组数据会被污染。5. 简答题与综合设计题怎么把思路写清楚5.1 网易简答题喜欢考哪几类简答题是网易笔试中比较见功底的部分不像选择题有蒙的成分。我建议按下面三类去准备第一类是原理类常见问法“请说出Object.defineProperty和Proxy的区别”、“请描述浏览器的渲染流程”、“DOM和虚拟DOM的区别”。这类题目几乎就是把八股文换个方式问只要基础扎实就能写。第二类是场景设计类常见问法“前端如何实现大文件上传”、“如果页面首屏加载过慢请给出优化方案”、“如何设计一个前端权限系统”。这类题考察的是你在真实项目里有没有遇到并解决过问题。第三类是排查类常见问法“线上页面白屏怎么排查”、“用户反馈点击无响应怎么处理”。这类题更像面试口述题目考察逻辑链路是否完整。5.2 简答题的“三层递进”答题框架我自己的经验是简答题写到不了满分但掌握一个框架后至少能拿到80%的分数。答题结构用“是什么-为什么-怎么做”三层递进每层都要有实质内容。举个例子题目问“如何优化前端首屏加载速度”第一层明确问题本质首屏速度取决于资源体积、请求数量、渲染阻塞时间。第二层给出方案分类可以从网络层CDN、HTTP缓存、资源压缩、构建层路由懒加载、代码分割、Tree-Shaking、渲染层骨架屏、SSR/SSG三个层面去拆解。第三层具体到技术选型路由级代码分割用() import(xxx.vue)图片用WebP格式加懒加载第三方库通过external配置走CDN开启Gzip压缩。这样结构清晰、语句完整面试官一眼就能看到你成体系的思维。最怕的是只写几个关键词比如“压缩代码、用CDN、懒加载”没有解释为什么也没有具体方案分数会很低。5.3 简历技能与项目描述笔试后的隐性考察虽然这一篇是讲笔试但我还是想提一句网易笔试的面试官会同时看到你的简历。前端开发skills怎么写、项目怎么描述直接影响笔试通过后的面试筛选。我的建议是不要堆砌“熟悉Vue、熟悉React、了解webpack”这种没有说服力的描述。更好的写法是“熟悉Vue3响应式原理主导过基于Vue3 TypeScript的中后台项目重构首屏加载时间从3.5s优化到1.2s”。岗位描述和项目结果一起出现才有份量。当时的投递岗位要求里明确写了“有扎实的JavaScript基础熟悉至少一种现代前端框架”所以简历技能栏一定不要出现“精通”这种不切实际的词也不要把“了解”当成“熟练”写。网易的面试官很喜欢挑着简历上的技能词往深里问你自己写的每一个词都要准备好被追问。6. 我从网易这批笔试里总结的实战避坑经验6.1 时间不够用先保AC再谈完美笔试过程中最大的敌人是时间焦虑。我在做选择题的时候也遇到了一些模棱两可的题比如一道关于CSS层叠上下文的题目有两个选项都非常像正确答案。按照我平时刷题的习惯可能会一直在里面纠结但实际考试时我给自己定了一条规矩每道选择题最多90秒超时就先标记后面有时间再回看。这个策略非常重要。网易这批笔试的编程题有好几道如果你在前面选择题上耗了太多时间后面编程题的思考空间会被严重压缩。编程题的AC数量对笔试通过率影响极大哪怕选择题少拿几分也不能丢掉编程题的大头分数。6.2 读题习惯是笔试拉开差距的地方我见过太多人笔试翻车是因为读题不仔细而不是不会做。网易的题目描述一般比较长里面藏着很多关键信息。比如输入范围数据量规模决定复杂度要求、输出格式每个数字之间是空格还是逗号、边界条件是否有可能为空、以及是否需要处理多组测试用例。我有个习惯是拿到编程题后先在草稿纸上圈出三样东西输入格式、输出格式、数据范围。确认了这三样才开始动手写代码。有时候题目里明确写了“数组已按升序排序”那你就应该立刻想到二分查找如果没说有序那就老老实实哈希或者双指针。6.3 本地IDE与在线编辑器的取舍网易笔试系统一般不开摄像头但会有切屏告警最好直接用在线编辑器不要想着切到本地IDE。一方面切屏次数太多会触发异常记录另一方面在线编辑器虽然没有本地IDE那么智能但足够完成中等难度的编码题。我之前的习惯是用VS Code做日常开发第一次用牛客在线编辑器时非常不适应自动补全很少缩进和括号高亮也比较弱。后来我专门去牛客网刷了十几个题目纯手动补全适应了这种”裸写”的节奏。笔试前花几天时间练习在线编辑器比临时在现场适应要好得多。6.4 笔试后的复盘方法错题分类比刷题量更重要笔试结束后不管结果如何我都建议立刻复盘。我给自己列了一个表格把错题按照“基础不牢”、“思路没打开”、“边界条件漏了”、“输入输出不会处理”四类分类。基础不牢的错题比如CSS选择器优先级算错我会重新翻一遍对应的MDN文档并整理到自己的笔记里思路没打开的错题比如没意识到要用双指针我会把该题型的解法总结成一个模板记在备忘录边界条件漏了的错题我会在代码里给每个条件分支写上注释强化自己测试边界情况的意识。坚持这样的复盘方法刷题量不用特别大但每一道题都能转化为真正的能力。这也是我给准备前端开发校招的同学最核心的建议笔试不是刷题量的比拼而是知识体系完整度和做题习惯的比拼。7. 写在最后的几句真心话从投递简历到参加网易2023校招笔试的整个过程中我最大的体会是前端开发这个岗位的笔试趋势正在从“背八股”转向“考工程能力”。单纯会写CSS、会调Vue接口已经不够了懂原理、懂工程化、有业务思维的人才是企业真正想要的。如果你现在还在准备阶段我建议给自己制定一个为期六到八周的计划前两周把HTML/CSS/JS基础系统过一遍中间两周主攻Vue和工程化后两周集中刷牛客网的前端真题和算法高频题。最后留一周时间做整套模拟笔试掐着时间练手感。还有一个小技巧想分享给大家笔试前把你自己常写的工具函数整理成一个小库放在脑子里比如防抖节流、深拷贝、日期格式化、URL参数解析这些工具函数在编程题和简答题里都可能用到。平时多写多练考场上把它们直接默写出来真的能节省很多时间。校招是一场长跑笔试只是其中的一个关卡。只要你基础扎实、刷题有方法、复盘有记录网易的笔试并没有想象中那么难。希望这篇经验贴能给你的前端开发校招备考之路带来一些实际的帮助。
返回列表