前端开发工具全景

涵盖语言、框架、构建工具、运行时、生态库的完整前端开发图谱 · 来源: 各项目官方文档 · GitHub

1. 前端开发生态全景图

前端开发涉及多层技术栈，从底层语言到上层框架、从开发工具到生产部署，110+ 工具/技术、24 大分类覆盖。图 1-1 以分类地图形式（按用途归类、无依赖连线）呈现生态全貌；后三张全景图分别从开发管线、技术分层、浏览器运行时给出流程与架构视角。除语言 / CSS / 动效 / 构建 / 框架 / 组件库 / 路由 / 状态 / 元框架 / 测试 / 代码质量 / 开发工具 / 运行时等经典分类外，还覆盖数据获取、数据校验、表单、组件文档、微前端、Monorepo、跨端桌面、Git 工作流、Mock、性能调试等第二梯队热门分类。

图 1-1: 前端开发技术生态全景（分类地图 · 2026）

1.1 生态补充分类 — 各分类流行工具速查

图 1-1 在原 14 大分类基础上，补充了 10 个第二梯队热门分类（含扩充现有分类的成员）。下表按分类列出补充工具的定位与适用场景。

2. 开发管线全景

从编码到上线的完整前端开发管线：编码 → lint/格式化 → 版本控制 → CI/CD → 构建 → 部署 → 浏览器渲染。

图 2-1: 前端开发管线全景 — 从编码到上线

3. 技术分层全景

前端技术栈的六层架构：运行平台 → 语言/类型系统 → 构建工具 → 前端框架 & 状态管理 → 组件库 → 元框架 & 部署。补充说明新分类的归属：数据获取（TanStack Query/SWR/Apollo）、数据校验（Zod/Valibot/Yup）属于第 4 层的应用逻辑层；表单方案（React Hook Form/Formik/VeeValidate）属于第 5 层的 UI 方案层；Monorepo（Turborepo/Nx）属于第 3 层的工程化工具；微前端（qiankun/Module Federation）与桌面跨端（Electron/Tauri/Capacitor）属于第 6 层的交付形态。注意区分：前端框架（Vue/React）提供组件模型与响应式渲染，本身不带现成 UI；组件库（Element Plus/Ant Design）构建在框架之上，交付带样式、带行为的现成组件。

图 3-1: 前端技术分层全景 — 六层架构

<!-- ================= ① 同一份「卡片 + 按钮」组件代码 ================= -->
<!-- 组件库（Ant Design）只提供结构：div.card + button.btn，好看与否它不管 -->

<div class="antd-card">
  <h3>项目概览</h3>
  <p>今日访问 128，订单 32，转化 25%。</p>
  <p>本周新增用户 45，较上周 +12%。</p>
  <button class="antd-btn">查看详情</button>
  <button class="antd-btn antd-btn-danger">导出报表</button>
</div>

