2026 上半年前端学习复盘：从基础到工程化的进阶之路

1. 写在前面

2026 年上半年已经过去，趁着这个时间节点，把上半年学的前端知识系统性地梳理一遍。这篇文章既是给自己的一份复盘笔记，也希望能给同样在进阶路上的前端同学一些参考。

2. 基础巩固：JS 与 TS 的再夯实

上半年首先把 JavaScript 和 TypeScript 的基础重新过了一遍，重点放在之前容易忽略的细节上。

• JavaScript 进阶：深入理解了闭包、原型链、事件循环（Event Loop）机制，以及 Promise 和 async/await 的底层原理。
• TypeScript 类型体操：从基础的接口、泛型，进阶到条件类型、映射类型、infer 推断等高级用法，让类型系统真正为业务服务。
• 手写实现：手动实现了 Promise、debounce、throttle、深拷贝等常见工具函数，加深了对底层原理的理解。

3. 框架深入：Vue 3 与 React 18 双线并进

上半年在框架层面做了不少功课，Vue 3 和 React 18 都有涉及。

3.1 Vue 3 组合式 API

• 熟练使用 setup 语法糖、ref、reactive、computed、watch 等核心 API。
• 理解了 provide/inject 的依赖注入机制，以及组件通信的多种方案。
• 学习了自定义指令、插槽（Slot）的高级用法，以及如何封装可复用的组合式函数（Composables）。

3.2 React 18 并发特性

• 掌握了 useState、useEffect、useMemo、useCallback 等 Hooks 的适用场景。
• 深入理解了 React 18 的并发渲染（Concurrent Rendering）、自动批处理（Automatic Batching）等新特性。
• 实践了自定义 Hooks 的封装，把业务逻辑从组件中抽离出来。

4. 工程化：从构建到部署的完整链路

工程化是上半年投入精力较多的部分，也是收获最大的一块。

• Vite 构建工具：从 Webpack 迁移到 Vite，理解了其基于 ESBuild 的快速冷启动原理，以及如何配置开发代理、代码分割和构建优化。
• 代码规范与质量：搭建了 ESLint + Prettier + Husky + lint-staged 的完整代码规范链路，实现了提交前的自动检查和格式化。
• CI/CD 流程：学习了 GitHub Actions 的基本用法，实现了代码推送后自动执行测试、构建和部署的流水线。
• 包管理：对比了 npm、yarn、pnpm 的差异，最终在项目中采用 pnpm 作为包管理器，体验了其硬链接带来的安装速度提升。

5. 性能优化：让页面更快

性能优化是前端进阶的必修课，上半年系统地学习并实践了以下几个方面：

• 加载性能：路由懒加载、组件异步加载、图片懒加载与 CDN 加速。
• 渲染性能：减少不必要的重渲染、使用虚拟列表处理大数据量、合理使用 memo 和 useMemo。
• 构建体积：通过 Tree Shaking、代码分割、按需引入等方式控制打包体积。
• 性能监控：使用 Lighthouse 和 Performance API 进行性能检测，并针对性地优化。

6. 网络与安全：不可忽视的底层知识

• HTTP/HTTPS：复习了 HTTP 缓存策略（强缓存、协商缓存）、HTTP/2 多路复用等知识。
• 跨域方案：实践了 CORS、JSONP、代理转发等跨域解决方案。
• 前端安全：了解了 XSS、CSRF 的原理与防御措施，并在项目中落实了输入过滤和 Token 校验。

7. 下半年规划

复盘上半年，发现还有一些方向值得继续深入：

• Node.js 服务端开发：学习使用 NestJS 或 Koa 搭建简单的 BFF 层。
• 微前端：了解 qiankun 或 Module Federation 的落地实践。
• WebAssembly：关注其在性能敏感场景下的应用前景。
• 源码阅读：深入阅读 Vue 3 或 React 的核心源码，理解框架设计思想。

8. 总结

2026 年上半年是夯实基础、拓展广度的一年。从 JS/TS 基础，到 Vue 3 与 React 18 双框架，再到工程化、性能优化和网络安全，知识体系逐渐完整。下半年希望能在服务端和源码层面继续深耕，向全栈方向迈进。