Tip
AI 时代学习策略：用🟢构建护城河，用🟡过面试关，用🔴解放生产力
🔗关联领域
🎯 核心靶心
- 掌握 AI 难以替代的核心技能（🟢区域） ✅ 2026-03-14
- 理解 AI 能辅助但面试必考的技能（🟡区域）
- 建立 AI 时代的前端技术选型思维
🗺️ 战略地图
- KR1：基础三件套 — HTML/CSS/JavaScript 核心原理（权重 25%）
- KR2：主流框架 — React/Vue 深入原理（权重 25%）
- KR3：工程化 — 构建工具与模块化（权重 20%）
- KR4：性能优化 — 浏览器渲染与监控（权重 15%）
- KR5：AI 时代黄金能力 — 协同开发与调试（权重 15%）
🛠️ 执行引擎
阶段一：基础三件套
- 学习 HTML/CSS 核心概念（语义化、A11Y、布局、BFC） ✅ 2026-03-14
- 学习 JavaScript 核心原理（闭包、原型链、事件循环、this）
- 练习手写题：防抖节流、Promise.all、call/apply/bind、深拷贝
- 整理错题笔记 → 算法-筑基期错题集
参考：
]一、 基础三件套
HTML/CSS
技能点 AI 时代策略 面试价值 🟢 C-语义化 HTML/可访问性 (A11Y) 需要深入：AI 不懂你的用户群体是否有屏幕阅读器需求，不懂 WCAG 标准背后的同理心 高频 🟢 网页复杂布局 需要深入：AI 可以写 Grid/Flex 代码，但需要你告诉它 ” 这里应该用 masonry 布局还是瀑布流 “ 高频 🟡 Flex/Grid 具体属性 AI 辅助记忆：写的时候让 AI 补全，但要能读懂生成的代码，知道 align-items 和 align-content 的区别 高频 🟡 BFC/层叠上下文 理解原理：这是调试疑难杂症的必备知识，AI 无法替你 ” 看到 ” 页面为什么错位 中频 🔴 CSS 兼容性写法 完全交给 AI： -webkit-前缀什么的，让 AI 处理几乎不考 JavaScript (ES6+)
技能点 AI 时代策略 面试价值 🟢 闭包/原型链/作用域 需要深入：这是 JS 的底层运行机制，AI 生成的代码如果有内存泄漏，不懂这些你查不出来 必考 🟢 事件循环 (Event Loop) 需要深入：异步流程控制的核心，AI 可以写 Promise，但无法帮你理解 ” 为什么这个 setTimeout 先执行了 “ 必考 🟢 this 指向规则 需要深入：AI 生成的箭头函数可能用错地方，你要能发现 必考 🟡 Promise A+ 规范 理解核心：不必手写完整 Promise（AI 可以写），但要理解微任务队列、状态机原理 高频 🟡 手写防抖节流 AI 辅助：但面试可能会让你手写，所以得练 高频 🔴 ES6 新特性语法细节 AI 补全：比如 Array.prototype.flatMap的第二个参数，用的时候让 AI 写低
指向原始笔记的链接
阶段二：主流框架
- 选择 React 或 Vue 深入学习（建议 Vue3） ✅ 2026-03-14
- 学习响应式原理/虚拟 DOM/ Fiber 架构 ✅ 2026-03-14
- 理解 Hooks 原理，能手写简单 Hooks ✅ 2026-03-14
- 学习状态管理方案（Pinia/Redux） ✅ 2026-03-14
参考：[
]Circular transclusion detected: 10-PROJECTS/P-求职前端岗位/MOC-前端能力提升指南
阶段三：工程化
- 深入理解 ESM vs CommonJS 差异 ✅ 2026-03-14
- 学习 Webpack/Vite 构建原理 ✅ 2026-03-14
- 掌握 TypeScript 高级类型（泛型、工具类型）
- 理解 Tree Shaking 和代码分割原理
参考：[
]Circular transclusion detected: 10-PROJECTS/P-求职前端岗位/MOC-前端能力提升指南
阶段四：性能优化
- 深入理解浏览器渲染流水线（重排/重绘/合成）
- 学习核心 Web 指标（LCP/FID/CLS） ✅ 2026-03-14
- 掌握性能定位工具（Performance、Memory 面板）
- 产出性能优化报告
参考：[
]Circular transclusion detected: 10-PROJECTS/P-求职前端岗位/MOC-前端能力提升指南
阶段五：AI 时代黄金能力
- 练习用 AI 辅助编码（Copilot/Cursor）
- 培养代码审查能力（审查 AI 生成代码）
- 积累 “AI + 人工 ” 协作案例
- 准备面试话术：AI 时代如何保持竞争力
参考：[
]Circular transclusion detected: 10-PROJECTS/P-求职前端岗位/MOC-前端能力提升指南
📦 关联资源
- MOC-前端能力提升指南v1 🔍 学习指南（完整技能清单）
- MOC-前端面试真题库 🔍 高频考点
- Vue3 响应式原理 📚 核心原理
- JavaScript 事件循环 📚 核心原理
🧩 成果与交付物
- AI 时代前端面试话术 💎
- 技术选型决策笔记 💎
- 性能优化案例集 💎
💡 面试话术：当面试官问 “AI 时代你怎么保持竞争力？”
Quote
” 我认为 AI 是强大的副驾驶，但驾驶员仍然是我。
第一，理解底层原理——当 AI 生成的代码出现性能问题或内存泄漏时，我能基于对事件循环、渲染机制的理解快速定位并修复。
第二，系统架构能力——AI 可以写函数，但写不出整个应用的状态管理方案和数据流向设计。
第三，业务洞察与取舍——AI 不懂业务优先级。比如优化首屏加载时，是牺牲图片清晰度还是延迟加载？
我把 AI 当作一个需要我指挥的超级实习生——我负责思考，它负责执行。”