<!-- ====== 左：直接堆叠（及格线）—— 组件库自带默认样式，仅此而已 ====== -->
.antd-card { padding: 0; }        /* 无间距规范：文字贴边 */
h3 { margin: 0; }                 /* 无字体层级：标题与正文同样大 */
.antd-btn { background: #fff; }   /* 无色彩规范：灰底白字直接怼 */
.antd-btn-danger { color: red; }  /* 色彩乱用：红字突兀刺眼 */

<!-- ====== 右：设计规范精修（上限）—— 用间距/色板/层级覆盖组件库默认 ====== -->
.antd-card {
  padding: 16px 20px;            /* 间距规范：统一 8px 栅格 → 呼吸感 */
  border-radius: 12px;           /* 圆角规范：与全站一致 */
  box-shadow: 0 4px 16px rgba(100,108,255,.12);  /* 轻投影提质感 */
}
.antd-card h3 { font-size: 16px; font-weight: 600; color: #1a1a2e; }  /* 字体层级 */
.antd-card p  { font-size: 13px; color: #555; }                        /* 次级信息降权 */
.antd-btn { background: linear-gradient(135deg,#646cff,#bd34fe); color:#fff; border:none; }
.antd-btn-danger { color: #d1242f; }   /* 危险色仅用于「危险操作」，不滥用 */

<!-- ============ ② 同样的设计稿：导航栏「hover 高亮 + 自适应」 ============ -->

<!-- 方案 A：纯手写 CSS —— 能做，但要自己管间距、断点、状态，且易写乱 -->
ul.nav { display: flex; }
ul.nav li { padding: 8px; }
@media (max-width: 600px) { ul.nav { flex-direction: column; } }  /* 断点要自己写 */
ul.nav li:hover { background: #646cff; color: #fff; }

<!-- 方案 B：Tailwind —— 一条 class 全搞定，间距/断点/状态都是原子化的 -->
<!-- 对应上面的渲染效果：窄屏自动竖排、hover 高亮、间距 6px 精确可控 -->
<ul class="flex gap-1.5 md:flex-col">
  <li class="flex-1 rounded-lg text-center py-2 bg-indigo-100 text-indigo-600
             transition hover:bg-indigo-600 hover:text-white">首页</li>
  ...
</ul>
<!-- 同样用 CSS 方案（Tailwind / CSS Modules / CSS-in-JS），
     差别只在「组织方式」：能否用变量统一间距、能否原子化复用、能否断点化 ——
     这就是「高权重」的含义：方案决定你精细化调优的效率天花板。 -->

<!-- ============ ③ 三种框架渲染同一个按钮，都不写 CSS ============ -->

<!-- Vue 3 写法 -->
<template><button>未加样式</button></template>

<!-- React 写法 -->
function Btn() { return <button>未加样式</button>; }

<!-- 原生 JS 写法 -->
document.body.innerHTML = '<button>未加样式</button>';

<!-- 结果：三者输出完全相同的原生 <button> 元素，浏览器统一套用默认外观。
     框架只负责「渲染逻辑」，像素观感全归 CSS。要让按钮变好看，
     得给 <button> 加 CSS（class/内联/样式表）—— 框架帮不上忙。 -->

4. 浏览器核心架构

浏览器是前端代码的终极运行环境。理解渲染引擎（Blink/WebKit/Gecko）、JS 引擎（V8/SpiderMonkey）、Event Loop 和 Web APIs 是深入前端开发的基础。

图 4-1: 浏览器核心架构 — 前端运行环境

HTML / CSS / JavaScript / TypeScript 前端核心技术体系

综合梳理：MDN Web Docs · WHATWG HTML Living Standard · W3C CSS WG · TC39 ECMA-262 · TypeScript

1. 概述 — 网页三层架构

一个网页由三门互补的语言构成，各司其职、分层解耦：

第一部分：行为图（浏览器如何运作这三者）

2.1 时序图 — 页面加载全流程

从输入 URL 到页面可交互，三门语言依次登场：HTML 先到并开始解析，遇到 CSS 和 JS 再分别请求。注意两个关键阻塞点：同步 <script> 阻塞 HTML 解析；CSSOM 未就绪会阻塞 JS 执行（因为 JS 可能读样式）。

图 2.1-1: 页面加载时序图

<!DOCTYPE html>
<html>
<body>
  <h1>页面加载时序演示</h1>

  <!-- ① 同步脚本：HTML 解析暂停，等它下载 + 执行 -->
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

  <p>这段 p 要等 lodash 加载执行完才能被解析到</p>

  <!-- ② defer：并行下载，HTML 解析完后按序执行 -->
  <script src="analytics.js" defer></script>

  <!-- ③ async：下载完立即执行，不保证顺序 -->
  <script src="widget.js" async></script>

  <p>此 p 不受 defer/async 影响，正常解析</p>
</body>
</html>

// 测量关键时间点
window.addEventListener('DOMContentLoaded', () => {
  console.log('DOM 树就绪（defer 脚本已执行）—', performance.now());
});
window.addEventListener('load', () => {
  console.log('全部资源加载完毕 —', performance.now());
});
// DOMContentLoaded 通常远早于 load

2.2 活动图 — 浏览器渲染流水线

浏览器把 HTML + CSS 变成屏幕像素的固定流水线：DOM → CSSOM → Render Tree → Layout → Paint → Composite。JS 修改页面后，会触发流水线的部分重跑——改几何属性触发 回流 Reflow（代价大），只改颜色等触发 重绘 Repaint，只改 transform/opacity 则仅需 合成 Composite（最便宜，动画首选）。

图 2.2-1: 渲染流水线活动图

// 准备：获取一个 div
const box = document.querySelector('.box');

// 【回流 Reflow】— 改了几何，代价最大
box.style.width = '300px';   // Layout → Paint → Composite
box.style.height = '200px';
box.style.left = '100px';
box.style.fontSize = '20px';

// 【重绘 Repaint】— 只改颜色，跳过 Layout
box.style.color = 'red';
box.style.background = '#eee';
box.style.boxShadow = '0 2px 8px rgba(0,0,0,0.3)';

// 【仅合成】— transform/opacity，GPU 处理，60fps 无压力
box.style.transform = 'translateX(100px) rotate(15deg)';
box.style.opacity = '0.8';

// 坏 vs 好：动画对比
// 坏 — 每帧触发回流，卡顿
el.style.top = y + 'px';  el.style.left = x + 'px';

// 好 — 仅合成，丝滑 60fps
el.style.transform = `translate(${x}px, ${y}px)`;

2.3 活动图 — JS 事件循环 (Event Loop)

JS 是单线程语言，靠事件循环实现异步：调用栈清空后，先清空微任务队列（Promise.then、queueMicrotask），再看是否需要渲染，然后取一个宏任务（setTimeout、I/O、点击回调）循环往复。这是理解 async/await、页面卡顿、任务优先级的钥匙。

图 2.3-1: 事件循环活动图

// 打开控制台运行这段，观察输出顺序
console.log('== 开始 ==');

// 宏任务 1: script 本身（当前正在执行的就是第一个宏任务）

setTimeout(() => {
  console.log('A setTimeout 0 — 宏任务');
  Promise.resolve().then(() => console.log('B Promise 在 setTimeout 里 — 微任务'));
}, 0);

setTimeout(() => console.log('C setTimeout 0 第二个 — 下一个宏任务'), 0);

Promise.resolve().then(() => console.log('D Promise 1 — 当前宏任务的微任务'));
Promise.resolve().then(() => {
  console.log('E Promise 2 — 当前宏任务的微任务');
  queueMicrotask(() => console.log('F queueMicrotask 套娃 — 本微任务清空期内执行'));
});

requestAnimationFrame(() => console.log('G rAF — 渲染前回调'));
console.log('== 同步结束 ==');

// 经典面试题
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// 输出: 1 4 3 2 —— 微任务永远插队在下一个宏任务之前

2.4 时序图 — DOM 事件流（捕获 → 目标 → 冒泡）

用户点击一个按钮时，事件并不是直接派发给按钮：先从 window 自上而下捕获到目标，再自下而上冒泡回去。"事件委托"（把监听器挂在父元素上统一处理子元素事件）正是利用冒泡阶段。

图 2.4-1: 事件捕获与冒泡时序图

<!-- HTML 结构 -->
<div id="outer">
  <ul id="list">
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
  </ul>
  <button id="add">添加项目</button>
</div>

<script>
// 事件委托：监听 ul，而不是每个 li
// 新增的 li 也会自动响应（因为事件冒泡到 ul）
document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('点击了:', e.target.textContent, ' | 实际监听在:', e.currentTarget);
  }
});

document.getElementById('add').addEventListener('click', () => {
  const li = document.createElement('li');
  li.textContent = '项目 ' + Date.now();
  document.getElementById('list').appendChild(li);  // 新 li 自动有 click 响应！
});

// 捕获 vs 冒泡对比
const outer = document.getElementById('outer');
outer.addEventListener('click', () => console.log('冒泡阶段触发 (默认)'));
outer.addEventListener('click', () => console.log('捕获阶段触发'), true); // true = 捕获
// 点击 li 时输出顺序：捕获阶段触发 → 冒泡阶段触发
</script>

第二部分：结构图（三门语言各自由什么组成）

3.1 组件图 — 三者与浏览器引擎的关系

浏览器内部由多个引擎协作：渲染引擎（Blink/WebKit/Gecko）负责 HTML/CSS 解析与渲染，JS 引擎（V8/JavaScriptCore/SpiderMonkey）负责执行脚本。DOM（Document Object Model，文档对象模型）/ BOM（Browser Object Model，浏览器对象模型）API 不属于 JS 语言本身，而是浏览器提供的宿主能力——这也是 Node.js 里没有 document 的原因。

图 3.1-1: 浏览器引擎组件图

// 假设 HTML 中有 <button id="btn">点我</button>

// 步骤 1: JS 引擎 (V8) 执行这段脚本
const btn = document.querySelector('#btn');   // → 调用 DOM API

// 步骤 2: DOM API (Web API) 在渲染引擎中查找元素
//         Blink 遍历 DOM 树找到 #btn，返回其引用

// 步骤 3: JS 通过 DOM API 挂载监听器
btn.addEventListener('click', async () => {
  // 步骤 5: 用户点击 → Event Loop 调这个回调回 V8 执行
  const res = await fetch('/api/data');        // → BOM API (fetch)
  // 步骤 6: fetch 由网络线程处理，不阻塞 JS 主线程
  //         请求完成后，Promise resolve → 微任务入队
  //         Event Loop 调度微任务 → V8 继续执行
  const data = await res.json();

  btn.textContent = data.label;               // → 修改 DOM
  // 步骤 7: 渲染引擎收到 DOM 变更 → 触发重绘/回流
  //         Blink: Layout → Paint → Composite → 屏幕更新
});

// 步骤 4: JS 执行完 → 调用栈清空 → 等待事件
// 步骤 5-7 循环发生在用户交互时

3.2 HTML — 文档结构与 DOM 类图

3.2.1 文档骨架

<!DOCTYPE html>                <!-- 声明标准模式，防止怪异模式 -->
<html lang="zh-CN">
<head>                          <!-- 元信息：不渲染 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
  <link rel="stylesheet" href="style.css">   <!-- 挂载 CSS -->
</head>
<body>                          <!-- 可见内容 -->
  <h1>标题</h1>
  <script src="app.js" defer></script>       <!-- 挂载 JS -->
</body>
</html>

3.2.2 DOM 类图 — HTML 在内存中的运行时形态

HTML 文本被解析后，每个标签变成一个对象节点，全部继承自 Node；而 Node 又继承 EventTarget——所以任何节点都能 addEventListener。JS 操作页面，本质是操作这棵对象树。

图 3.2-1: DOM 节点类型类图

// Document — 文档根节点
const doc = document;
console.log(doc.constructor.name);           // "HTMLDocument" (继承 Document)
const body = doc.querySelector('body');      // Document 提供查询方法
const div = doc.createElement('div');        // Document 提供创建方法

// Element / HTMLElement — 标签元素
div.className = 'box';                       // Element 属性
div.classList.add('active');                 // Element 方法
div.style.background = '#eee';               // HTMLElement.style
div.dataset.id = '123';                      // HTMLElement.dataset
div.innerHTML = '<span>hello</span>';  // Element.innerHTML

// Node — 所有节点的基类
body.appendChild(div);                       // Node.appendChild
console.log(div.parentNode === body);        // Node.parentNode
console.log(div.childNodes.length);          // Node.childNodes (含 Text 节点)

// EventTarget — 事件能力
div.addEventListener('click', (e) => {
  console.log('事件目标:', e.target);         // EventTarget 提供
  console.log('节点类型:', e.target.nodeType); // 1=Element, 3=Text, 8=Comment
});

3.3 CSS — 选择器 / 盒模型 / 层叠

3.3.1 一条规则的解剖

/*  选择器        声明块  */
.card:hover {              /* 类选择器 + 伪类 */
  color: #333;             /* 属性: 值; */
  padding: 16px;
}

3.3.2 层叠 (Cascade) — CSS 的 "C"

多条规则命中同一元素时，按以下顺序裁决，这是 CSS 最核心的机制：

图 3.3-1: 层叠优先级判定活动图

<!-- HTML -->
<div id="main" class="box content" style="color: purple;">
  这段文字最终是什么颜色？
</div>

<!-- CSS -->
<style>
/* ① 来源: 作者样式（浏览器默认用户代理样式优先级最低，忽略） */

/* ② 特异性: (0,0,1) — 1 个元素选择器 */
div { color: red; }

/* ③ 特异性: (0,1,0) — 1 个类选择器 */
.box { color: green; }
.content { color: yellow; }   // 与 .box 同特异性，后写覆盖 → yellow

/* ④ 特异性: (1,0,0) — 1 个 ID 选择器 */
#main { color: blue; }

/* ⑤ 行内 style 高于所有选择器 */
/* style="color: purple" → 这是最终生效的颜色！ */

/* ⑥ !important 更高，但应避免 */
#main { color: orange !important; }  // 加了 !important → orange 会覆盖 purple
</style>

比较时按位比大小：(1,0,0) > (0,99,99)。行内 style="" 高于一切选择器，!important 再高一层（应避免使用）。

3.3.3 盒模型 (Box Model)

每个元素都是一个盒子：content + padding + border + margin。默认 width 只算 content（content-box），现代做法是全局改为 border-box 让 width 包含 padding 和 border，所见即所得：

*, *::before, *::after { box-sizing: border-box; }  /* 现代 CSS 第一行 */

3.4 JS — 类型 / 原型链 / 模块化

3.4.1 类型系统

3.4.2 原型链 — JS 面向对象的本质

JS 没有传统类继承，class 只是语法糖：每个对象有隐藏属性 [[Prototype]]，读属性时沿链向上查找直到 null。这就是为什么随手创建的数组能调用 map()——方法在 Array.prototype 上。

图 3.4-1: 原型链类图

// 创建不同类型的数据，追踪 [[Prototype]] 链
const arr  = [1, 2, 3];
const obj  = { a: 1 };
const str  = 'hello';
const fn   = function() {};
const date = new Date();

// 验证原型链：所有对象最终都追溯到 Object.prototype
console.log(arr.__proto__                    === Array.prototype);    // true
console.log(arr.__proto__.__proto__          === Object.prototype);   // true
console.log(arr.__proto__.__proto__.__proto__ === null);              // true — 链终点

console.log(fn.__proto__  === Function.prototype);  // true — 函数的直接原型
console.log(date.__proto__ === Date.prototype);     // true

// 属性查找过程演示
arr.myMethod = '自身属性';
console.log(arr.myMethod);             // '自身属性' — 第 1 步找到
console.log(arr.map);                  // ƒ map() — 自身没有，沿链找到 Array.prototype
console.log(arr.toString);             // ƒ toString() — Array 没有，继续到 Object.prototype
console.log(arr.xyz);                  // undefined — 查遍全链都没有

// class 只是语法糖
class Dog {
  constructor(name) { this.name = name; }
  bark() { return `${this.name} says woof`; }
}
const d = new Dog('旺财');
console.log(d.__proto__ === Dog.prototype);            // true — 和 function 原型一模一样
console.log(d.bark === Dog.prototype.bark);            // true — 方法在 prototype 上，不在实例
console.log(Dog.prototype.__proto__ === Object.prototype); // true

3.4.3 模块化 — CJS vs ESM

ESM 是模块化语法规范（不是标准库）：规定代码怎么拆文件、怎么 import/export、宿主怎么加载解析。它统一了浏览器与 Node 两个世界，取代了 Node 私有的 CommonJS：

3.5 前端组件化演进

组件（Component）是前端 UI 领域的核心抽象：把一段可复用的 HTML + CSS + JS 封装成一个独立单元，对外只暴露 props（入参） 和 事件（出参）。本节梳理"组件"概念在前端的起源，并用具体代码演示三种主流实现方式。

3.5.1 历史时间线

3.5.2 三种实现方式 — 同一个计数器组件

<!-- HTML 中使用 -->
<my-counter initial="5"></my-counter>

<script>
class MyCounter extends HTMLElement {
  connectedCallback() {
    // 从属性读入参 (props)
    this._count = Number(this.getAttribute('initial')) || 0;
    // Shadow DOM：封装内部结构与样式，外部无法污染
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>button { font-size: 20px; } </style>
      <button>-</button>
      <span>${this._count}</span>
      <button>+</button>`;
    this.shadowRoot.querySelectorAll('button')[0]
      .addEventListener('click', () => this.set(this._count - 1));
    this.shadowRoot.querySelectorAll('button')[1]
      .addEventListener('click', () => this.set(this._count + 1));
  }
  set(n) {
    this._count = n;
    this.shadowRoot.querySelector('span').textContent = n;
  }
}
customElements.define('my-counter', MyCounter);
</script>

// Counter.jsx
import { useState } from 'react';

export default function Counter({ initial = 0 }) {  // props 入参
  const [count, setCount] = useState(initial);       // 内部状态
  return (
    <div className="counter">
      <button onClick={() => setCount(c => c - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

// 使用：<Counter initial={5} />

<!-- Counter.vue -->
<template>                              <!-- 结构 -->
  <div class="counter">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script setup>                          <!-- 逻辑 -->
import { ref } from 'vue';
const props = defineProps<{ initial: number }>();  // props 入参
const count = ref(props.initial ?? 0);               // 内部状态
</script>

<style scoped>                          <!-- 样式 (scoped 自动隔离) -->
.counter { display: flex; gap: 8px; }
</style>

3.5.3 传统 vs 组件化 — 同一个用户卡片

// 每渲染一张卡片都要重复这段命令式代码
function renderUserCard(user) {
  const card = document.createElement('div');
  card.className = 'card';
  const name = document.createElement('h3');
  name.textContent = user.name;                 // 潜在 XSS，需转义
  const btn = document.createElement('button');
  btn.textContent = '关注';
  let followed = false;                          // 状态散落在外部变量
  btn.onclick = () => {
    followed = !followed;
    btn.textContent = followed ? '已关注' : '关注';
  };
  card.append(name, btn);
  document.querySelector('#list').appendChild(card);
}
// 100 个用户 = 手动调 100 次，状态全靠自己记

// Vue 里写一次 UserCard，到处复用
<UserCard v-for="u in users" :user="u" />

// 关注状态是组件内部的事，外部无需关心
<script setup>
const props = defineProps<{ user: User }>();
const followed = ref(false);
</script>

3.5.4 什么是状态（State）

状态就是随时间变化、并驱动界面显示的数据。组件化框架的核心工作，就是把"状态"和"视图"绑定：状态一变，视图自动重新渲染。

// 状态：会变化 + 驱动视图
const [count, setCount] = useState(0);   // count 是状态
setCount(5);                              // 改状态 → 界面自动显示 5

// 普通变量：变了界面不知道
let count = 0;                            // 不是状态，改了也没人管
count = 5;                                // 界面毫无反应

// ❌ 传统命令式：改数据 + 手动同步界面（易漏、易错）
let count = 0;
count++;
document.querySelector('#num').textContent = count;  // 忘了这行就不同步

// ✅ 状态驱动（React / Vue）：只改状态，界面自动更新
const [count, setCount] = useState(0);
setCount(count + 1);   // 浏览器自动重渲染，无需手动操作 DOM

第三部分：速查手册

4.1 HTML 语义化标签速查

4.2 CSS 布局速查

/* 万能居中 */
.parent { display: flex; justify-content: center; align-items: center; }

/* 响应式卡片墙：自动换行，每列最少 240px */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

/* 圣杯布局 */
.page { display: grid; grid-template: "header header" auto "side main" 1fr "footer footer" auto / 220px 1fr; }

/* 响应式断点 */
@media (max-width: 800px) { .sidebar { display: none; } }

4.3 JS 核心语法速查

// 变量：const 优先，需要重新赋值才用 let，永远不用 var
const list = [1, 2, 3];

// 解构 & 展开
const { name, age = 18 } = user;
const merged = [...a, ...b];

// 箭头函数（无自己的 this）
const double = (x) => x * 2;

// 数组三板斧
list.map(x => x * 2).filter(x => x > 2).reduce((s, x) => s + x, 0);

// 异步：async/await 是 Promise 的语法糖
async function load() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error(res.status);
    return await res.json();
  } catch (e) {
    console.error('请求失败', e);
  }
}

// DOM 四件套：查、改、建、听
const el = document.querySelector('#app');
el.textContent = 'hello';                 // 改文本（安全，不解析 HTML）
el.classList.toggle('active');            // 改样式：操作 class 而非行内 style
const li = document.createElement('li');  // 建节点
el.addEventListener('click', (e) => {});  // 监听事件

4.4 三者协作完整示例 — 计数器

一个文件展示三层分工：HTML 定义结构和挂载点，CSS 负责外观和状态样式，JS 监听事件并更新 DOM，浏览器自动重渲染。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
  /* CSS：表现层 */
  .counter { display: flex; gap: 12px; align-items: center; font-size: 24px; }
  button { padding: 8px 20px; border: none; border-radius: 8px;
           background: #1572b6; color: #fff; cursor: pointer; }
  button:hover { opacity: 0.85; }
  .num.warn { color: #e34f26; font-weight: 700; }   /* 状态样式由 JS 切换 */
</style>
</head>
<body>
  <!-- HTML：结构层 -->
  <div class="counter">
    <button id="dec">-</button>
    <span class="num" id="num">0</span>
    <button id="inc">+</button>
  </div>

  <script>
    // JS：行为层 —— 状态驱动视图
    let count = 0;
    const num = document.querySelector('#num');
    function render() {
      num.textContent = count;
      num.classList.toggle('warn', count >= 10);  // JS 只切 class，样式交给 CSS
    }
    document.querySelector('#inc').addEventListener('click', () => { count++; render(); });
    document.querySelector('#dec').addEventListener('click', () => { count--; render(); });
  </script>
</body>
</html>

4.5 常见坑与最佳实践

第四部分：CSS 系统深入

来源：MDN Web Docs · W3C CSS WG · CSS Editor's Drafts

CSS（Cascading Style Sheets，级联样式表）是一种描述 HTML/XML/SVG 文档呈现方式的声明式样式语言。它是开放 Web 三大核心技术之一（HTML 结构 + CSS 表现 + JS 行为），由 W3C CSS 工作组制定规范。自 CSS2.1 之后，CSS 不再有统一版本号，而是拆分为独立模块各自演进（如 Selectors Level 4、Color Level 5、Grid Level 2 等），通过年度 CSS Snapshot 记录各模块成熟度。

图 1: CSS 系统全景——三个维度

5.1 概述

CSS 的设计哲学是关注点分离：内容（HTML）与表现（CSS）解耦。其核心机制围绕三个关键词展开：

机制	含义	关键概念
Cascade（层叠）	多来源样式冲突时的裁决规则	来源、特异性、书写顺序、!important、@layer
Inheritance（继承）	某些属性自动从父元素传递	inherit / initial / unset / revert
Specificity（特异性）	选择器优先级的量化指标	ID > Class > Type (0,0,0 三元组)

关键认知：CSS 不是"CSS3"也不是"CSS4"——CSS2.1 之后规范按模块独立演进。目前 CSS 包含 70+ 活跃模块，每个模块有独立版本号（Level 1~6）。W3C 每年发布 CSS Snapshot 记录所有模块状态。

5.2 行为分析（系统做什么）

5.2.1 用例图：CSS 系统的参与者与功能

CSS 系统有多个参与者：设计师编写样式、开发者维护工具链、浏览器引擎解析渲染、最终用户阅读页面。

图 2.1: CSS 系统用例图

5.2.2 活动图：CSS 渲染流水线

浏览器将 CSS 文本转换为屏幕像素的完整流水线：解析 CSS → 构建 CSSOM → 合并 Render Tree → Layout → Paint → Composite。每一步都可能成为性能瓶颈。

图 2.2: CSS 渲染流水线活动图

5.2.3 活动图：层叠优先级判定

多条 CSS 规则命中同一元素时，浏览器按什么顺序裁决最终生效值？这是 CSS 的"C"——Cascade 的核心流程。

图 2.3: 层叠优先级判定活动图

5.2.4 活动图：选择器匹配流程

浏览器如何为 DOM 中的每个元素找到匹配的 CSS 规则？注意浏览器是从右向左匹配的，以快速排除不匹配元素。

图 2.4: 选择器匹配活动图

5.2.5 活动图：布局计算流程

当 Render Tree 构建完成后，浏览器计算每个元素的几何位置和尺寸——这就是 Layout（布局/回流）阶段。

图 2.5: 布局计算活动图

5.2.6 序列图：动画与过渡时序

CSS 动画和过渡的触发、帧计算、合成渲染的完整时序。

图 2.6: CSS 动画/过渡时序图

5.3 结构分析（系统由什么组成）

5.3.1 包图：CSS 规范模块组织

CSS 规范按功能领域拆分为独立模块，各自有独立 Level 版本号。以下是主要模块的组织结构。

图 3.1: CSS 规范模块包图

5.3.2 组件图：浏览器渲染引擎中的 CSS 子系统

CSS 引擎在浏览器渲染引擎（Blink/WebKit/Gecko）中的组件架构。

图 3.2: 浏览器渲染引擎 CSS 子系统组件图

5.3.3 类图：CSSOM 核心对象模型

CSS Object Model（CSSOM）是 JS 操作样式的 API 层，是 CSS 在内存中的对象表示。

图 3.3: CSSOM 核心类图

5.3.4 结构图：CSS 盒模型

每个元素在 CSS 中都是一个矩形盒子，由 content → padding → border → margin 四层嵌套组成。

图 3.4: CSS 盒模型结构图

5.3.5 部署图：不同媒介的渲染上下文

CSS 不仅服务于屏幕浏览器，还覆盖打印、语音、电子纸等多种媒介。

图 3.5: CSS 渲染上下文部署图

5.4 层叠机制详解

5.4.1 层叠总览

当多条 CSS 规则命中同一元素时，浏览器按以下 6 层优先级裁决（由低到高）：

1. 用户代理样式（浏览器默认）——如默认的 display: block、margin: 8px
2. 用户样式——用户在浏览器设置中自定义的样式
3. 作者样式中的 @layer——按声明顺序，后声明的层优先级更高
4. 作者样式中的无层级（normal）规则——特异性裁决
5. 作者样式中的 !important——反转常规优先级
6. 用户样式中的 !important / 用户代理 !important——最高优先级（无障碍保障）

5.4.2 特异性计算

特异性记作 (A, B, C) 三元组：

A	ID 选择器数量
B	类选择器、属性选择器、伪类的数量
C	元素选择器、伪元素的数量

比较规则：先比 A，相同时比 B，再相同时比 C。注意 (1,0,0) > (0,999,999)——A 优先于 B 优先于 C。

特殊规则：

• 行内 style 属性 > 所有选择器（相当于 (1,0,0,0)）
• !important 覆盖一切（但层叠顺序反转）
• 通配符 * 和组合器（> + ~ ||）不计入特异性
• :is() / :not() 取参数中最高特异性；:where() 始终为 (0,0,0)

Demo: 特异性对比

/* (0,0,1) */    p        { color: blue; }
/* (0,1,0) */    .intro   { color: green; }
/* (1,0,0) */    #hero    { color: orange; }
/* 结果: #hero 最高优先级 */

(0,0,1) < (0,1,0) < (1,0,0) — 每级之间的差距是无限的

查看源码

/* (0,0,1) → 1 个元素选择器 */
p { color: blue; }

/* (0,1,0) → 1 个类选择器 */
.intro { color: green; }  /* 优先级高于 p */

/* (1,0,0) → 1 个 ID 选择器 */
#hero { color: orange; }  /* 优先级高于 .intro */

5.4.3 继承机制

CSS 属性分为两类：

• 可继承属性（大多数排版属性）：color、font-*、text-*、line-height、visibility、cursor 等
• 不可继承属性（大多数盒模型属性）：margin、padding、border、width、height、display、position 等

四个通用关键字控制继承：inherit（强制继承）、initial（重置为初始值）、unset（可继承属性和 inherit 相同，不可继承属性和 initial 相同）、revert（回退到上一层来源的值）。

5.4.4 属性值处理流程

一个属性的最终值经历了 6 个阶段的转换：

1. 声明值（Declared Value）——样式表中写了什么（可能多条声明命中同一元素）
2. 层叠值（Cascaded Value）——层叠裁决后的赢家（含 !important 和 @layer）
3. 指定值（Specified Value）——若无层叠值则取继承值或初始值
4. 计算值（Computed Value）——相对单位（em、%）解析为绝对但不依赖于布局的值
5. 使用值（Used Value）——布局计算后的最终值（如 width: auto 计算为具体像素）
6. 实际值（Actual Value）——受限于设备精度（如浮点像素取整）

5.4.5 @layer 级联层

CSS Cascade Level 5 引入 @layer 规则，允许开发者显式分层管理样式优先级：

/* 声明层顺序——越后声明优先级越高 */
@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer base {
  h1 { font-size: 2rem; }
}

@layer components {
  .card { border: 1px solid #ddd; }
}

@layer utilities {
  .mt-4 { margin-top: 1rem; }  /* 优先级高于 reset/base/components */
}

Demo: @layer 层叠验证

后声明的 high 层覆盖了 low 层 (即使 high 声明在文件中位置靠后)

查看源码

@layer low  { .box { background: #fdd; } }
@layer high { .box { background: #d4edda; } }
/* 虽然 low 在前 high 在后，但 @layer 声明顺序决定了优先级 */

5.5 布局系统

5.5.1 格式化上下文

CSS 布局的基础是格式化上下文——一个区域内的元素按特定规则排列。主要有以下类型：

上下文类型	触发方式	作用
BFC（块级格式化上下文）	display: flow-root / overflow: hidden / float / position: absolute	独立块布局区域，防止外边距折叠、包含浮动
IFC（行内格式化上下文）	块容器内默认存在	行内级元素在水平方向排列
Flex Formatting Context	display: flex / inline-flex	弹性盒子布局
Grid Formatting Context	display: grid / inline-grid	二维网格布局

5.5.2 常规流布局（Flow Layout）

默认布局方式。块级元素垂直堆叠，行内元素水平排列。核心概念：

• 包含块（Containing Block）：元素尺寸和位置的参考矩形
• 外边距折叠（Margin Collapsing）：相邻块级元素的上下外边距会合并，取最大值
• 浮动（Float）：使元素脱离常规流，向左/右移动，文字环绕
• 清除浮动（Clear）：clear: both 或触发 BFC 来包含浮动元素

5.5.3 Flexbox 弹性布局

CSS Flexible Box Layout（Level 1）提供一维方向的灵活布局。核心模型：

• Flex 容器：display: flex，定义主轴（flex-direction）和交叉轴
• 容器属性：justify-content（主轴对齐）、align-items（交叉轴对齐）、flex-wrap（换行）、gap（间距）
• 项目属性：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（初始大小）、align-self（单独对齐）、order（排序）
• 简写 flex: 1：等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%

5.5.4 Grid 网格布局

CSS Grid Layout（Level 1/2）提供二维网格布局能力，是目前最强的 CSS 布局系统：

• Grid 容器：display: grid，用 grid-template-columns/rows 定义轨道
• 轨道函数：fr（弹性份数）、minmax()、auto-fill / auto-fit、repeat()
• 区域模板：grid-template-areas 用 ASCII 艺术定义布局区域
• 间距：gap / row-gap / column-gap（替代了旧的 grid-gap）
• Grid Level 2：引入 subgrid（子网格继承父网格轨道）
• Grid Level 3：引入 masonry 瀑布流布局

5.5.5 定位布局

CSS Positioned Layout 允许元素脱离常规流进行精确定位：

定位方式	参考系	是否脱离常规流
static（默认）	常规流位置	否
relative	自身原位置	否（保留原位置空间）
absolute	最近的定位祖先（非 static）	是
fixed	视口	是
sticky	滚动容器（滚动到阈值后固定）	否（切换）

核心概念：

• 堆叠上下文（Stacking Context）：由 z-index + position（非 static）创建，或由 opacity < 1、transform、filter 等触发的独立层叠空间
• 包含块：absolute 的包含块是最近的定位祖先的 padding-box；fixed 的包含块是视口

Demo: Flexbox + Grid 布局

Flexbox (一维)

A

B (grow)

C

Grid (二维)

Header (span 2)

Side

Main

Foot

查看源码

/* Flexbox */
.flex { display: flex; gap: 8px; }
.flex .item:nth-child(2) { flex-grow: 1; }

/* Grid */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid .header { grid-column: 1 / 3; }  /* 跨两列 */

5.6 动画系统

CSS 提供三层动画能力，从简单到复杂：

机制	触发方式	控制力	典型场景
Transition（过渡）	属性值变化时自动触发（如 :hover）	简单（from → to）	按钮悬停变色、菜单滑入
Animation（动画）	通过 @keyframes 定义，可自动播放	复杂（多关键帧、循环、反向）	加载动画、无限循环动效
Scroll-driven Animations	滚动位置驱动时间线	与滚动绑定	滚动视差、进度指示器

关键性能原则：只动画 transform 和 opacity——它们只触发 Composite 阶段，不走 Layout/Paint，可保持 60fps。使用 will-change 提前提示浏览器创建合成层。

动画性能分级：
- 最便宜（仅 Composite）：transform、opacity
- 中等（Paint + Composite）：color、background、box-shadow
- 最贵（Layout + Paint + Composite）：width、height、top、left、margin

Demo: Transition + Animation

Hover 查看 Transition

悬停我

@keyframes 自动播放

查看源码

/* Transition */
.btn { transition: all 0.3s; }
.btn:hover { background: #e34f26; transform: translateY(-2px); }

/* Animation */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}
.dot { animation: pulse 1.5s ease-in-out infinite; }

5.7 选择器系统

选择器是 CSS 的寻址系统，决定样式应用到哪些元素。按规范演进分为多个 Level：

Level	新增功能	状态
Level 3 (REC)	属性选择器、伪类、组合器	全面支持
Level 4 (WD)	:is() :where() :has() :not() 复合参数、:focus-visible、:focus-within、逻辑组合器 ||	主流浏览器已支持
Level 5 (WD)	:state()、:open、:closed、自定义状态	实验阶段

选择器分类：

• 基本选择器：*（通配符）、元素选择器、类选择器、ID 选择器
• 属性选择器：[attr]、[attr=val]、[attr^=]、[attr$=]、[attr*=]、[attr~=]、[attr|=]
• 伪类：状态类（:hover、:focus、:checked）、结构类（:nth-child、:first-of-type）、逻辑类（:is、:where、:not、:has）
• 伪元素：::before、::after、::first-line、::first-letter、::selection、::marker
• 组合器： （后代）、>（子代）、+（相邻兄弟）、~（通用兄弟）

:has() 是"父选择器"：Level 4 引入的 :has() 是革命性的——它可以基于后代元素反向选择父元素，例如 div:has(> img) 选择包含直接子 img 的 div。

Demo: 选择器效果

普通卡片 (无图片)

🖼 图片卡片 — 边框自动加粗

:nth-child 斑马纹

• 第 1 行
• 第 2 行
• 第 3 行
• 第 4 行
• 第 5 行

查看源码

/* :has() — 父选择器 */
.card:has(img) { border-color: #1572b6; border-width: 2px; }

/* :nth-child — 斑马纹 */
li:nth-child(odd) { background: #e8f0fe; }

5.8 响应式设计

CSS 响应式设计的核心工具链：

• 媒体查询（Media Queries）：@media (min-width: 768px) 基于视口宽度、设备特性（hover、pointer、prefers-color-scheme 等）设置断点
• 容器查询（Container Queries）：@container (min-width: 400px) 基于父容器尺寸而非视口，是组件级响应式的革命
• 视口单位：vw / vh / dvh（动态视口高度）/ svh（小视口高度）/ lvh（大视口高度）
• 函数：clamp()（限制值范围）、min()、max()、calc()
• 逻辑属性：margin-inline、padding-block 等书写模式相关属性，天然支持多语言布局

/* 现代响应式组合拳 */
.card {
  width: clamp(300px, 50%, 600px);           /* 限制不超出范围 */
  padding: clamp(1rem, 2vw, 3rem);           /* 自适应内边距 */
  font-size: clamp(1rem, 0.5rem + 1vw, 2rem); /* 流体排版 */
}

Demo: clamp() 流体字号 — 缩放浏览器窗口查看效果

这段文字使用 font-size: clamp(14px, 1.5vw, 24px)， 缩放浏览器宽度可以看到字号平滑变化，但不会超出 14px~24px 范围。

查看源码

.fluid-text {
  font-size: clamp(14px, 1.5vw, 24px);
  /* 最小14px，理想1.5%视口宽度，最大24px */
}

5.9 性能与优化

CSS 性能影响页面渲染的三个阶段：

阶段	触发条件	优化策略
Layout（回流）	改几何属性：width/height/top/left/font-size/display/position	批量修改（用 requestAnimationFrame 或 documentFragment）；用 transform 替代 top/left
Paint（重绘）	改非几何属性：color/background/border/box-shadow/outline	减少绘制区域；用 contain: paint 限制绘制范围
Composite（合成）	改 transform/opacity	用 will-change 提升为合成层；避免过多层（层爆炸）

关键改进：

• CSS Containment：contain: layout style paint size 隔离子树，告诉浏览器该元素内部变化不影响外部，跳过不必要的全局计算。等效于 content-visibility: auto（跳过屏幕外元素的渲染）
• 选择器性能：浏览器从右向左匹配选择器，最右边的选择器应尽可能精确；避免深层嵌套选择器
• 关键 CSS 内联：将首屏关键 CSS 内联到 <head>，延迟加载非关键 CSS
• @import 避免：@import 是串行加载的阻塞资源，用多个 <link> 替代

Demo: content-visibility 对比

性能优化代码示例

/* 跳过屏幕外元素渲染，减少初始 Layout/Paint 开销 */
.off-screen-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;  /* 占位高度，防止滚动条跳动 */
}

/* 将动画元素提升为独立合成层 */
.animated {
  will-change: transform;
  transform: translateZ(0);  /* 强制 GPU 合成 */
}

/* 隔离子树，告诉浏览器该区域独立 */
.widget {
  contain: layout style paint;
}

5.10 生态工具链

CSS 周边工具链覆盖开发、构建、运行时的完整流程：

类别	工具	作用
预处理器	Sass/SCSS, Less, Stylus	变量、嵌套、Mixin、函数——编译为普通 CSS
后处理器	PostCSS + Autoprefixer	插件化 CSS 转换（自动加厂商前缀、未来语法转译）
CSS 框架	Tailwind CSS, Bootstrap, Bulma	预设 utility class / 预置组件样式（样式层，非完整组件）
CSS-in-JS	styled-components, Emotion, CSS Modules	组件作用域样式（React/Vue 生态常用）
构建工具	Vite, webpack (css-loader/style-loader)	CSS 模块打包、压缩、Tree Shaking
优化工具	PurgeCSS, cssnano, Lightning CSS	移除未使用 CSS、压缩、极速转译
Linting	Stylelint	CSS 代码规范检查
设计系统	CSS 自定义属性（--*）	原生变量体系，运行时动态切换主题

/* CSS 自定义属性——原生变量体系 */
:root {
  --color-primary: #2563eb;
  --spacing-unit: 0.25rem;
}

.btn {
  background: var(--color-primary);
  padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 8);
}
/* 暗色模式只需覆盖变量 */
[data-theme="dark"] {
  --color-primary: #60a5fa;
}

Demo: CSS 自定义属性 + 主题切换

主题演示区域

背景和文字颜色由 --demo-bg / --demo-fg 控制

切换暗色模式

查看源码

.box {
  background: var(--demo-bg, #f0f2f5);
  color: var(--demo-fg, #212529);
}
.box.dark { --demo-bg: #1a1a2e; --demo-fg: #e0e0e0; }
/* 切换类名即可换主题，无需重写所有属性 */

5.11 参考来源

• MDN: CSS 文档
• W3C CSS Working Group
• CSS Snapshot 2026
• CSS Editor's Drafts
• web.dev: Learn CSS

第五部分：JavaScript 系统深入

6.1 语言定位

6.2 版本历史

6.3 生态全景

6.4 行为图（系统做什么）

6.4.1 用例图 — 开发者与语言的交互全景

图 1.1.1：JavaScript 用例图 — 开发者视角

6.4.2 活动图 — 源码到可执行代码的解析流水线

图 1.2.1：活动图 — JavaScript 源码解析执行流程

闭包 & 作用域 Demo

function createCounter(initial = 0) {
  let count = initial;          // 私有变量，外部不可直接访问
  return {
    increment: () => ++count,
    decrement: () => --count,
    getValue: () => count,
  };
}

const c = createCounter(10);
console.log(c.increment()); // 11
console.log(c.increment()); // 12
console.log(c.decrement()); // 11
console.log(c.getValue());  // 11
// console.log(c.count);    // undefined — count 被闭包保护

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

function throttle(fn, interval) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

const onResize = debounce(() => console.log('resized'), 300);
window.addEventListener('resize', onResize);

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 输出: 3, 3, 3 — var 没有块级作用域

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 输出: 0, 1, 2 — let 每次迭代绑定新变量

6.4.3 活动图 — 事件循环（Event Loop）

图 1.3.1：活动图 — 浏览器 & Node.js 事件循环

事件循环可视化 Demo

console.log('1. 同步代码开始');

setTimeout(() => console.log('5. setTimeout 宏任务'), 0);

Promise.resolve()
  .then(() => console.log('3. Promise.then 微任务'))
  .then(() => console.log('4. Promise.then 链式微任务'));

queueMicrotask(() => console.log('2. queueMicrotask 微任务'));

console.log('6. 同步代码结束');

// 输出顺序: 1 → 6 → 2 → 3 → 4 → 5
// 原因: 同步 > 所有微任务 > 一个宏任务 > 重复

console.log('start');

setTimeout(() => {
  console.log('macro 1');
  Promise.resolve().then(() => console.log('micro inside macro'));
}, 0);

Promise.resolve().then(() => {
  console.log('micro 1');
  setTimeout(() => console.log('macro inside micro'), 0);
});

console.log('end');

// 输出: start → end → micro 1 → macro 1 → micro inside macro → macro inside micro

6.4.4 时序图 — V8 JIT 编译流水线

图 1.4.1：时序图 — V8 引擎从冷启动到优化编译的全过程

6.4.5 时序图 — 垃圾回收流程

图 1.5.1：时序图 — V8 Orinoco GC（并发标记 + 并行压缩）

6.4.6 状态机图 — Promise 生命周期

图 1.6.1：状态机图 — Promise/A+ 三态转换模型

Promise / async-await Demo

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) resolve({ id, name: 'User' + id });
      else reject(new Error('Invalid id'));
    }, 100);
  });
}

// 链式调用
fetchUser(1)
  .then(user => {
    console.log(user.name);        // User1
    return fetchUser(2);
  })
  .then(user => console.log(user.name))
  .catch(err => console.error(err))
  .finally(() => console.log('请求结束'));

// 静态方法
Promise.all([fetchUser(1), fetchUser(2)])
  .then(([u1, u2]) => console.log(u1, u2))
  .catch(err => console.error('任一失败则整体 reject', err));

Promise.allSettled([fetchUser(1), fetchUser(-1)])
  .then(results => results.forEach(r => console.log(r.status)));
  // { status: 'fulfilled', value: { id:1, name:'User1' } }
  // { status: 'rejected',  reason: Error('Invalid id') }

Promise.race([fetchUser(1), fetchUser(2)]).then(console.log); // 取最快
Promise.any([fetchUser(-1), fetchUser(2)]).then(console.log); // 取第一个 fulfilled

async function loadUsers() {
  try {
    const u1 = await fetchUser(1);    // 等待，像同步写法
    const u2 = await fetchUser(2);    // 串行：总耗时 200ms
    return [u1, u2];
  } catch (err) {
    console.error('加载失败', err);
    return [];
  }
}

// 并发 vs 串行
async function loadParallel() {
  const [u1, u2] = await Promise.all([
    fetchUser(1),
    fetchUser(2)
  ]);                                   // 并发：总耗时 100ms
  return [u1, u2];
}

// 顶层 await (ESM 模块中可用)
// const data = await fetch('/api/data');

6.5 结构图（系统由什么组成）

6.5.1 组件图 — 运行环境整体架构

图 2.1.1：组件图 — 浏览器中 JavaScript 与宿主环境的交互

6.5.2 包图 — ECMAScript 规范模块划分

图 2.2.1：包图 — ECMA-262 规范的核心模块组织结构

6.5.3 类图 — V8 引擎核心对象模型

图 2.3.1：类图 — V8 引擎内部核心类型与编译管线

6.5.4 类图 — 原型链体系

图 2.4.1：类图 — JavaScript 对象原型链全景

原型链 & 继承 Demo

const arr = [1, 2, 3];
console.log(arr.__proto__ === Array.prototype);           // true
console.log(Array.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__);                     // null

// arr → Array.prototype → Object.prototype → null

const fn = () => {};
console.log(fn.__proto__ === Function.prototype);            // true
console.log(Function.prototype.__proto__ === Object.prototype); // true
// fn → Function.prototype → Object.prototype → null

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  return `${this.name} makes a sound`;
};

function Dog(name, breed) {
  Animal.call(this, name);     // 继承属性
  this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);  // 继承方法
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  return `${this.name} barks!`;
};

const d = new Dog('旺财', '金毛');
console.log(d.speak());   // "旺财 makes a sound"
console.log(d.bark());    // "旺财 barks!"
console.log(d instanceof Dog);    // true
console.log(d instanceof Animal); // true

// ES6 class 语法糖
class Animal2 {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}
class Dog2 extends Animal2 {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  bark() { return `${this.name} barks!`; }
}
// 底层仍然是原型链: Dog2.prototype → Animal2.prototype → Object.prototype → null

6.5.5 部署图 — 多运行时部署拓扑

图 2.5.1：部署图 — Browser / Node.js / Deno / Cloudflare Workers 运行时拓扑

6.6 核心语法速查

6.6.1 数据类型速查

typeof 42                // "number"
typeof 'hello'           // "string"
typeof undefined         // "undefined"
typeof null              // "object" — 历史 Bug!
typeof function(){}      // "function"
typeof []                // "object"

Array.isArray([])        // true — 推荐
Object.prototype.toString.call([])    // "[object Array]"
Object.prototype.toString.call(null)  // "[object Null]"

// 判断 null
val === null

// 判断 NaN (NaN ≠ NaN)
Number.isNaN(NaN)        // true
isNaN('hello')           // true (先转数字)
Number.isNaN('hello')    // false (不转换)

6.6.2 运算符速查

0 == false    // true
0 === false   // false
'' == false   // true
'' === false  // false
null == undefined   // true — 特殊规则
null === undefined  // false
NaN == NaN          // false — 唯一不自等的值
[1,2] == '1,2'     // true — 数组先转字符串

0 || 'default'    // 'default' — 0 被当作 falsy
0 ?? 'default'    // 0 — 只有 null/undefined 触发

'' || 'default'   // 'default'
'' ?? 'default'   // ''

false || true     // true
false ?? true     // false

6.6.3 Array 方法速查

const nums = [1, 2, 3, 4, 5];

nums.filter(n => n > 2).map(n => n * 2);  // [6, 8, 10]
nums.reduce((sum, n) => sum + n, 0);       // 15
nums.flatMap(n => [n, n * 2]);             // [1,2, 2,4, 3,6, 4,8, 5,10]

// 去重
[...new Set([1,1,2,2,3])];                // [1, 2, 3]

// 排序数字 (默认按字符串排序!)
[10, 2, 1].sort();                         // [1, 10, 2]  - 错!
[10, 2, 1].sort((a,b) => a - b);          // [1, 2, 10]  - 对

6.6.4 String 方法速查

const name = 'World';
const greeting = `Hello ${name}! Backtick \` and ${2 + 3}`;
// "Hello World! Backtick ` and 5"

const multiline = `第1行
第2行`;  // 保留换行

function tag(strings, ...values) {
  return strings.reduce((r,s,i) => r + s + (values[i]?.toUpperCase() || ''), '');
}
tag`hello ${'world'}`;  // "hello WORLD"

6.6.5 Object 方法速查

// 浅拷贝 (3 种方式)
const copy  = { ...obj };
const copy2 = Object.assign({}, obj);
const copy3 = structuredClone(obj);  // 深拷贝! (ES2021, 支持循环引用)

// Map ↔ Object 互转
const m = new Map([['a', 1], ['b', 2]]);
const o = Object.fromEntries(m);        // { a: 1, b: 2 }
const m2 = new Map(Object.entries(o));  // Map(2) { 'a' => 1, 'b' => 2 }

// 属性描述符
Object.defineProperty(obj, 'fullName', {
  get() { return `${this.first} ${this.last}`; },
  set(v) { [this.first, this.last] = v.split(' '); },
  enumerable: true,
});

// 解构 + 默认值 + 重命名
const { name: userName = 'anonymous', age = 0 } = user;
const [first, second, ...rest] = array;

6.6.6 异步模式速查

// 延时
const sleep = ms => new Promise(r => setTimeout(r, ms));

// 超时
const withTimeout = (promise, ms) =>
  Promise.race([promise, sleep(ms).then(() => { throw new Error('Timeout'); })]);

// 重试
async function retry(fn, times = 3, delay = 1000) {
  for (let i = 0; i < times; i++) {
    try { return await fn(); }
    catch (err) {
      if (i === times - 1) throw err;
      await sleep(delay * (i + 1));  // 指数退避
    }
  }
}

// 并发限制 (最多同时 N 个)
async function concurrentLimit(tasks, limit = 3) {
  const results = [], executing = [];
  for (const task of tasks) {
    const p = Promise.resolve().then(() => task()).then(r => results.push(r));
    executing.push(p);
    if (executing.length >= limit) {
      await Promise.race(executing);
      executing.splice(executing.findIndex(e => e === p), 1);
    }
  }
  await Promise.all(executing);
  return results;
}

6.6.7 模块化速查

方式	导出	导入
ESM (ES2015+)	export const x = 1; export default fn; export { a, b as c };	import { x } from './m.js'; import fn from './m.js'; import * as M from './m.js'; const m = await import('./m.js'); (动态导入)
CJS (Node.js 传统)	module.exports = fn; exports.x = 1;	const fn = require('./m'); const { x } = require('./m');

典型导出模式

// math.js — ESM 命名导出 (推荐)
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }
export const PI = 3.14159;

// app.js — 导入
import { add, sub, PI } from './math.js';
import * as math from './math.js';   // math.add(1, 2)

// config.js — 默认导出 (一个模块一个)
export default { apiUrl: '/api', debug: true };
import config from './config.js';

// re-export (聚合模块)
export { add, sub } from './math.js';
export { default as config } from './config.js';
export * from './math.js';            // 全部再导出

6.6.7.1 文件扩展名与模块类型判断

Node.js 通过文件扩展名和 package.json 的 "type" 字段决定 JS 文件按哪种模块系统处理：

Node.js 模块类型判断流程图

扩展名	模块类型	说明
.mjs	ESM	明确标识为 ES Module，始终使用 import/export 语法
.cjs	CommonJS	明确标识为 CommonJS，始终使用 require/module.exports
.js	取决于 package.json	若最近 package.json 有 "type": "module" → ESM；否则 → CJS（默认）

package.json 配置

// package.json — 设置项目默认模块类型
{
  "type": "module"   // .js 文件默认按 ESM 处理
}
// 或
{
  "type": "commonjs" // .js 文件默认按 CJS 处理（默认值，可省略）
}

典型互操作

// ESM 中导入 CJS (.cjs 或 .js 被识别为 CJS 的项目)
import foo from './legacy.cjs';       // 默认导入 (module.exports)
import { named } from './legacy.cjs'; // 命名导入可能不支持
import * as mod from './legacy.cjs';  // 命名空间导入 (推荐)
const mod = await import('./legacy.cjs'); // 动态导入

// CJS 中导入 ESM (.mjs 或 .js 被识别为 ESM 的项目)
// 只能用动态 import()，不能用 require()
const esmModule = await import('./esm-module.mjs');
// const esm = require('./esm-module.mjs');  // ❌ 报错: ERR_REQUIRE_ESM

6.6.8 常见坑 & 最佳实践

// 1. 始终用 const/let，永远不用 var
// 2. === 代替 ==，除非明确需要类型转换
// 3. 使用可选链 ?. 和空值合并 ?? 安全访问
// 4. 箭头函数用于回调; 普通函数/full function 声明用于方法
// 5. 异步操作用 async/await，避免回调地狱
// 6. try/catch 包裹 await，不要让 unhandled rejection 逃逸
// 7. 解构赋值提高可读性
// 8. 模板字面量代替 + 拼接
// 9. for...of 遍历数组，for...in 只用于对象（且加 hasOwnProperty）
// 10. 启用严格模式: 文件开头 'use strict'; 或 ESM 自动严格

6.7 前端开发速查

6.7.1 DOM 操作速查

el.parentElement        // 父元素
el.children             // 子元素 HTMLCollection
el.firstElementChild    // 第一个子元素
el.lastElementChild
el.previousElementSibling / nextElementSibling
el.closest('.container') // 向上查找最近的匹配祖先

// Fragment — 减少回流
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
ul.appendChild(fragment);  // 一次性插入，只触发一次回流

6.7.2 事件处理速查

// 鼠标: click, dblclick, mousedown, mouseup, mousemove, mouseenter, mouseleave
// 键盘: keydown, keyup, keypress (已废弃)
// 表单: submit, change, input, focus, blur
// 文档: DOMContentLoaded, load, beforeunload
// 视口: scroll, resize
// 触摸: touchstart, touchmove, touchend

// 在父容器监听，避免给每个子元素都绑事件
document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    console.log('clicked:', e.target.textContent);
  }
  // 更精确: e.target.closest('.item')
});

6.7.3 Fetch / 网络请求速查

async function getData(url) {
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error('fetch failed:', err);
    throw err;
  }
}

async function fetchWithRetry(url, options = {}, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const res = await fetch(url, options);
      if (res.ok) return await res.json();
      if (res.status >= 500 && i < retries - 1) continue; // 服务端错误重试
      throw new Error(`HTTP ${res.status}`);
    } catch (err) {
      if (i === retries - 1) throw err;
      await new Promise(r => setTimeout(r, 1000 * (i + 1)));
    }
  }
}

