前端全链路：从浏览器基础到现代生态

这是一套从浏览器基础走到现代前端生态的系列文章。视频负责先把主线讲清楚，博客版在同一条线上继续展开：浏览器如何导航和渲染，HTML、CSS、JavaScript 各自负责什么，TypeScript、Node、Vite、测试、性能、安全、部署和框架生态怎样组成真实前端工程。

对应视频合集：B站《前端全链路：从浏览器基础到现代生态》上传、定时与合集核验后回填正式链接。 当前博客状态：已发布到 JD 博客，并完成 HTTPS 代表性页面核验。

阅读路线

如果基础比较薄，建议按 EP01 到 EP30 顺序阅读，再看 EP31 到 EP33 的 React、Vue、Angular 专项。前三十篇会先把浏览器、Web 平台和工程化链路讲清楚；后三篇再单独下钻框架心智模型，避免一开始就陷进 API 列表。

篇目	主题
EP01	现代前端技术全景：Web 平台、工程化与框架生态
EP02	浏览器导航流程：URL、DNS、HTTP、DOM 与渲染管线
EP03	Web 平台的三门语言：HTML、CSS 与 JavaScript
EP04	浏览器 DevTools 技术体系：DOM、网络、运行时与性能
EP05	语义 HTML 与 DOM 结构
EP06	HTML 表单模型：label、输入控件与原生校验
EP07	CSS 层叠、选择器与样式计算
EP08	CSS 布局系统：盒模型、Flex 与 Grid
EP09	响应式设计：视口、媒体查询与容器查询
EP10	Web 可访问性基础：语义、键盘与可感知界面
EP11	JavaScript 语言基础：值、函数、对象与作用域
EP12	DOM 编程：节点、查询、修改与渲染影响
EP13	浏览器事件系统：监听、冒泡、委托与默认行为
EP14	事件循环：调用栈、任务队列、微任务与渲染
EP15	Fetch 与网络请求：Request、Response、CORS 与错误处理
EP16	浏览器存储：Cookie、localStorage、IndexedDB 与 Cache
EP17	JavaScript 模块系统：import、export、依赖图与加载策略
EP18	TypeScript 静态类型系统：推断、收窄、泛型与类型擦除
EP19	Node.js 与包管理：npm、pnpm、依赖树和 Lockfile
EP20	Vite 构建流水线：原生 ESM、HMR、转换与打包
EP21	前端代码质量工具链：Formatter、Lint、类型检查与测试
EP22	组件化 UI 与响应式更新模型
EP23	前端框架架构比较：React、Vue、Angular 与 Svelte
EP24	Web 渲染架构：CSR、SSR、SSG、Hydration 与 Islands
EP25	前端应用层架构：路由、数据获取、状态管理与表单
EP26	前端测试分层：单元、组件、集成、E2E 与视觉回归
EP27	Web 性能工程：加载、渲染、交互与 Core Web Vitals
EP28	Web 前端安全：XSS、CSRF、CSP 与依赖供应链
EP29	前端交付与可观测性：构建产物、CDN、缓存、Source Map 与监控
EP30	AI 辅助前端工程与学习路线：生成、验证与质量边界
EP31	React 深讲：组件函数、Hooks、状态更新与生态边界
EP32	Vue 深讲：单文件组件、响应式系统、Composition API 与渐进式架构
EP33	Angular 深讲：完整框架、组件模板、依赖注入、Signals 与大型应用结构

这套文章怎么读

• 遇到页面显示问题，优先看 EP02、EP03、EP04、EP07、EP08。
• 遇到交互、异步、请求和状态问题，优先看 EP11 到 EP17。
• 遇到工程化、依赖、构建和质量问题，优先看 EP18 到 EP21。
• 做框架选型或理解渲染架构，优先看 EP22 到 EP25，再看 EP31 到 EP33。
• 准备上线和排查线上问题，优先看 EP26 到 EP29。

核心判断

现代前端不是一组工具名，而是一条运行链路：浏览器加载资源，Web 平台提供结构、样式和行为，工程化工具保证代码可检查、可构建、可协作，框架负责组织复杂 UI，测试、性能、安全和监控让功能能够稳定交付。