Web 前端

1. 前端学科定位与认知框架

前端是运行在浏览器与多种宿主容器中的“用户界面运行时系统”开发学科。

核心本质（第一性原理）

前端的关键能力域

  1. **环境理解能力**：浏览器内核、JS 引擎、网络协议。
  2. **UI 构建能力**：三层结构、渲染模型、响应式体系。
  3. **系统架构能力**：组件化、状态管理、前端架构模式。
  4. **工程能力**：构建体系、规范、自动化 CI/CD。
  5. **观测能力**：性能监控、行为分析、稳定性治理。
  6. **跨端与系统集成能力**：Node、Hybrid、WebView、Native Bridge。

2. 浏览器执行环境体系（Rendering System）

浏览器 = 多进程架构 + 渲染流水线 + 安全沙箱 + 网络栈 + 存储系统

2.1 渲染流程（核心运行模型）

浏览器渲染引擎执行关键路径：

  1. **HTML 解析 → DOM 构建**
  2. **CSS 解析 → CSSOM 构建**
  3. **DOM + CSSOM → Render Tree**
  4. **Layout（回流）**
  5. **Painting（重绘）**
  6. **Compositing（图层合成）**

→ 任何导致 DOM 或样式变化的操作都会触发部分流程重新执行。

核心原理（抽象层）

2.2 HTML / CSS 解析模型

HTML 解析（自顶向下 + Token 化 + 栈结构构造树）

CSS 解析

2.3 浏览器持久化存储体系（Storage Architecture）

按 容量/生命周期/安全性/标准化 分层：

存储方案生命周期容量特点
Cookie会话/持久~4KB参与请求、安全属性多
LocalStorage持久5–10MB简单同步 KV
SessionStorageTab 级几 MB隔离
IndexedDB持久数十 MB异步 NoSQL 数据库
CacheStorage持久大Service Worker 资源缓存
HTTP Cache浏览器自动管理大现代 Web 性能核心

2.4 浏览器安全机制

浏览器采用 多重安全沙箱 + 限制策略：

3. 网络与协议体系

前端需要同时理解 Web 请求体系、实时通信、跨端协议。

3.1 Web 协议（HTTP / HTTP2 / HTTP3）

3.2 实时通信模型

从轮询 → 长轮询 → SSE → WebSocket → WebTransport 的演进。

协议适用场景
Polling简单但效率最低
Long Polling实时要求较低
SSE单向推送
WebSocket双向通信核心
WebRTC / WebTransport低延迟 / 流式数据

3.3 Web ↔ Native 交互协议（JSBridge体系）

Hybrid App 的基础能力。

核心思想：

  1. Web 调用 Native

    • 自定义 URI Scheme（`jsbridge://do?xxx`）
    • 注入全局对象：`addJavascriptInterface`

  2. Native 调用 Web

    • `loadUrl("javascript:...")`
    • JSBridge 回调通道

设计模型（抽象）：

JSBridge = 消息通道 + 方法注册表 + 回调管理器

4. 前端架构范式演进（重要抽象层）

前端架构的演进体现了对“UI 状态 → 渲染”的抽象趋于自动化。

4.1 直接 DOM 操作阶段（Imperative UI）

jQuery 等 → 手动读写 DOM → 性能瓶颈严重。

4.2 MV* 阶段（结构化 UI 开发）

核心价值：UI 渲染 = 数据状态的函数

4.3 Virtual DOM 阶段（声明式 UI）

React / Vue2 主流机制。

4.4 编译时代替运行时（现代趋势）

Vue3 / React Server Components / SolidJS

从运行时 Diff → 编译时优化 → 精确更新

5. 三层结构体系（结构 / 表现 / 行为）

Web 的根本结构哲学：

  1. **结构层 HTML（信息组织模型）**
  2. **表现层 CSS（视觉与布局模型）**
  3. **行为层 JS（逻辑与交互模型）**

5.1 结构层（HTML 与语义化）

5.2 表现层（CSS体系）

重点从“样式”抽象为“布局与约束系统”。

CSS 的重要模块：

5.3 行为层

6. 响应式体系（结构、表现、行为三层联动）

目标：使 UI 在不同终端、不同数据条件、不同上下文中自动适配。

响应式的三个维度

  1. **结构层响应式（内容级）**
  2. **表现层响应式（布局级）**
  3. **行为层响应式（逻辑级）**

7. 组件化体系（现代前端核心）

组件化 = UI 模型化 + 状态隔离 + 数据流抽象 + 运行时管理。

7.1 UI组件体系

7.2 模块化体系

7.3 组件化核心问题（元问题）

  1. 组件边界与职责
  2. 状态归属与提升
  3. 组件通信
  4. 跨组件依赖
  5. 异步加载与代码分割
  6. 组件复用与扩展性

8. 工程化体系（Modern Engineering System）

现代前端不是写代码，而是 构建系统、自动化系统、规范系统 的组合。

8.1 构建系统模型（AST 驱动工程）

构建工具核心流程：

  1. **解析 → AST → 依赖图**
  2. **转换（Transpile）**
  3. **打包（Bundle）或按需加载（ESM 原生）**
  4. **资源优化（压缩/拆分/内联）**
  5. **环境注入（ENV、Platform）**
  6. **产物生成（Output Graph）**

8.2 规范体系（HTML/CSS/JS/模块）

规范的本质是 约束带来可维护性和团队协作效率。

9. 前端观测体系（可观测性体系）

前端可观测性包括：

  1. 性能观测（Performance Metrics）

    • FP/FCP
    • LCP
    • CLS
    • TTI
    • 网络性能

  2. 错误观测（Error Monitoring）

    • 运行时错误
    • 资源加载错误
    • Promise 未捕获
    • 跨域异常处理

  3. 用户行为观测（行为分析体系）

    • PV/UV/VV
    • 点击行为
    • 点击热图
    • 转化率路径
    • 用户跳出路径

前端观测 = 数据采集（埋点） + 上传策略 + 分析平台 + 可视化

10. 跨栈与跨端技术体系

10.1 Node 体系（前端跨后端）

Node 赋能前端：

10.2 跨端体系

核心：前端技术正在变成 UI 跨端运行时技术

11. 前端趋势与未来

硬技术趋势

软件工程趋势

关联内容（自动生成）