6.7.4 浏览器存储速查

// localStorage (同步，只能存字符串)
localStorage.setItem('key', JSON.stringify(obj));
const data = JSON.parse(localStorage.getItem('key'));
localStorage.removeItem('key');

// sessionStorage API 相同
sessionStorage.setItem('token', 'abc123');

// cookie 操作
document.cookie = 'name=value; max-age=3600; path=/; SameSite=Lax';
// 读取: document.cookie 返回所有 cookie 字符串

// IndexedDB 简单封装
function openDB(name, version = 1) {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open(name, version);
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
    req.onupgradeneeded = (e) => {
      e.target.result.createObjectStore('store', { keyPath: 'id' });
    };
  });
}

6.7.5 定时器 & 动画速查

function animate() {
  // 更新动画状态
  el.style.transform = `translateX(${x}px)`;
  x += 2;
  if (x < 300) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

// 坏: 如果 fn 执行时间 > 间隔，会堆积回调
setInterval(fn, 100);

// 好: 用 setTimeout 递归模拟精确间隔
function safeInterval(fn, ms) {
  let stopped = false;
  async function loop() {
    if (stopped) return;
    const start = Date.now();
    await fn();
    const elapsed = Date.now() - start;
    setTimeout(loop, Math.max(0, ms - elapsed));
  }
  setTimeout(loop, ms);
  return () => { stopped = true; };  // 返回停止函数
}

6.7.6 BOM (浏览器对象模型) 速查

// 切换到 /page2，不刷新页面
history.pushState({ page: 2 }, '', '/page2');

// 监听浏览器前进/后退
window.addEventListener('popstate', (e) => {
  console.log('location changed to:', location.pathname);
  console.log('state:', e.state);  // { page: 2 }
});

// URL 解析
const url = new URL('https://example.com/page?a=1&b=2#section');
url.searchParams.get('a');          // '1'
url.searchParams.set('c', '3');     // 修改参数
url.searchParams.toString();        // 'a=1&b=2&c=3'
url.hash;                           // '#section'

6.8 TC39 提案流程

6.9 参考资源

第六部分：TypeScript 系统

TypeScript 是微软开发的静态类型、强类型编程语言，构建于 JavaScript 之上，由 Anders Hejlsberg（C# 之父）主导设计，2012 年首次发布。

TypeScript 是 JavaScript 的超集：所有合法的 JS 代码都是合法的 TS 代码。TypeScript 编译器将 TS 代码编译为纯 JavaScript，且类型注解在编译后被完全擦除，不影响运行时行为。其类型系统为结构化类型系统（Structural Type System），即"鸭子类型"。

7.1 概述

TypeScript 的设计目标（来自官方 wiki）包括：

• 对 JavaScript 程序的静态类型检查，提供可选的类型系统
• 编译输出符合规范的、可读的 JavaScript
• 兼容现有 JavaScript 库 — 通过声明文件（.d.ts）描述类型
• 不引入运行时开销 — 类型在编译后被擦除，输出纯 JS
• 提供一流的编辑工具支持 — tsserver、Language Service API

TypeScript 7.0 于 2026 年发布，核心编译器正逐步迁移至 Go 语言实现（typescript-go）以实现原生性能。当前 npm 版本（typescript 包）仍为 TypeScript 实现。

7.2 行为图

7.2.1 用例图 — 使用场景

图 1：TypeScript 系统用例图

7.2.2 活动图 — 编译流程

图 2：TypeScript 编译管线活动图

7.2.3 时序图 — 编辑器交互（tsserver）

图 3：IDE / 编辑器通过 tsserver 获取语言服务

7.2.4 时序图 — 类型检查与推断

图 4：Checker 类型检查与推断核心流程

7.3 结构图

7.3.1 组件图 — 编译器架构

图 5：TypeScript 编译器整体架构组件图

7.3.2 包图 — 核心模块组织

图 6：TypeScript 编译器核心模块依赖关系

7.3.3 类图 — 类型系统层次

图 7：TypeScript 类型系统层次类图

7.4 使用手册

7.4.1 安装与配置

# 全局安装编译器
npm install -g typescript

# 项目本地安装
npm install -D typescript

# 初始化 tsconfig.json
tsc --init

# 编译
tsc                    # 使用 tsconfig.json
tsc src/index.ts      # 编译单个文件
tsc --watch           # 监视模式

核心编译选项：

{
  "compilerOptions": {
    "target": "ES2022",        // 输出 JS 版本
    "module": "NodeNext",      // 模块系统
    "strict": true,            // 严格模式（推荐）
    "outDir": "./dist",        // 输出目录
    "rootDir": "./src",        // 源码根目录
    "declaration": true,       // 生成 .d.ts
    "sourceMap": true,         // 生成 source map
    "esModuleInterop": true,   // CJS/ESM 互操作
    "skipLibCheck": true       // 跳过声明文件类型检查
  }
}

7.4.2 基础类型

// 基本类型注解
let isDone: boolean = false;
let count: number = 42;
let name: string = "TypeScript";
let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["hello", 10];

// 联合类型
type Status = "idle" | "loading" | "success" | "error";

// 枚举
enum Color { Red, Green, Blue }
enum Direction { Up = "UP", Down = "DOWN" }

// 特殊类型
let notSure: unknown = 4;   // 安全版的 any
let unusable: void = undefined;
function error(): never { throw new Error(); }

// 类型推断（自动推导类型）
let msg = "hello";  // msg: string

7.4.3 接口与类型别名

// Interface（首选，支持声明合并）
interface User {
  readonly id: number;
  name: string;
  email?: string;           // 可选属性
  [key: string]: unknown;   // 索引签名
}

// Type Alias（需要联合/交叉/元组等特性时使用）
type Point = { x: number; y: number };
type ID = string | number;
type PartialUser = Partial<User>;

// 接口继承
interface Admin extends User {
  role: "admin" | "superadmin";
  permissions: string[];
}

// 交叉类型
type ColoredPoint = Point & { color: string };

7.4.4 函数类型

// 函数声明
function add(a: number, b: number): number {
  return a + b;
}

// 函数类型表达式
type MathFn = (x: number, y: number) => number;
const multiply: MathFn = (x, y) => x * y;

// 可选参数与默认值
function greet(name: string, greeting?: string): string {
  return `${greeting || "Hello"}, ${name}`;
}

// 剩余参数
function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
}

