ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

2024届前端日常实习面经:高频题、手撕代码与复盘技巧

2024届前端日常实习面经:高频题、手撕代码与复盘技巧 我记得很清楚2024届前端日常实习的节奏和很多人想的不太一样。大三下学期刚开学我一边翻着网上的前端面经一边给各家公司的日常实习岗位投简历。身边同学大多在等暑期实习的统一批次真正提前投日常实习的并不多我属于想提前找点面试感觉的那种人。从2月下旬到4月中旬我前后投了十几家面试加起来差不多有20轮。准备阶段我收藏了大量前端面经但真正走完一圈之后发现网上那些“日常实习随便面面就能过”的说法并不准确——技术面照样两道手撕题项目照样被刨根问底八股文该背的一点也躲不掉。这篇面经作为我自己的第二篇记录会更聚焦在面试中反复出现的高频题目、面试官追问的角度以及每一轮之后怎么复盘和补救。如果你也是2024届计划先用日常实习提前接触真实的前端工作或者想拿日常实习当暑期实习的预演这份记录应该能让你少走一些弯路。1. 日常实习和暑期实习我为什么先投前者1.1 先想清楚一个核心问题你缺的是经历还是转正名额很多人在投日常实习之前其实没有认真想过自己和暑期实习的匹配度。我一开始就踩过这个认知误区总觉得实习越早开始越好但实际上日常实习和暑期实习是两种完全不同的选择。日常实习的特点是全年滚动招人时间灵活一般要求每周到岗3到5天持续2到6个月。它最大的优势是门槛相对低面试机会多可以提前积累真实项目经验。但它通常不承诺转正哪怕实习表现很好也要看未来正式岗位有没有坑位。暑期实习则不一样它的目标性更强大部分大厂设计暑期实习都是为了提前锁定校招候选人转正率会明显更高但投递窗口集中面试竞争也更激烈。我当时做了一个很务实的判断以我的简历水平直接冲暑期实习大概率连面试都约不到几场不如先拿日常实习把面试节奏练起来再把自己做过的项目完善一下等到暑期实习批次开放的时候手里已经有了一批面试经验。如果你现在也处于“简历没什么可写、面试经验为零”的状态我会更建议先投一轮日常实习用它来补齐短板而不是死等暑期实习的唯一机会。1.2 投递渠道和时间线日常实习到底去哪里找日常实习的投递渠道和暑期实习差别很大渠道选对了约面速度能快一倍。我自己实测下来比较靠谱的有下面几个实习僧和Boss直聘中小厂和创业公司多反馈快部分岗位可以直接和HR沟通适合海投练手。牛客网很多大厂部门会直接在讨论区发日常实习招人帖由组内同事直招流程比官网快很多面试题目也更贴近业务实际。内推有认识的师兄师姐直接推荐简历基本不会被筛约面速度最快HR面到技术面通常能控制在两三天内。官网招聘页适合投大厂正式实习项目但日常实习挂在官网的岗位相对少我遇到的更多还是组内直招。时间线上建议你至少提前2到3周准备简历开学后第一周集中投递。日常实习的面试排期通常跟着部门leader的时间走他们往往这周忙、下周才有空早投才能早约。我吃过一次亏有一家挺想去的公司我投得太晚等约面的时候已经快放暑假了岗位也已经被更早投递的人占掉了。1.3 简历上写什么能提高日常实习的进面率日常实习的简历筛选确实比暑期实习宽松但也不是随便写写就能进面。我复盘了自己和身边拿到offer的同学的简历发现能进面的基本都有几个共同点要么有一个完整的前端项目要么有校内或实验室项目经历再不然就是有拿得出手的开源仓库或自学的完整案例。项目描述的写法非常关键。不要只写“熟悉Vue”“会用React”而是用“场景方案结果”的结构。比如“在XX后台管理项目中为了解决列表接口偶发响应慢的问题我在前端增加了一层请求缓存拦截首屏渲染时间降低了约40%。”这种描述比“参与了XX后台开发”具体得多面试官一眼就能看到你的技术切入点。还有一个细节技术栈不要只会堆名词最好标注熟练程度。比如“TypeScript日常开发”“Webpack了解原理”。这样一方面避免面试官按“精通”标准来追问另一方面也说明你对自己技术水平的边界有认知这种坦诚在面试里反而是加分项。2. 一次日常实习面试拆开看各环节到底在考什么2.1 从投递到约面日常实习的节奏能快到什么程度日常实习的约面速度普遍比暑期实习快很多。我观察下来从简历投出去到第一轮技术面快的1到3天慢的也不会超过一周。我遇到最夸张的一次是前一天晚上在牛客上看到组内直招的帖子把简历投过去第二天上午就收到面试邀约下午直接面完了一面。但这种快节奏也带来一个问题简历里写的东西可能还没完全回忆起来面试就来了。我有一次就是下午突然收到约面当时还在上课只能临时跑到走廊里把项目里几个关键点的代码看了十分钟。从那之后我给自己定了一条规矩只要还在投递期不管有没有面试每天早上花20分钟过一遍简历上的项目细节和技术点防止突然接到面试通知时大脑空白。2.2 一面基础扎不扎实几个问题就能看出来日常实习的一面以基础考察为主时长一般在45到60分钟。按我的体感节奏大概是自我介绍3到5分钟JS和CSS基础问答15到20分钟浏览器与网络10到15分钟手撕代码10到20分钟最后留5分钟反问。很多面试官会在一面里快速判断你的基础是否够用基础概念只要有一个答得含糊后续问题就会越问越深。我印象里比较深的一道题是“闭包是什么实际项目中哪里用到过”。我第一反应想到了防抖节流但真正回答的时候发现闭包在前端场景里太常见了循环中绑定事件、模块化封装私有状态、函数工厂返回特定函数这些都是闭包的典型应用。面试官其实并不是要你背定义而是看你能不能把基础概念和实际场景建立连接。后来我准备八股时会刻意要求自己对每一个概念举出至少一个真实使用场景面试时就不会卡壳。2.3 二面项目与潜力比标准答案更重要的思考方式二面通常由mentor或者小组leader来面考察的内容明显从“你会不会”转向“你怎么思考”。技术问答占比变少项目深挖和场景设计题变多。比如面试官会问“如果让你设计一个前端埋点SDK你会从哪些方面考虑”“线上页面白屏你的排查思路是什么”。这种题没有标准答案但非常考验层次感。我遇到过一道很有代表性的题“如果页面很卡你怎么定位性能问题”我的回答从Chrome DevTools的Performance面板聊到Network面板再聊到代码层面的可能瓶颈比如不必要的重渲染、大列表没有做虚拟滚动、同步请求阻塞主线程等等。面试官后来说他并不指望实习生真的解决过线上性能问题但希望看到“系统化排查”的思维方式。所以二面里逻辑展开的顺序比答案本身更重要一定要分层次、有优先级地说而不是想到哪说到哪。2.4 HR面到岗时间和薪资期望提前想好再开口日常实习的HR面通常比较轻松主要确认到岗时间、每周出勤天数、实习时长、薪资期望、学校课业安排等。这里很容易踩坑的是到岗时间。如果你含糊地说“随时都可以”反而显得没有认真考虑过课程安排。比较稳妥的说法是“我目前课程集中在周几除此之外的时间可以到岗预计从3月中旬开始能保证每周4天实习时长6个月左右”既展示了稳定性也给HR可预期的排期。薪资方面日常实习的市场区间其实比较透明不同城市差异很大。我建议如果对行情没底可以报一个区间“我了解到这个岗位的实习薪资大概在150到200一天可以根据面试表现沟通。”这样既不会漫天要价也不会显得对钱完全没概念。3. 手撕代码环节高频题型、手写题与我的翻车复盘3.1 高频算法题日常实习的难度到底在什么位置日常实习的手撕代码不会刻意上难度很多公司会直接从LeetCode Hot 100里比较简单的题改一改。我实际遇到的题大概集中在这么几类反转链表、合并两个有序数组、有效的括号、数组去重、两数之和、字符串找第一个唯一字符、二叉树的前序遍历、手写快排。这些题的特点是“见过和没见过完全不一样”。见过的话写出来很快没见过的话哪怕知道原理也得先花几分钟搭框架。所以我给日常实习候选人的建议是把LeetCode Hot 100里的简单题和中等偏下的题刷三遍重点是链表、数组、字符串、二叉树四个大类。不需要贪多第一遍要独立做出来第二遍能默写第三遍要能讲清楚时空复杂度。3.2 前端特有手写题防抖、节流、深拷贝、Promise.all除了常规算法题前端面试几乎必考手写题。我遇到次数最多的是手写防抖、节流、深拷贝、Promise.all和EventBus。这几道题看起来都不难但很多人写的时候会暴露细节问题。先看防抖和节流。防抖的核心是“事件停止触发后延迟执行”节流的核心是“单位时间内最多执行一次”。我面试时被要求手写防抖当时因为紧张10分钟内写了两版都没写对事后复盘才发现问题出在我把两者的区别给搞混了。标准实现大概是这样的function debounce(fn, delay) { let timer null; return function (...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; }如果面试官问“是否要立即执行一次”那就是另一个变体不传立即执行标志时默认就是上面的版本。手写这类题的时候先花10秒钟跟面试官确认需求边界比闷头写更安全。深拷贝也经常被考。很多人第一反应是JSON.parse(JSON.stringify(obj))但面试官一定追问这个方案有什么问题至少要答出三点第一对象里如果有undefined、function、symbol会被忽略或转成null第二存在循环引用时会直接报错第三Date对象会被转成字符串而不是保留原类型。手写深拷贝时还要注意用WeakMap解决循环引用不然遇到自引用对象就卡住了。Promise.all的考点也很集中返回的是一个新的Promise入参必须是可迭代对象结果按输入顺序返回只要有一个失败就整体reject空数组应当直接resolve([])。很多人写空数组时容易卡壳一紧张就写成了直接reject其实这里是个边界陷阱做多了就有肌肉记忆。3.3 我翻过最大的车手写题写不出来时怎么办我翻车最惨的一次是手写防抖写了两版都不对整个人的状态一下子就崩了。后来冷静下来复盘问题其实不在于知识储备而是现场策略不对。手写题卡住时最忌讳沉默。正确的做法是边写边说思路哪怕只写一半也让面试官知道你的思考过程。比如“我现在先处理边界条件再写核心逻辑”“timer的处理上我需要考虑闭包保存状态”。面试官通常不会苛求一个实习生写出零瑕疵的代码但希望看到“有限时间内形成思路并落地”的能力。如果真的一点都不会也可以坦诚说“这个API我平时封装过但记不清了能不能给我一点提示”绝大多数面试官乐于给提示你顺着提示写完依然是有效发挥。4. 前端八股文高频考点背后的底层逻辑4.1 HTTP与浏览器缓存从输入URL到页面展示的过程前端面试里网络和浏览器的考频非常高几乎每次都会被问到“浏览器从输入URL到页面展示发生了什么”。这个问题看的是系统化理解能力至少要串起DNS解析、TCP连接、HTTP请求、服务器响应、浏览器解析HTML/CSS/JS、构建DOM树和CSSOM树、合并为渲染树、布局绘制这几个步骤。缓存是另一个必考点要分清楚强缓存和协商缓存。强缓存通过Cache-Control和Expires控制命中后不会发请求协商缓存通过ETag/If-None-Match和Last-Modified/If-Modified-Since控制需要向服务器发一次请求确认缓存是否有效。我一般会从适用场景去理解静态资源用强缓存配合文件名hash接口数据用协商缓存配合ETag这样既保证内容更新又能缓存命中。4.2 JS核心机制事件循环、闭包、this别只顾背定义JS基础题的出题角度就那几个但每次的包装方式都不同。事件循环是重中之重要能把“调用栈、宏任务队列、微任务队列”三者的关系讲清楚。我习惯用一句话记忆执行同步代码清空微任务取一个宏任务执行再清空微任务循环往复。面试官经常给一段混杂了setTimeout、Promise、async/await的代码让你输出打印顺序这时候要特别小心async函数内await后面的代码是在微任务中执行的。闭包和作用域链通常绑定在一起问要能解释清楚“每次创建函数时函数都会保存对词法作用域的引用”这种底层机制。this指向则需要分默认绑定、隐式绑定、显式绑定、new绑定四种规则还要知道箭头函数没有自己的this它的this继承自外层作用域。4.3 CSS与布局盒模型、BFC、水平垂直居中一个都不能少CSS的考点里盒模型、BFC、水平垂直居中几乎是必问的。盒模型要能分清content-box和border-boxflex和grid的基本用法也要很熟练。BFC全称是块级格式化上下文触发条件包括overflow不为visible、float不为none、position为absolute或fixed、display为inline-block/flex/grid等。它最常见的应用是清除浮动、阻止margin塌陷、隔离浮动元素。水平垂直居中要准备多种方案因为面试官会追问“还有没有别的写法”。我一般按场景分类回答已知宽高时用margin: auto加定位未知宽高时用flex的justify-content: center和align-items: center或者grid的place-items: center兼容性要求低的时候还可以用transform: translate(-50%, -50%)配合绝对定位。每种方案都有自己的适用边界不要只背一种写法。4.4 工程化与构建工具Loader和Plugin的区别怎么讲清楚日常实习对工程化的要求不会太深但基本概念不能两眼一抹黑。Webpack的核心概念是入口、出口、Loader、Plugin、Mode。面试问得最多的就是Loader和Plugin的区别Loader用于转换模块的源码比如css-loader解析CSS、babel-loader做语法转换Plugin则用于在打包生命周期里做额外操作比如HtmlWebpackPlugin生成HTML、MiniCssExtractPlugin抽取CSS文件。Vite这几年越来越火我也被问过Vite和webpack的区别。至少要答出Vite利用浏览器原生ES Module在开发阶段按需编译启动和热更新都比webpack快生产构建则用Rollup打包。如果还能提到Vite开发阶段预构建依赖用的是esbuild底层是Go写的面试官会觉得你确实用过不只是背概念。5. 框架与项目深挖从“会做”到“会讲”的关键一步5.1 项目讲述的层次感业务背景、技术方案、方案取舍日常实习的简历上项目经历往往是面试官最大的提问来源。我一开始以为把项目功能讲清楚就够了直到被连续追问“为什么用这个方案”“有没有其他方案”“数据量变大怎么办”才意识到项目讲述要分成三层。第一层是业务背景我做这个系统是为了解决什么问题用户是谁核心流程是什么。第二层是技术方案我用了什么技术栈模块怎么划分数据流怎么走接口怎么设计。第三层是方案取舍为什么选择这个方案而不是另一个它有什么代价如果重做一次会在哪里做不同选择。大多数候选人能讲好第一层一部分人能讲好第二层能主动讲到第三层的人不多而面试官恰恰把这个当成区分度。5.2 React/Vue追问链路虚拟DOM、diff算法、响应式原理框架题的追问链路很固定但可以挖得很深。面React一定绕不开虚拟DOM和diff算法至少要能说清楚为什么要用虚拟DOM就是减少直接操作真实DOM的性能开销、支持跨平台渲染diff算法如何工作主要是同层比较、通过key复用节点以及函数组件和类组件的差异。面Vue则避不开响应式原理。Vue2用Object.defineProperty拦截已有属性新增属性需要Vue.setVue3改用Proxy代理整个对象支持新增和删除属性也能拦截更丰富的操作。我会从这个差异去理解两者设计上的演进再往深里聊依赖收集和触发更新的过程以及computed和watch的区别。如果面试官问到一个没答上来的点我会主动说“这个细节我记不太清但可以基于我对响应式原理的理解推测一下”这种回答方式往往比沉默更好。5.3 项目里的状态管理和性能优化怎么讲才显真实项目里只要用了状态管理库面试官就会追问“为什么选它”“有没有遇到状态同步的坑”。我自己的经验是要把“客户端状态”和“服务器状态”区分开。客户端状态用Redux或Pinia管理服务器状态更推荐用React Query或SWR做缓存和重新验证。这种表述来自真实项目的观察比一句“我用过Redux”更有说服力。性能优化也是高价值话题。常见套路包括路由懒加载、图片懒加载、组件按需加载、长列表虚拟滚动、防抖节流、用React.memo和useMemo避免不必要重渲染等。但面试官真正想听的是“你怎么衡量、怎么定位、怎么验证”。我讲性能优化时一定会带一个量化结果比如“首屏时间从2.1秒降到1.3秒”哪怕数字是自己对比的也比空谈优化手段真实得多。6. 反问环节与沟通技巧容易被忽视的加分项6.1 技术面反问怎么问才能让面试官觉得你有想法很多同学到了反问环节就问“团队主要用什么技术栈”这不算错但能体现的思考有限。我后来习惯把反问分成两个方向技术广度和业务深度。技术广度可以问“团队现在维护的主要系统有哪些技术栈上偏React还是Vue有没有在推进SSR或者全栈化”。业务深度可以问“这个实习岗位主要支持的业务线是什么新人进入的前两周一般负责什么类型的需求”。如果已经是二面或leader面甚至可以问“团队对实习生的培养路径是怎么设计的”“目前团队在技术方向上最想攻克的难点是什么”。这类问题跟技术关系不大但能看出你对加入这个团队是认真的面试官也愿意在评价中帮你多说几句。6.2 HR面聊薪资和到岗时间坦诚的边界很重要HR面聊到岗时间时最忌讳的是“随时都能来”因为这显得你没有考虑过课程安排。我的建议是提前想清楚时间范围比如“6个月左右每周4天考试周可以适当调整”。这种表达既展示稳定性又让HR觉得你是一个会规划时间的人。谈薪资时如果对方先问期望我给的是一个区间而不是单一数字并且会补一句“我主要看重团队和项目带来的成长薪资在合理范围内都可以协调”。这个表态看起来随和实际上更容易让HR往区间上沿靠。日常实习本来就不是主要收入来源与其在几十块钱的差额上拉扯不如多争取一个有挑战的业务方向。6.3 遇到不会的问题说“不知道”的正确姿势面试中遇到不会的问题最错误的做法是直接说“不会”然后冷场。更合适的策略是把你知道的部分先讲出来再请面试官补充。比如面试官问“你了解Service Worker吗”如果你只见过相关概念可以说“我了解它是实现PWA离线能力的关键技术能把资源缓存在浏览器端但目前只在文档里见过没有在项目里实际用过。如果让我现在实现我大概会先判断浏览器支持情况再注册、缓存静态资源、监听fetch事件”。这种回答虽然没有给出完整方案但展示了学习路径和思考方式。还有一个加分细节如果某个问题确实不会可以在反问环节主动提一句“刚才那个问题我没有答上来复盘时会回去补一下您能给个大概方向吗”。面试官很愿意回答这种问题而这个行为本身也在传递“我愿意学”的信号。7. 高频失误与一周突击清单7.1 我复盘十几轮面试之后发现踩得最多的三个坑第一类是简历里写了但答不上来的东西。比如我简历里写了“熟悉Webpack”面试官问“Loader和Plugin运行时机有什么区别”时我答得支支吾吾。这让我意识到写简历时对“熟悉”的定义过于宽松。后来我把技术栈名词分成了三档能讲原理、能写Demo、只是用过。属于“只是用过”的就不写进简历或者明确标注“了解”。第二类是项目细节记忆模糊。面试官问“你们项目的接口请求是怎么封装的”“错误处理是怎么做的”时如果支吾传递的信号就是你没有深度参与这个项目。我现在养成一个习惯面试前把每一个项目按“模块划分、数据流、
返回列表