中级前端其实不是“多会几个 API”，而是从“会写页面”升级到“能做系统”。下面我给你按能力模块拆开，尽量具体一点，你可以对照查漏补缺。
一、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