// 函数重载
function makeDate(timestamp: number): Date;
function makeDate(y: number, m: number, d: number): Date;
function makeDate(yOrTimestamp: number, m?: number, d?: number): Date {
  if (m !== undefined && d !== undefined) {
    return new Date(yOrTimestamp, m, d);
  }
  return new Date(yOrTimestamp);
}

// 泛型函数
function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

7.4.5 泛型

// 泛型接口
interface Repository<T> {
  getById(id: string): T;
  getAll(): T[];
  create(item: Omit<T, "id">): T;
}

// 泛型约束（extends）
interface HasLength { length: number; }
function logLength<T extends HasLength>(arg: T): T {
  console.log(arg.length);
  return arg;
}

// keyof + 泛型约束
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

// 泛型默认值
function create<T = string>(value?: T): T[] {
  return value ? [value] : [];
}

// 条件类型 + infer
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
type UnpackPromise<T> = T extends Promise<infer U> ? U : T;

7.4.6 高级类型操作

// 映射类型
type Readonly<T> = { readonly [P in keyof T]: T[P] };
type Optional<T> = { [P in keyof T]?: T[P] };

// 条件类型
type IsString<T> = T extends string ? true : false;
type NonNullable<T> = T extends null | undefined ? never : T;

// 模板字面量类型
type EventName<T extends string> = `on${Capitalize<T>}`;
type MouseEvents = EventName<"click" | "hover" | "drag">;
// "onClick" | "onHover" | "onDrag"

