前端核心知识

一、基础核心模块

1. ‌HTML‌

• 语义化标签（header/nav/article/section等）与文档结构优化表单元素（input类型扩展）

• 及HTML5新特性（Canvas/Web Storage）

  无障碍访问（ARIA标签）与SEO优化实现

‌CSS‌

• 盒模型（标准模型 vs IE怪异模式）与BFC机制

• 现代布局方案：Flexbox弹性布局与Grid网格布局对比实践

• 响应式设计（媒体查询/视口单位/移动优先策略

• CSS3动画（transition/animation）与硬件加速优化

‌JavaScript‌

• ES6+核心特性（箭头函数/解构赋值/Promise/模块化）

• 执行上下文、作用域链与闭包实现原理

• 原型链继承与Class语法糖本质

• 异步编程演进（Callback→Promise→Async/Await→Generator）

  
  

• 二、进阶技术体系

2. ‌框架与库‌

• React/Vue三大核心对比：虚拟DOM差异/响应式原理/组件通信模式状态管理方案（Redux/Vuex/Pinia）与数据流设计

  路由实现原理（HashRouter/BrowserRouter）与权限控制

3. ‌工程化实践‌

• 模块化演进（CommonJS/ES Module）与Tree Shaking

• Webpack核心机制（Loader/Plugin/HMR）与构建优化

• 现代打包工具对比（Vite/Rollup/Snowpack）

三、浏览器与网络

6. ‌浏览器工作原理‌

• 关键渲染路径（DOM树/CSSOM树/合成层）优化

• 事件循环机制与微任务/宏任务队列

• 内存管理与垃圾回收策略

7. ‌网络协议‌

• HTTP/2特性（多路复用/头部压缩）与HTTP/3演进

• 缓存策略（强缓存/协商缓存）与服务端渲染优化

• Web安全防护（XSS/CSRF/CSP/SameSite

  四、性能优化体系

8. ‌核心策略‌

• 关键指标优化（FP/FCP/LCP/CLS/TTI）

• 资源加载策略（预加载/懒加载/代码分割）

• 渲染性能优化（防抖节流/虚拟列表/Web Worker）

五、前沿扩展领域

9. ‌跨端开发‌

• 小程序双线程模型与原生组件通信

• Electron主进程与渲染进程架构

• Flutter Web与WebAssembly应用场景

• ‌质量保障‌

• 单元测试框架（Jest/Vitest）与E2E测试（Cypress）
  

• 监控体系建设（错误采集/性能埋点/日志分析）
  

当前技术发展更强调开发体验（DX）与用户体验（UX）的双重提升，建议在掌握基础后重点关注构建效率优化、跨平台方案适配和智能化开发工具链建设