前端面试七天冲刺计划（8月28日 - 9月4日）

前端面试七天冲刺计划8月28日 - 9月3日核心原则只抓高频核心放弃冷门偏题每道题提炼3-5个关键词看完合上文档口头复述错题记备忘录不要只看不输出。 Day 18月28日JavaScript 核心主攻⏰ 时间安排建议8-10小时时段内容时长09:00-11:00原型链 继承2h11:00-12:30闭包 作用域链1.5h14:00-15:30this指向 箭头函数1.5h15:30-17:30事件循环 宏微任务2h17:30-19:00Promise async/await1.5h20:00-22:00手写题防抖、节流、深拷贝2h 优质学习资料资料来源链接/说明《JavaScript深入系列》15篇冴羽GitHubgithub.com/mqyqingfeng/Blog —— 原型、闭包、this、事件循环讲解最透彻《ECMAScript 6 入门》Promise章节阮一峰es6.ruanyifeng.com事件循环可视化Jake ArchibaldB站搜Jake Archibald event loop或 MDN Event Loop 文档MDN - 继承与原型链MDN Web Docsdeveloper.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chainB站手写防抖节流黑马程序员/尚硅谷B站搜索前端手写题系列字节真题解析闭包、原型、事件循环CSDN 2026春招面经搜索字节前端面试真题解析系列 当日必刷面试题大厂真题【字节跳动一面必问】console.log输出顺序题事件循环console.log(1);setTimeout(()console.log(2),0);Promise.resolve().then(()console.log(3));console.log(4);// 答案1 4 3 2闭包是什么请给出一个实际应用的例子。来源字节、百度、阿里一面闭包导致的内存泄漏怎么定位来源字节番茄追问原型链的本质是什么instanceof如何实现来源字节、美团var、let、const的区别暂时性死区【手写题】6. 手写防抖debounce—— 立即执行版 非立即执行版7. 手写节流throttle—— 时间戳版 定时器版8. 手写简易深拷贝考虑循环引用【阿里/美团追问】9.new操作符做了什么手写new10.Object.create()和new的区别✅ 当日输出检查能口头解释原型链查找过程3句话以内能说出闭包的3个应用场景能画出事件循环流程图手写防抖节流不看参考能写出来 Day 28月29日ES6 手写强化⏰ 时间安排时段内容时长09:00-10:30箭头函数、解构、展开运算符1.5h10:30-12:00模块化ESM vs CJS1.5h14:00-15:30Map/Set/WeakMap/WeakRef1.5h15:30-17:30Promise 链式调用 异常捕获2h17:30-19:00复盘Day1手写题1.5h20:00-22:00手写简易Promise核心逻辑2h 优质学习资料资料来源说明《ES6标准入门》第3版阮一峰es6.ruanyifeng.com —— 模块化、Promise、Symbol章节手写Promise详解掘金搜索手写Promise A 规范实现ES6系列20篇冴羽GitHub mqyqingfeng/BlogB站手写Promise技术胖/渡一教育B站搜索手写Promise 面试MDN - Using PromisesMDNdeveloper.mozilla.org 当日必刷面试题【腾讯/字节高频】箭头函数与普通函数的区别至少说出5点ES Module 和 CommonJS 的区别来源阿里、字节Map和Object的区别什么场景用MapWeakMap的应用场景为什么能防止内存泄漏Promise.all、Promise.race、Promise.allSettled、Promise.any区别async/await的本质是什么错误处理怎么做【手写题——2026大厂高频】7. 手写简易Promise含then链式调用8. 手写Promise.all来源字节、美团三面9. 手写并发限制器最多同时3个请求来源阿里、字节2026真题// 字节真题实现一个限制并发数的请求调度器functionlimitRequest(urls,limit){...}手写Array.prototype.reduce【场景追问】11.for...of、forEach、for...in区别哪个能中断12. 解构赋值的默认值什么时候生效✅ 当日输出检查能手写简易Promise含resolve/reject/then能说出ESM和CJS的3个核心区别能解释Promise.all的错误处理策略 Day 38月30日CSS 浏览器原理 网络⏰ 时间安排时段内容时长09:00-10:30盒模型、BFC、垂直居中1.5h10:30-12:00回流重绘、事件捕获冒泡1.5h14:00-16:00浏览器渲染流程从URL到页面2h16:00-17:30HTTP缓存强缓存/协商缓存1.5h17:30-19:00跨域方案CORS/JSONP/代理1.5h20:00-21:30XSS CSRF 原理与防御1.5h 优质学习资料资料来源说明《CSS世界》张鑫旭zhangxinxu.com —— BFC、盒模型权威讲解浏览器工作原理李兵《浏览器工作原理与实践》极客时间专栏B站有免费解读版从输入URL到页面展示掘金/冴羽搜索从输入URL到页面渲染完整过程HTTP缓存详解Jerry Qu 博客imququ.com —— 缓存策略最权威跨域方案总结掘金/MDN搜索前端跨域解决方案 2025B站浏览器渲染流程码农高天/技术蛋老师B站搜索浏览器渲染原理 当日必刷面试题【字节/腾讯必问】标准盒模型和IE盒模型的区别box-sizing怎么用什么是BFC触发条件有哪些应用场景来源字节、快手一面实现垂直居中的方式有哪些至少说出5种回流Reflow和重绘Repaint的区别如何减少来源阿里、美团事件冒泡和事件捕获的区别stopPropagation和preventDefault区别【浏览器网络——中大厂必考】6. 从输入URL到页面展示经历了什么来源字节、腾讯、阿里几乎必问7. 强缓存和协商缓存的区别Cache-Control和ETag怎么配合8. 跨域是什么浏览器的同源策略限制了什么9. CORS的简单请求和预检请求Preflight区别10. XSS攻击的原理如何防御CSP、转义、HttpOnly11. CSRF攻击的原理如何防御Token、SameSite、Referer【2026新增热点】12. HTTP/2 和 HTTP/3 的核心区别来源字节2026春招13. HTTPS的握手过程为什么需要非对称对称加密✅ 当日输出检查能画出浏览器渲染流程图DNS→TCP→HTTP→解析→渲染能说出5种垂直居中方案并写出代码能解释CORS预检请求的触发条件 Day 48月31日Vue / React 框架⏰ 时间安排时段内容时长09:00-11:00Vue3 响应式原理Proxy2h11:00-12:30虚拟DOM Diff算法1.5h14:00-15:30computed / watch / 组件通信1.5h15:30-17:30React HooksuseState/useEffect/useMemo/useCallback2h17:30-19:00闭包陷阱 依赖数组1.5h20:00-21:30框架对比 面试答题模板1.5h 优质学习资料资料来源说明Vue3官方文档-响应式原理Vue官网cn.vuejs.org/guide/extras/reactivity-in-depth.html《Vue3设计与实现》霍春阳HcySunYang书籍/B站有解读视频React官方文档-HooksReact官网react.dev/learnB站Vue3源码解析coderwhy/技术蛋老师B站搜索Vue3响应式原理掘金React Hooks闭包陷阱掘金前端搜索React useEffect 闭包陷阱卡颂《React技术揭秘》个人网站react.iamkasong.com 当日必刷面试题【Vue——阿里/美团/快手高频】Vue3响应式原理Proxy相比Object.defineProperty的优势来源阿里、美团必问computed和watch的区别watchEffect呢Vue组件通信方式有哪些至少6种nextTick的原理什么场景需要用它key的作用是什么为什么不建议用indexVue3的Composition API相比Options API的优势【React——字节/腾讯高频】7.useEffect的依赖数组原理空数组和不传的区别来源字节8. 什么是闭包陷阱怎么解决来源字节、快手2026真题9.useMemo和useCallback的区别什么时候用10. React的Fiber架构解决了什么问题11.setState是同步还是异步React 18的批处理【框架通用——2026趋势题】12. 虚拟DOM到底优化了什么频繁操作DOM为什么慢来源字节、腾讯13. Vue和React的Diff算法有什么区别14. 为什么不要死磕源码——记住执行流程和面试答题要点✅ 当日输出检查能画出Vue3响应式依赖收集→派发更新流程能说出React Hooks的3条使用规则及原因能解释虚拟DOM Diff的核心价值不是更快是最优解 Day 59月1日工程化 性能优化⏰ 时间安排时段内容时长09:00-11:00Webpack vs Vite 核心差异2h11:00-12:30Loader vs Plugin 构建流程1.5h14:00-16:00首屏优化 图片优化 懒加载2h16:00-17:30路由分包 虚拟滚动1.5h17:30-19:00性能指标FCP/LCP/CLS 排查方法1.5h20:00-21:30线上性能问题排查实战1.5h 优质学习资料资料来源说明Webpack官方文档-概念Webpack官网webpack.docschina.orgVite官方文档-为什么选ViteVite官网cn.vitejs.dev《前端性能优化实战》掘金小册/极客时间搜索前端性能优化B站Webpack原理掘进/前端工匠B站搜索Webpack构建流程原理Chrome DevTools性能分析Google官方developer.chrome.com/docs/devtools/Web Vitalsweb.devweb.dev/vitals/ 当日必刷面试题【工程化——字节/美团/阿里必问】Webpack和Vite的核心区别为什么Vite快来源字节、美团2026必问Loader和Plugin的区别分别举例说明。Webpack的构建流程入口→编译→输出什么是Tree Shaking原理是什么什么是代码分割Code Splitting怎么实现路由懒加载【性能优化——决定你能不能拿高薪】6. 首屏加载慢怎么优化来源阿里、美团三面7. 图片优化方案有哪些WebP、懒加载、CDN、雪碧图、SVG8. 什么是虚拟滚动/虚拟列表原理是什么来源字节、快手9. 前端性能指标有哪些LCP、FCP、CLS分别是什么10.线上页面卡顿怎么排查来源美团、字节——考工程思维不是死背名词【2026新增】11. Rspack和Webpack的关系为什么字节在推来源字节2026春招12. 微前端方案了解吗qiankun/Module Federation✅ 当日输出检查能说出Vite快的3个核心原因能列出至少6种首屏优化方案能描述线上性能问题的排查流程Performance面板→长任务→定位瓶颈 Day 69月2日项目梳理面试翻车重灾区⏰ 时间安排时段内容时长09:00-12:00每个项目整理四块内容3h14:00-16:00准备高频项目拷问题2h16:00-18:00完整口述每个项目 录音2h20:00-21:30听录音、理顺逻辑、修改表达1.5h 每个项目必须准备的四块内容┌─────────────────────────────────────────────────┐ │ 1. 业务背景项目解决什么问题用户是谁 │ │ 2. 你的职责你负责哪些模块技术选型是什么 │ │ 3. 遇到的问题遇到了什么坑做了什么取舍 │ │ 4. 解决方案怎么解决的结果如何量化数据 │ └─────────────────────────────────────────────────┘ 高频项目拷问题2026大厂真题【必准备——几乎每场面试都会问】页面白屏/卡顿怎么排查来源字节、美团、阿里答题框架Network面板→Console报错→Performance长任务→代码定位→修复内存泄漏是什么怎么产生如何修复来源字节、腾讯答题框架未清除的定时器/事件监听/闭包引用/全局变量→Chrome Memory面板→Heap Snapshot复杂表单联动校验怎么实现来源阿里、美团答题框架表单引擎设计/依赖收集/异步校验/防抖策略AI工具写代码如何保障代码质量来源2026字节、腾讯新增题答题框架Code Review/AI输出审查清单/单测覆盖/提示词工程【加分追问】5. 你在项目中做了哪些性能优化效果如何要有数据6. 组件/模块是怎么设计的为什么这样设计7. 团队协作中遇到分歧怎么解决8. 如果重新做这个项目你会怎么改进⚠️ 关键提醒不要只说我用了Vue/Vite要讲遇到什么坑、做了什么取舍示例对比❌ “我用了Vue3 Pinia Vite”✅ “项目初期用Vuex后来状态管理复杂度上升我主导迁移到Pinia减少了40%的样板代码打包体积从2.3M优化到800K通过路由分包GzipCDN”✅ 当日输出检查每个项目能在3分钟内完整口述每个项目至少准备2个踩坑→解决的故事录音回听逻辑通顺、无口头禅 Day 79月3日复盘 模拟面试不学新知识⏰ 时间安排时段内容时长09:00-11:00复盘前5天错题笔记2h11:00-12:30手写题全部过一遍防手生1.5h14:00-16:00刷高频场景题2h16:00-18:00完整模拟面试录音2h20:00-21:00准备自我介绍1分钟版3分钟版1h 高频场景题考工程思维不是死记概念频繁操作DOM为什么慢虚拟DOM到底优化什么来源字节、腾讯浏览器有GC机制为什么还会内存泄漏来源字节、阿里Agent里面Skill调用链路如何监控来源2026字节、腾讯新题——考工程思维一个列表有10万条数据怎么渲染不卡用户反馈页面偶现白屏你怎么排查如何设计一个前端错误监控系统如何实现一个可拖拽排序的列表 模拟面试清单自我介绍模板1分钟版电话面/快速介绍面试官好我是XXXX年前端开发经验主要技术栈是Vue/React。在XX公司负责XX业务线前端开发主导了XX项目的性能优化将首屏加载时间从3s降到1.2s。希望加入贵公司参与更有挑战性的技术建设。3分钟版正式面试在1分钟版基础上 项目亮点 技术深度 职业规划模拟面试流程自我介绍 → 2. 项目深挖 → 3. 八股拷问 → 4. 手写代码 → 5. 场景题 → 6. 反问环节✅ 当日输出检查所有手写题能脱稿写出对着手机完整模拟一遍录音回听自我介绍流畅、自信、不超时 全套资料汇总清单 权威博客/个人网站作者/网站方向地址阮一峰ES6/JS基础/网络ruanyifeng.com/blog冴羽JS深入/专题/ES6系列github.com/mqyqingfeng/Blog张鑫旭CSS权威zhangxinxu.com木易杨前端进阶/面试题github.com/Advanced-Frontend/Daily-Interview-Question卡颂React源码react.iamkasong.comJerry QuHTTP/网络/安全imququ.com霍春阳Vue3设计书籍《Vue3设计与实现》MDN Web Docs全栈权威参考developer.mozilla.org B站推荐频道/关键词内容黑马程序员前端面试八股文全套尚硅谷手写题系列技术蛋老师浏览器原理/网络渡一教育JS手写/面试搜索2026前端面试最新面经解析搜索前端手写题合集防抖节流/Promise/深拷贝 刷题/面经平台平台用途牛客网大厂真实面经字节/阿里/腾讯/美团掘金高质量技术文章、面试总结LeetCode算法题大厂一面可能考CSDN 2026面试题库搜索2026前端面试高频1000题GitHub: haizlin/fe-interview每日前端面试题 推荐书籍有余力时翻阅书名作者对应Day《JavaScript高级程序设计》第4版Matt FrisbieDay1-2《你不知道的JavaScript》上中卷Kyle SimpsonDay1《CSS世界》张鑫旭Day3《Vue3设计与实现》霍春阳Day4《React技术揭秘》卡颂Day4 七天冲刺核心心法╔══════════════════════════════════════════════════╗ ║ 1. 只抓高频放弃冷门偏题 ║ ║ 2. 每道题提炼3-5个关键词合上文档口头复述 ║ ║ 3. 不要只看不输出错题记备忘录 ║ ║ 4. 不要死磕源码记住执行流程和答题要点 ║ ║ 5. 项目要讲故事不是背技术名词 ║ ║ 6. 每天只有3-4小时砍掉次要内容保核心 ║ ║ 7. 短期冲刺是敲门砖拿到Offer后补全底层基础 ║ ╚══════════════════════════════════════════════════╝ 2026大厂面试趋势提醒根据最新面经字节/阿里/腾讯/美团 2026春招趋势说明从八股→场景题不再问什么是闭包而是这个场景怎么用闭包解决AI协作能力你用AI写代码吗怎么保证质量成为新必问题工程化深度Vite/Rspack/微前端/CI/CD 比重上升性能优化实战不背指标名词问你线上问题怎么排查手写代码并发限制、手写Promise、手写深拷贝仍是硬通货项目深挖你做了什么取舍比你用了什么技术重要10倍最后一句话一周时间强度很高但只要你按这个计划执行把高频题吃透、项目讲清楚、手写练熟就已经超过80%的竞争者。加油拿下Offer