// 常用内置 Utility Types
type Todo = { title: string; desc: string; done: boolean };

type PartialTodo = Partial<Todo>;        // 全部可选
type RequiredTodo = Required<Todo>;      // 全部必填
type ReadonlyTodo = Readonly<Todo>;      // 全部只读
type Picked = Pick<Todo, "title" | "done">;  // 选取
type Omitted = Omit<Todo, "desc">;       // 排除
type FromUnion = Extract<"a"|"b"|"c", "a"|"c">;  // "a"|"c"
type Excluded = Exclude<"a"|"b"|"c", "a">;        // "b"|"c"
type Params = Parameters<typeof add>;     // 参数元组类型

7.4.7 模块系统

// ES Module（推荐）
export interface Config { debug: boolean }
export const VERSION = "1.0";
export default class App {}

import App, { Config, VERSION } from "./app";

// CommonJS 互操作
import fs = require("fs");       // CJS 导入
export = myLib;                  // CJS 导出

// 动态导入（返回 Promise）
const module = await import("./dynamic-module");

// 类型导入（仅编译时，不产生运行时导入）
import type { User } from "./types";
import { type User, createUser } from "./user";

7.4.8 声明文件

// .d.ts — 为 JS 库提供类型描述
declare module "my-lib" {
  export function doSomething(x: number): string;
  export const version: string;
}

