前端开发的技术清单和学习建议,涵盖从基础到进阶的各个方向
一、核心基础
1HTML/CSS
○HTML5:语义化标签、表单增强、Canvas/SVG、Web Components
○CSS3:Flexbox、Grid、动画(@keyframes)、过渡(Transition)、变量(CSS Variables)
○响应式设计:媒体查询(Media Queries)、视口(Viewport)、移动优先原则
○浏览器兼容性:了解主流浏览器差异(Chrome、Firefox、Safari、Edge)
2JavaScript(ES6+)
○核心语法:作用域、闭包、原型链、异步(Promise/Async Await)
○ES6+特性:解构赋值、箭头函数、模块化(ES Modules)、Proxy/Reflect
○DOM/BOM 操作:事件委托、AJAX(Fetch API)、本地存储(
LocalStorage/SessionStorage)
○现代 API:Web Workers、WebSockets、WebRTC、Geolocation
二、核心框架与工具
1主流框架
○React:组件化、Hooks(useState/useEffect)、React Router、状态管理(Redux/Recoil/Zustand)
○Vue:Composition API、Vue Router、Pinia/Vuex、Vite生态
○Angular:依赖注入、RxJS、TypeScript深度集成
○Svelte:编译时框架、无虚拟DOM
○Next.js/Nuxt.js:服务端渲染(SSR)、静态站点生成(SSG)
2CSS 生态
○预处理器:Sass/SCSS、Less
○CSS-in-JS:Styled-components、Emotion
○原子化 CSS:Tailwind CSS、UnoCSS
○CSS 架构:BEM、ITCSS、OOCSS
3构建工具
○打包工具:Webpack、Rollup、Vite、Parcel
○包管理:npm、Yarn、pnpm
○代码规范:ESLint、Prettier、Stylelint
○模板工程化:Create React App、Vue CLI、脚手架自定义
三、进阶技术
1TypeScript
○类型系统、泛型、装饰器、Utility Types
○与框架结合:React + TS、Vue + TS
2性能优化
○加载优化:代码分割(Code Splitting)、懒加载、Tree Shaking、CDN
○渲染优化:防抖/节流、虚拟列表、Web Worker 计算
○性能分析工具:Lighthouse、WebPageTest、Chrome DevTools(Performance 面板)
3工程化与 DevOps
○CI/CD:GitHub Actions、GitLab CI、Jenkins
○测试:单元测试(Jest/Vitest)、E2E 测试(Cypress/Playwright)、组件测试(Testing Library)
○监控:错误追踪(Sentry)、性能监控(RUM)
4跨平台开发
○移动端:React Native、Flutter、Capacitor
○桌面端:Electron、Tauri
○小程序:微信小程序、Uni-app、Taro
5前沿技术
○WebAssembly:Rust/Go 编译为 WASM
○微前端:Module Federation、Qiankun
○低代码/无代码:可视化搭建(如 Figma 插件开发)
○3D/AR:Three.js、Babylon.js、WebXR
四、网络与浏览器
1网络基础
○HTTP/HTTPS 协议、缓存策略(强缓存/协商缓存)
○RESTful API、GraphQL、gRPC
○WebSocket、Server-Sent Events(SSE)
2浏览器原理
○渲染流程(Critical Rendering Path)、重绘与回流
○事件循环(Event Loop)、宏任务/微任务
○安全机制:CORS、Content Security Policy(CSP)
五、软技能与学习资源
1软技能
○团队协作(Git 分支管理、Code Review)
○沟通能力(与设计师、后端协作)
○技术文档阅读(MDN、RFC)
2学习资源
○书籍:《JavaScript高级程序设计》《你不知道的JavaScript》《重构》
○社区:GitHub、Stack Overflow、DEV.to、国内技术博客
○实践:参与开源项目(如给 Vue/React 贡献代码)、个人项目(从零搭建全栈应用)
六、学习路线建议
1初级阶段:HTML/CSS → JavaScript → Git → 基础框架(React/Vue)
2中级阶段:TypeScript → 工程化工具 → 性能优化 → 网络协议
3高级阶段:框架源码阅读 → 跨端技术 → 架构设计(微前端/状态管理方案)