一、JavaScript（核心能力）
这是中级前端的分水岭，必须扎实。
1. 基础但要深入
-
作用域、闭包、this 指向（手写绑定逻辑）
-
原型链、继承（ES5 / ES6）
-
执行上下文、调用栈
-
事件循环（Event Loop，宏任务 / 微任务）
👉 必须能解释：
-
Promise 为什么是异步的？
-
async/await 本质是什么？
-
setTimeout 和 Promise 执行顺序
2. 进阶能力
-
手写 Promise（核心逻辑）
-
防抖 / 节流（应用场景 + 实现）
-
深拷贝（考虑循环引用）
-
函数式编程基础（map / reduce / compose）
3. 浏览器相关
-
DOM / BOM 操作
-
事件机制（捕获 / 冒泡）
-
浏览器渲染流程（重排 / 重绘）
-
性能优化（减少重排、虚拟列表等）
二、HTML & CSS（不只是会写）
中级要求是"能还原复杂 UI + 解决兼容问题"。
1. CSS 核心
-
盒模型（标准 / IE）
-
BFC（解决布局问题）
-
Flex / Grid（必须熟练）
-
定位（absolute / relative / fixed / sticky）
2. 进阶能力
-
响应式设计（媒体查询）
-
CSS 预处理器（Sass / Less）
-
CSS 模块化（BEM、CSS Modules）
-
动画（transition / animation）
三、框架（React / Vue 至少精通一个）
你现在用 React/Vue，这块是重点。
React（建议重点）
1. 基础必须熟练
-
Hooks（useState / useEffect / useMemo / useCallback）
-
组件通信（props / context）
-
生命周期（理解 hooks 对应关系）
2. 进阶
-
自定义 Hooks
-
状态管理（Redux / Zustand）
-
性能优化（memo / useMemo / useCallback）
-
路由（react-router）
3. 原理（中级必须懂）
-
虚拟 DOM
-
diff 算法
-
Fiber 架构（基本理解）
Vue（如果你用 Vue）
-
Vue2 响应式（Object.defineProperty）
-
Vue3 响应式（Proxy）
-
Composition API
-
Vue Router / Pinia
四、工程化能力（非常关键）
这是很多人卡在"初级"的原因。
1. 构建工具
-
Webpack（必须理解核心概念）
-
Vite（现代项目必备）
2. 必须掌握
-
loader / plugin 区别
-
打包优化（代码分割、懒加载）
-
环境变量管理
-
source map
3. 代码质量
-
ESLint / Prettier
-
Git（rebase / cherry-pick）
五、网络 & 浏览器
中级一定会问。
1. HTTP
-
HTTP1.1 vs HTTP2
-
状态码（200 / 301 / 304 / 404 / 500）
-
缓存（强缓存 / 协商缓存）
2. 前端必须懂
-
跨域（CORS / JSONP / 代理）
-
Cookie / localStorage / sessionStorage 区别
-
Token 认证（JWT）
六、性能优化（面试高频）
-
首屏优化（懒加载、骨架屏）
-
资源压缩（gzip / brotli）
-
图片优化（WebP）
-
CDN 加速
-
长列表优化（虚拟滚动）
七、前端安全（很多人忽略）
-
XSS（如何防）
-
CSRF（如何防）
-
点击劫持
八、TypeScript（中级加分项 → 现在几乎必备）
既然你已经在学 TS，这块要重点搞：
-
泛型（重点）
-
类型推导
-
interface vs type
-
utility types（Partial / Pick / Record）
九、项目经验（决定你是不是"中级"）
不是写 demo，而是：
-
能独立负责一个模块
-
能设计组件结构
-
能做性能优化
-
能封装通用组件 / hooks
-
能排查线上问题
十、加分项（冲高级）
-
Node.js（简单服务能力）
-
SSR（Next.js）
-
微前端
-
ECharts（你已经在用，是加分项）
-
CI/CD