// 全局声明
declare const APP_VERSION: string;
declare function initialize(config: Config): void;

// 扩展已有模块的类型（Declaration Merging）
interface String {
  customMethod(): void;
}

// 扩展第三方模块
declare module "express" {
  interface Request {
    user?: User;
  }
}

7.4.9 tsconfig 核心配置

{
  "compilerOptions": {
    /* 严格模式（推荐全部开启） */
    "strict": true,              // 开启所有严格检查
    "noImplicitAny": true,       // 禁止隐式 any
    "strictNullChecks": true,    // null/undefined 严格检查
    "strictFunctionTypes": true, // 函数类型严格逆变
    "noUnusedLocals": true,      // 禁止未使用的局部变量
    "noUnusedParameters": true,  // 禁止未使用的参数
    "exactOptionalPropertyTypes": true, // 精确可选属性

    /* 模块解析 */
    "moduleResolution": "bundler", // bundler/node16/nodenext
    "baseUrl": ".",              // 非相对模块导入基准
    "paths": { "@/*": ["./src/*"] }, // 路径别名

    /* 输出控制 */
    "noEmit": true,              // 仅类型检查，不产生输出
    "noEmitOnError": true,       // 类型错误时不产生输出
    "declarationMap": true,      // 声明文件 source map

    /* 其他 */
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,   // 允许导入 JSON
    "isolatedModules": true      // 确保单文件编译安全
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"],
  "references": [                // 项目引用（monorepo）
    { "path": "./packages/core" },
    { "path": "./packages/utils" }
  ]
}

7.4.10 工具链

Vue.js 生态系统系统拆解

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。Vue 3 由三大核心子系统组成：响应式系统（基于 Proxy 的依赖追踪）、编译器（模板→渲染函数）和渲染器（VDOM diff/patch）。生态包含 Vue Router（路由）、Pinia（状态管理）、Vite（构建工具）等。

1. 系统概览

1.1 渲染管线总览

模板 → 编译 → 渲染函数 → VNode 树 → 挂载 → 真实 DOM
                       ↑                           │
                       └── 补丁（diff + 更新） ←── 响应式效应触发

1.2 技术栈一览

2. 行为图

先梳理 Vue.js 系统"做什么"——从整体用例到关键动态流程。

2.1 用例图

从开发者视角描述 Vue.js 生态提供的核心功能：创建应用、构建组件、配置路由、管理状态、构建部署。

图 2.1：Vue.js 生态系统用例图

2.2 活动图 — 渲染管线

描述从写模板到浏览器 DOM 更新的完整渲染流程。带泳道区分编译时和运行时两个阶段。

图 2.2：Vue 渲染管线活动图（编译时 vs 运行时）

2.3 状态机图 — 组件生命周期

Vue 组件从创建、挂载、更新到卸载的完整生命周期状态迁移。

图 2.3：Vue 组件生命周期状态机

2.4 序列图 — 响应式更新链路

当开发者修改 ref 值后，从依赖追踪到 VDOM diff 再到 DOM 更新的完整时序。

图 2.4：响应式状态变更 → DOM 更新序列图

3. 结构图

从宏观架构到内部细节，逐步拆解 Vue.js 系统的静态组成。

3.1 组件图 — 生态全景

展示 Vue.js 生态系统各组件之间的依赖和接口关系。

图 3.1：Vue.js 生态系统组件图

3.2 包图 — 核心包结构

Vue 3 core 内部的模块划分及依赖关系。

图 3.2：Vue 3 Core 包图

3.3 类图 — 核心 API

响应式系统、组件系统和路由系统的核心 API 及类型关系。

图 3.3：Vue 核心 API 类图（响应式 / 组件 / 路由）

3.4 部署图

Vue 应用的开发、构建和上线部署拓扑。

图 3.4：Vue 应用开发 → 生产部署拓扑

4. 使用手册

4.1 快速起步：从零到第一个页面

项目初始化

npm create vite@latest my-app -- --template vue-ts
cd my-app
npm install
npm run dev          # 打开 http://localhost:5173

生成的标准目录结构：

my-app/
├── index.html              # Vite 入口（根 div#app）
├── vite.config.ts           # Vite 配置
├── tsconfig.json
├── package.json
└── src/
    ├── main.ts              # 应用入口：createApp(...).mount('#app')
    ├── App.vue              # 根组件
    ├── components/          # 公共组件
    ├── views/               # 页面级组件
    ├── router/              # 路由配置（手动添加）
    ├── stores/              # Pinia store（手动添加）
    ├── api/                 # HTTP 请求封装（手动添加）
    └── assets/              # 静态资源（图片、CSS）

入口文件 src/main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

index.html 唯一要改的地方

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

4.2 核心开发模式

4.2.1 ref vs reactive：什么时候用什么

// ref：模板/script 里统一 .value 访问（模板中自动解包顶层 ref）
const count = ref(0)
const user = ref({ name: 'Brian', role: 'CEO' })

// 读取：count.value  修改：count.value++
// 替换整个对象：user.value = newUser      ✅
// 解构后仍响应：const { name } = toRefs(user.value)   ✅

// reactive：模板中直接用，但限制多
const form = reactive({ username: '', password: '' })
// 不可替换：form = newForm  ❌（断开响应性）
// 不可解构：const { username } = form  ❌（失去响应性）

4.2.2 computed：派生状态自动推导

const items = ref([{ price: 10, qty: 2 }, { price: 30, qty: 1 }])

const total = computed(() =>
  items.value.reduce((sum, i) => sum + i.price * i.qty, 0)
)
// total 是只读 ref，依赖变化时自动重算、有缓存

4.2.3 watch vs watchEffect：何时用哪个

// watch：需要"前后值对比"时用
watch(count, (newVal, oldVal) => {
  if (newVal > 100) alert('超出上限')
})

// watchEffect：不在乎旧值，自动追踪依赖
watchEffect(() => {
  localStorage.setItem('count', String(count.value))
})
// 自动追踪 count.value，立即执行一次，依赖变自动重跑

4.2.4 v-model 双向绑定

<!-- 等价于 :value="text" @input="text = $event.target.value" -->
<input v-model="text" />

<!-- 修饰符：.lazy（change 触发）.number（转数字）.trim -->
<input v-model.lazy.trim="text" />

4.2.5 v-if vs v-show

4.2.6 v-for 必须带 key

<!-- bad: 没有 key，diff 可能错位 -->
<li v-for="item in list">{{ item.name }}</li>

<!-- good: 用唯一 id 做 key，不用 index -->
<li v-for="item in list" :key="item.id">{{ item.name }}</li>

4.3 组件实战：父子通信

场景：父组件 → 子组件（Props）

// ── 子组件 ChildCard.vue ──
<script setup lang="ts">
interface Props {
  title: string
  count?: number          // ? = 可选
}
const props = withDefaults(defineProps<Props>(), {
  count: 0                // 默认值
})
</script>

<template>
  <div class="card">
    <h3>{{ props.title }}</h3>
    <span>{{ props.count }}</span>
  </div>
</template>

// ── 父组件 ──
<ChildCard title="总览" :count="total" />

场景：子组件 → 父组件（Emits）

// ── 子组件 ConfirmDialog.vue ──
<script setup lang="ts">
const emit = defineEmits<{
  confirm: [id: number]
  cancel: []
}>()
</script>

<template>
  <button @click="emit('confirm', 42)">确定</button>
  <button @click="emit('cancel')">取消</button>
</template>

// ── 父组件 ──
<ConfirmDialog @confirm="handleConfirm" @cancel="show = false" />

场景：插槽（Slot）—— 父向子传递模板内容

// ── 子组件 Layout.vue ──
<template>
  <header>
    <slot name="header" />
  </header>
  <main>
    <slot />               <!-- 默认插槽 -->
  </main>
</template>

// ── 父组件 ──
<Layout>
  <template #header>
    <h1>页面标题</h1>
  </template>
  <p>这是主体内容</p>
</Layout>

场景：跨层级传递（provide / inject）

// ── 祖先组件 ──
import { provide, ref } from 'vue'
const theme = ref('light')
provide('theme', theme)                  // 也可 provide readonly(theme)

// ── 深层子组件 ──
import { inject } from 'vue'
const theme = inject('theme')            // 类型自动推导

4.4 路由实战

典型项目结构

src/router/index.ts   # 路由配置
src/views/            # 页面组件（LoginView.vue, HomeView.vue）
src/layouts/          # 布局组件（含 <RouterView />）

路由配置（含懒加载 + 鉴权 + 404）

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('@/layouts/DefaultLayout.vue'),
      children: [
        { path: '', name: 'home', component: () => import('@/views/HomeView.vue') },
        {
          path: 'admin',
          meta: { requiresAuth: true, role: 'admin' },
          component: () => import('@/views/AdminView.vue'),
        },
      ],
    },
    { path: '/login', component: () => import('@/views/LoginView.vue') },
    { path: '/:pathMatch(.*)*', redirect: '/' },  // 404 fallback
  ],
})

// 全局前置守卫：鉴权
router.beforeEach((to) => {
  const token = localStorage.getItem('token')
  if (to.meta.requiresAuth && !token) return '/login'
})

页面中获取路由参数、跳转

import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 读当前路由
console.log(route.path)           // /user/123
console.log(route.params.id)      // 123    (path: '/user/:id')
console.log(route.query.search)   // 'vue'  (?search=vue)

// 跳转
router.push({ name: 'home' })
router.push({ path: '/user/42', query: { tab: 'profile' } })
router.replace('/login')                         // 替换历史记录
router.go(-1)                                    // 后退

4.5 状态管理实战（Pinia）

组合式风格（推荐，写法与组件 setup 一致）

// stores/user.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { apiLogin, apiGetUserInfo } from '@/api/user'

export const useUserStore = defineStore('user', () => {
  const token = ref(localStorage.getItem('token') || '')
  const userInfo = ref(null)
  const isLoggedIn = computed(() => !!token.value)

  async function login(username: string, password: string) {
    const res = await apiLogin({ username, password })
    token.value = res.token
    localStorage.setItem('token', res.token)
  }

  async function fetchUserInfo() {
    userInfo.value = await apiGetUserInfo()
  }

  function logout() {
    token.value = ''
    userInfo.value = null
    localStorage.removeItem('token')
  }

  return { token, userInfo, isLoggedIn, login, fetchUserInfo, logout }
})

组件中使用

import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 读状态
console.log(userStore.isLoggedIn)     // computed，模板中直接 {{ userStore.isLoggedIn }}
// 调 action
await userStore.login('brian', 'xxx')
// 批量修改
userStore.$patch({ token: 'newtoken' })

4.6 逻辑复用：Composable 函数

Composable 是 Vue 3 的代码复用核心机制——把有状态逻辑封装成可复用的函数。组件间共享逻辑，不再是 mixin 的"来源不明"，而是显式 import。

示例：封装鼠标位置追踪

// composables/useMouse.ts
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(e: MouseEvent) {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

// 组件中使用
const { x, y } = useMouse()

示例：封装异步数据请求

// composables/useFetch.ts
import { ref, watchEffect } from 'vue'

export function useFetch<T>(url: string) {
  const data = ref<T | null>(null)
  const loading = ref(false)
  const error = ref<string | null>(null)

  async function execute() {
    loading.value = true; error.value = null
    try {
      data.value = await fetch(url).then(r => r.json())
    } catch (e) {
      error.value = (e as Error).message
    } finally {
      loading.value = false
    }
  }

  execute()
  return { data, loading, error }
}

// 组件中使用
const { data: users, loading, error } = useFetch<User[]>('/api/users')

4.7 常见踩坑与最佳实践

坑 1：reactive 整体替换会断开响应性

const state = reactive({ count: 0 })
state = { count: 1 }   // ❌ 断开了！

// ✅ 方案一：用 ref 替代
const state = ref({ count: 0 })
state.value = { count: 1 }

// ✅ 方案二：用 Object.assign 就地更新
Object.assign(state, { count: 1 })

坑 2：reactive 解构后丢失响应性

const state = reactive({ a: 1, b: 2 })
const { a, b } = state    // ❌ a, b 失去响应

// ✅ 用 toRefs
const { a, b } = toRefs(state)  // a, b 现在是 Ref<number>

坑 3：模板 ref 在 v-if 内部获取不到

// ❌ v-if 为 false 时 ref 是 null
<input v-if="show" ref="inputRef" />

// ✅ 用 v-show（DOM 始终存在但隐藏）
<input v-show="show" ref="inputRef" />

// ✅ 或用 nextTick 在显示后访问
show.value = true
await nextTick()
inputRef.value?.focus()

坑 4：watch 默认不深度监听

const obj = ref({ a: { b: 1 } })

// ❌ 浅监听：obj.a.b = 2 不会触发
watch(obj, callback)

// ✅ 加 { deep: true }
watch(obj, callback, { deep: true })

// ✅ 或用 computed 返回具体值来精确监听
watch(() => obj.value.a.b, callback)

坑 5：异步组件加载状态

import { defineAsyncComponent } from 'vue'

const HeavyChart = defineAsyncComponent({
  loader: () => import('./HeavyChart.vue'),
  loadingComponent: LoadingSpinner,   // 加载中显示
  errorComponent: ErrorFallback,      // 加载失败显示
  delay: 200,                         // 延迟 200ms 才显示 loading
  timeout: 10000,                     // 10s 超时
})

最佳实践速查

• 状态首选 ref：统一 .value 访问模式，避免 reactive 的限制
• computed 优于 watch：能推导的不要侦听。watch 仅用于副作用（localStorage、发请求、操作 DOM）
• v-for 必须带 key：用唯一 ID，不要用 index
• 路由懒加载：() => import() 按页面拆分 chunk，首屏更快
• TypeScript：组件 props/emits 用泛型：defineProps<{...}>()、defineEmits<{...}>()
• 环境变量：import.meta.env.VITE_API_BASE（Vite 前缀 VITE_ 才暴露给客户端）
• 清理副作用：watch / watchEffect 返回的 stop 函数在 onUnmounted 时调用，或用 onWatcherCleanup()
• 生产优化：Vite build 默认 tree-shaking、CSS code-split、async chunk 预加载，一般不需要额外配置

Vite 常用配置速查

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: { alias: { '@': '/src' } },
  server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
  build: { outDir: 'dist', cssCodeSplit: true },
})

Vite 系统架构梳理

来源: vitejs.dev · github.com/vitejs/vite · 版本: v8.1.5 · 采用 Rust 统一工具链 (Oxc + Rolldown)

1. 系统概述

Vite（法语 "快"，发音 /viːt/）是一个下一代前端构建工具，由两大部分组成：

• 开发服务器（Dev Server）：基于原生 ES 模块 (ESM)，提供极速冷启动和毫秒级 HMR
• 生产构建（Build）：使用 Rust 原生工具链 Rolldown + Oxc 进行打包优化

Vite 的核心理念：开发时用原生 ESM 按需编译，生产时用 Rust 工具链打包优化。传统 bundler 需要先打包整个应用才能启动 dev server，Vite 则将依赖预打包后在浏览器中按需加载源码。

第一部分：行为图（系统"做什么"）

2.1 用例图 — 功能全景

Vite 面向三类角色的功能全景：开发者（日常开发）、插件作者（扩展系统）、框架作者（基于 Vite 构建应用框架）。

图 2.1-1: Vite 用例图

2.2 活动图 — Dev Server 启动流程

Vite 开发服务器启动的核心路径：扫描依赖 → 预打包 → 启动 HTTP + WebSocket → 就绪。整个流程通常在 1 秒内完成。

图 2.2-1: Dev Server 冷启动活动图

2.3 活动图 — 生产构建流程

Vite 的生产构建使用 Rolldown 作为打包引擎，Oxc 负责解析/转换/压缩，输出针对现代浏览器的优化产物。

图 2.3-1: 生产构建活动图

2.4 时序图 — 生产构建全流程

vite build 命令的执行是一个多阶段流水线：Rolldown 解析入口 → Oxc 逐模块转换 → Tree Shaking → Code Splitting → 压缩输出。展示完整的构建链：

图 2.4-1: 生产构建时序图

2.5 时序图 — HMR 热更新流程

HMR 是 Vite 开发体验的核心。当文件变更时，Vite 仅需 一次 HTTP 请求即可完成模块热替换，无需整页刷新。

图 2.4-1: HMR 热模块替换时序图

2.6 时序图 — Dev Server 请求处理管线

开发服务器的请求处理管线展示了 Vite 如何将源码（JSX/TS/CSS）转换为浏览器可执行的 ES 模块。

图 2.5-1: Dev Server 源码请求处理时序图

2.7 状态机图 — Dev Server 生命周期

图 2.6-1: Dev Server 生命周期状态机

第二部分：结构图（系统"由什么组成"）

3.1 组件图 — 核心架构

Vite 核心由多个相互协作的子系统组成。开发模式下，所有源码通过 Plugin Container 的 resolveId → load → transform 管线处理后返回浏览器；生产模式下，Rolldown 统一处理全量打包。

图 3.1-1: Vite 核心组件架构图

3.2 包图 — Monorepo 结构

Vite 采用 pnpm monorepo 管理多个子包，包含核心 CLI、脚手架工具、官方插件和兼容层。

图 3.2-1: Vite Monorepo 包结构

3.3 类图 — 核心类关系

Vite 的 JavaScript API 围绕几个关键类构建，展示了插件系统、模块图和运行环境的抽象。

图 3.3-1: Vite 核心类图

3.4 部署图 — 环境拓扑

Vite 6+ 引入了 Environment API，允许框架定义多个运行时环境（client/ssr/edge/worker），每个环境拥有独立的模块解析和执行规则。

图 3.4-1: Vite 多环境部署拓扑

3.5 统一工具链演进

Vite 的工具链经历了重要的演进过程。Vite 原始架构依赖两套工具：开发用 esbuild（Go 语言编译），生产用 Rollup（JS 打包）。Vite 6+ 通过 Rolldown（Rust 打包器）和 Oxc（Rust 工具链）统一为单一线程，消除双管线不一致问题。

图 3.5-1: 工具链演进对比

第三部分：用户使用手册

4.1 项目创建

脚手架创建（推荐）

使用 create-vite 交互式创建项目，选择框架和语言：

npm create vite@latest          # npm
yarn create vite               # yarn
pnpm create vite               # pnpm
bun create vite                # bun

交互提示中选择项目名和模板。也可以直接指定模板参数跳过交互：

npm create vite@latest my-app -- --template react-ts

手动安装

在已有项目中安装 Vite 作为开发依赖：

npm install -D vite

然后在项目根目录创建 index.html：

<!doctype html>
<html lang="en">
  <head><meta charset="UTF-8" /></head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

4.2 项目结构

Vite 项目的核心原则：index.html 是入口，不是藏在 public/ 里的附属品。

my-vite-app/
├── index.html           ← 应用入口（必须位于项目根目录）
├── package.json
├── vite.config.js       ← Vite 配置文件
├── public/              ← 不经处理的静态资源（直接复制到 dist）
│   └── favicon.ico
├── src/
│   ├── main.js          ← 应用入口 JS
│   ├── App.jsx
│   ├── components/
│   │   └── Header.jsx
│   ├── assets/          ← 会被处理/内联的静态资源
│   │   └── logo.svg
│   └── styles/
│       └── global.css
└── tsconfig.json        ← TypeScript 配置（可选）

4.3 开发命令

package.json 脚本

脚手架创建的默认 npm scripts：

{
  "scripts": {
    "dev": "vite",              // 启动开发服务器 (别名: vite dev, vite serve)
    "build": "vite build",      // 生产构建
    "preview": "vite preview"   // 本地预览构建产物
  }
}

常用 CLI 选项

查看完整 CLI 选项：npx vite --help

4.4 关键功能

TypeScript

Vite 开箱支持 .ts 文件导入，但只做 转译（transpile），不做类型检查。

// src/main.ts — 直接导入，不需要特殊配置
import { sayHello } from './utils'
console.log(sayHello('World'))

CSS 处理

支持 .css、.scss、.less、.styl 直接导入：

import './style.css'              // 自动注入到页面
import styles from './App.module.css'  // CSS Modules
import cssString from './vars.css?inline'  // 作为字符串导入

CSS Modules：引用 .module.css 后缀自动启用，支持类名映射：

import classes from './Button.module.css'
// classes.primary → 编译后的哈希类名

预处理器安装后即用：

npm add -D sass-embedded   # .scss / .sass
npm add -D less             # .less
npm add -D stylus            # .styl

静态资源

导入资源返回最终部署 URL：

import imgUrl from './hero.png'       // → /assets/hero.hash.png
import rawText from './data.txt?raw'  // → 文本内容
import logo from './logo.svg?url'     // → 显式获取 URL

小文件（默认 <4KB）自动内联为 base64。

环境变量

在源码中通过 import.meta.env 访问：

// 使用 .env 文件定义变量
// .env                — 所有模式通用
// .env.development    — dev 模式
// .env.production     — build 模式

// 源码中访问
console.log(import.meta.env.VITE_API_URL)  // 必须以 VITE_ 前缀
console.log(import.meta.env.PROD)          // 内置布尔值
console.log(import.meta.env.DEV)
console.log(import.meta.env.BASE_URL)

Glob 批量导入

// 懒加载
const modules = import.meta.glob('./pages/*.tsx')
for (const path in modules) {
  modules[path]().then(mod => { /* ... */ })
}

// 静态批量导入
const modules = import.meta.glob('./components/*.tsx', { eager: true })

Web Workers

// 推荐写法（标准方式）
const worker = new Worker(new URL('./worker.js', import.meta.url))

// 查询参数写法
import MyWorker from './worker.js?worker'
const worker = new MyWorker()

4.5 配置基础

Vite 配置文件名为 vite.config.js（或 .ts/.mts），位于项目根目录：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],

  // 公共基础路径（部署在子路径下时修改）
  base: '/',

  // 开发服务器配置
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': 'http://localhost:8080'  // API 代理
    }
  },

  // 构建配置
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
  },

  // 路径别名
  resolve: {
    alias: {
      '@': '/src',
    },
  },

  // CSS 配置
  css: {
    modules: {
      localsConvention: 'camelCase',
    },
  },
})

export default defineConfig(({ command, mode }) => ({
  plugins: [...],
  define: {
    __DEV__: command === 'serve',
    __MODE__: JSON.stringify(mode),
  },
}))

4.6 框架集成

React

npm install -D @vitejs/plugin-react
npm install react react-dom

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Vue

npm install -D @vitejs/plugin-vue
npm install vue

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

Svelte

npm install -D @sveltejs/vite-plugin-svelte
npm install svelte

// vite.config.js
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
})

后端框架集成

Vite 也常被 Laravel、Ruby on Rails 等后端框架用作前端资产管线：

// Laravel 示例 — 使用 middleware mode
import { createServer } from 'vite'
const vite = await createServer({
  server: { middlewareMode: true },
})
// 挂载到 Laravel 的 HTTP 服务器上

4.7 常见问题

修改配置后不生效

修改 vite.config.js 后，dev server 会自动重启。如果没有，尝试手动 Ctrl+C 后重新 npm run dev。

导入 CJS 依赖报错

某些 CommonJS 依赖可能需要显式加入预打包：

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    include: ['some-cjs-package'],
  },
})

浏览器控制台大量 404 请求

检查是否有未预打包的依赖被浏览器按 ESM 请求。可用 vite-plugin-inspect 查看模块解析链路。

HMR 不工作

• 确认文件在 Vite 的监听范围内（root 下的源码）
• 检查是否是 node_modules 中的文件（依赖文件不会 HMR）
• 尝试用 --force 重启 dev server

生产构建产物过大

• 检查 build.rolldownOptions.output.codeSplitting 配置
• 确认 Tree Shaking 正常工作（避免 barrel export）
• 使用 rolldown-plugin-visualizer 分析 bundle 组成

与 Webpack/Rspack 区别

第四部分：生产部署

5.1 部署总览

Vite 的生产部署由两步组成：vite build 生成优化产物 + 将 dist/ 部署到生产环境。

生产构建命令

vite build                          # 标准构建
vite build --watch                  # 监听模式（持续构建）
vite build --mode staging           # 指定模式加载 .env.staging
vite build --outDir prod-dist       # 自定义输出目录
vite build --ssr src/entry-server.ts  # SSR 构建

产物目录结构

dist/
├── index.html                  ← 入口 HTML（含 modulepreload/prefetch 指令）
├── assets/
│   ├── index-abc123.js         ← 主入口 JS（带 hash）
│   ├── vendor-xyz789.js        ← 拆分的第三方包（若启用 code splitting）
│   ├── chunk-*.js              ← 懒加载路由拆分
│   └── index-def456.css        ← CSS（带 hash）
├── images/                     ← 大资源（默认 >4KB 的不内联）
│   └── hero-hash.png
└── .vite/
    └── manifest.json           ← 资源映射表（SSR 用）

build: {
  outDir: 'dist',              // 输出目录
  assetsDir: 'assets',         // 资源子目录
  assetsInlineLimit: 4096,     // 小于此值（bytes）的资源内联 base64
  sourcemap: false,            // 是否生成 sourcemap（'hidden' 隐藏引用）
  minify: 'oxc',               // 压缩引擎: 'oxc' | 'esbuild' | false
  cssMinify: 'lightningcss',   // CSS 压缩: 'lightningcss' | 'esbuild'
  target: 'esnext',            // 浏览器目标（影响降级策略）
  // Rolldown 扩展选项
  rollupOptions: {
    output: {
      manualChunks: {          // 手动控制代码分割
        vendor: ['react', 'react-dom'],
        utils: ['./src/utils'],
      },
    },
  },
  // 产物文件大小警告阈值
  chunkSizeWarningLimit: 500,  // KB
},

部署前本地预览

部署前强烈建议用 vite preview 在本地验证产物：

npx vite preview                  # 默认 port 4173
npx vite preview --port 8080      # 指定端口
npx vite preview --host 0.0.0.0   # 暴露到局域网

5.2 静态托管（Nginx/CDN）

SPA/MPA 最常见的部署方式：vite build → 上传 dist/ 到静态服务器。

Nginx 配置（SPA）

server {
    listen 80;
    server_name example.com;
    root /var/www/my-app/dist;
    index index.html;

    # 静态资源缓存（带 hash 的文件永不过期）
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # SPA fallback：所有非文件请求回退到 index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml;
    gzip_min_length 1000;
}

Nginx 配置（MPA 多页面）

server {
    root /var/www/my-app/dist;

    # 多页面：每个 .html 对应一个路由
    location / {
        try_files $uri $uri.html $uri/ =404;
    }
}

部署到子路径

如果应用部署在 https://example.com/my-app/ 而非根路径，需设置 base：

// vite.config.js
export default defineConfig({
  base: '/my-app/',     // 以 / 开头和结尾
})

Nginx 对应配置：

location /my-app/ {
    alias /var/www/my-app/dist/;
    try_files $uri $uri/ /my-app/index.html;
}

CDN 部署

将 dist/assets/ 上传到 CDN（OSS/S3/CloudFront），其他文件部署到 Web 服务器：

// vite.config.js — 将资源引用指向 CDN
export default defineConfig({
  base: 'https://cdn.example.com/',
})

5.3 SSR 部署

Vite 内置 SSR 支持，服务端渲染部署分为两步：构建 client + server bundle。

构建配置

{
  "scripts": {
    "build:client": "vite build --outDir dist/client",
    "build:server": "vite build --ssr src/entry-server.js --outDir dist/server",
    "build": "npm run build:client && npm run build:server"
  }
}

SSR 服务端入口示例

// server.js (Node.js / Express)
import express from 'express'
import { createServer as createViteServer } from 'vite'

const app = express()

// 生产模式：直接加载构建产物
if (process.env.NODE_ENV === 'production') {
  app.use(express.static('dist/client'))
  // 加载 SSR manifest 用于资源注入
  const manifest = await import('./dist/client/.vite/manifest.json')
  const { render } = await import('./dist/server/entry-server.js')
  // HTML 渲染逻辑...
}

// 开发模式：创建 Vite dev server（middleware mode）
if (process.env.NODE_ENV === 'development') {
  const vite = await createViteServer({
    server: { middlewareMode: true },
    appType: 'custom',
  })
  app.use(vite.middlewares)
}

Edge Runtime 部署（Cloudflare Workers）

Vite 的 Environment API 原生支持 Edge/Worker 环境，无需 Node.js：

// vite.config.js — 定义 edge 环境
export default defineConfig({
  environments: {
    client: {
      build: { outDir: 'dist/client' },
    },
    ssr: {
      build: { outDir: 'dist/worker' },
      resolve: { conditions: ['worker'] },
      consumer: 'server',
    },
  },
})

5.4 Docker 部署

多阶段构建 Dockerfile（静态 SPA）

# Stage 1: 构建
FROM node:22-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Stage 2: 生产 Nginx
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

多阶段构建 Dockerfile（SSR Node.js）

FROM node:22-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:22-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json .
COPY --from=builder /app/server.js .
ENV NODE_ENV=production
EXPOSE 3000
CMD ["node", "server.js"]

docker-compose.yml

version: '3.8'
services:
  app:
    build: .
    ports:
      - "80:80"
    environment:
      - VITE_API_URL=https://api.example.com
    restart: unless-stopped

5.5 CI/CD 集成

GitHub Actions

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - run: npm ci
      - run: npm run build
      - run: npm run build:ssr  # 如果是 SSR

      # 部署到静态托管（示例：Vercel / Netlify / OSS）
      - name: Deploy to OSS
        uses: some-oss-action@v1
        with:
          source: dist/
          bucket: my-bucket
          endpoint: oss-cn-shenzhen.aliyuncs.com

环境变量管理

Vite 的 env 机制在构建时静态替换（不是在运行时读取）。CI/CD 中通过不同 .env 文件区分环境：

# .env.production        — 生产构建自动加载（vite build 默认 mode=production）
VITE_API_URL=https://api.prod.example.com
VITE_GA_ID=UA-XXXXXXXX-X

# .env.staging           — 预发环境（vite build --mode staging）
VITE_API_URL=https://api.staging.example.com

# .env.preview           — 预览模式（vite preview）
VITE_API_URL=https://api.preview.example.com

构建性能优化（CI 中）

• 使用 npm ci 而非 npm install 确保依赖版本一致且更快
• 缓存 node_modules/.vite 可加速 dependenices 预打包
• 大型 monorepo 使用 Turborepo 或 Nx 增量构建
• 利用 Vite/Rolldown 的原生 Rust 速度，通常无需额外缓存策略

动效 & 动画系统

从 CSS 原生动画到 JS 动效库生态：渲染管线 · 技术分层 · 框架集成 · 选型指南

1. 概述

动效是前端「颜值金字塔」中决定观感的重要一环。本章聚焦 JS 动效库生态，与前面 HTML/CSS/JS/T 章的 CSS 基础动画（Transition / @keyframes / Scroll-driven）互补：那里讲「原生 CSS 怎么做」，这里讲「用库怎么做、选哪个、性能怎么保证」。

动效的本质：在每一帧（约 16.7ms）读取当前时间 → 计算插值 → 更新样式属性，驱动浏览器重绘。决定流畅度的关键是是否触发了布局/绘制，而非库本身。

1.1 动画 vs 视频 — 先分清两条轴

「界面里明明也有视频，凭什么说视频不是动效？」——视频确实是界面的组成部分，但它与动画属于两条不同的分类轴，容易混淆，先拆开：

第一部分：行为图（动效如何工作）

图 2-1: 动效渲染管线时序图 — 一帧动画从 JS 到屏幕

第二部分：结构图（技术分层）

图 3-1: 动效技术分层 — 从原生到 3D

第三部分：选型手册

图 4-1: 动效选型决策

4.2 主流动效库指南

4.3 性能与最佳实践

• 只动 transform / opacity：触发合成、避免布局抖动，是 60fps 的第一原则。
• 用 will-change 提前建合成层：但要克制，过多合成层反而占内存（移动端尤甚）。
• 避免隐式动画 / 布局属性：动画 top/left/width/height 会反复 Layout，改用 translate/scale。
• 尊重 prefers-reduced-motion：减少动效或降级，兼顾可访问性（无障碍）。
• 用 requestAnimationFrame 驱动：别用 setInterval 做动画，rAF 与屏幕刷新同步、节能。
• 大量元素用 transform-origin 居中，配合 backface-visibility 提升合成性能。
• 用性能面板验证：DevTools Performance 录一段，确认没有 Layout/Paint 瓶颈。