
---

## 1) 本地文件（Local）

**说明**：把资源放在自己服务器 / 项目目录，通过相对或绝对路径引用（`/assets/`、`./`、`../` 等）。

**示例**

```html
<!-- CSS（放 head） -->
<link rel="stylesheet" href="/css/main.css">

<!-- JS（放 body 末尾或 head + defer） -->
<script src="/js/app.js" defer></script>
```

**优点**

- 完全可控：部署、版本、更新由自己管理。
- 离线/内网可用（不依赖外部网络）。
- 容易与构建流程（hash、cache-bust）集成。

**缺点**

- 需要自己承担带宽与缓存策略。
- 同一资源不会被不同站点共享缓存（除非使用统一 CDN）。
- 初次请求可能比公共 CDN 略慢（取决于服务器配置/地域）。

---

## 2) 网页链接 / CDN（Remote）

**说明**：引用第三方 URL（例如公用 CDN、第三方库托管），常用于库（jQuery、Bootstrap）、字体、图标或通用资源。

**示例**

```html
<!-- CSS（CDN） -->
<link rel="stylesheet" href="https://cdn.example.com/bootstrap/5.0.0/bootstrap.min.css">

<!-- JS（CDN + SRI + crossorigin） -->
<script src="https://cdn.example.com/jquery/3.7.0/jquery.min.js"
        integrity="sha384-abc123..."
        crossorigin="anonymous"></script>

<!-- 分析类脚本可用 async -->
<script src="https://cdn.example.com/analytics.js" async></script>
```

**优点**

- 全球分发、通常延迟更低、CDN 节点可被多站点共享缓存。
- 节省自家带宽；外部资源常有高可用性。
- 快速集成常用库（省去打包/托管工作）。

**缺点**

- 依赖第三方可用性与隐私/合规（跨域、GDPR、内网限制）。
- 安全风险：若 CDN 被劫持会影响站点（可用 SRI + crossorigin 缓解）。
- 访问受限时（企业内网、无外网环境）会失败。

---

## 对比速览（关键点）

- 控制权：本地 ✅✅ | CDN ✅（较弱）
- 性能（首屏/全球）：CDN ✅ | 本地 视服务器而定
- 可用性（离线/内网）：本地 ✅ | CDN ❌
- 缓存共享：CDN ✅ | 本地 ❌
- 安全（篡改风险）：本地 ✅ | CDN 需 SRI+cors

---

## 最佳实践（简短清单）

- **CSS**：放 `<head>`；关键 CSS 可内联；非关键可 `preload` + onload 切换。
- **JS**：外部脚本优先用 `defer`（保持顺序），第三方可用 `async`（若相互独立）。
- **版本管理**：本地资源使用 hash（`app.abc123.js`）或 querystring（`?v=20251030`）做 cache-bust。
- **安全**：使用 CDN 时为第三方静态资源加 `integrity` + `crossorigin`。
- **回退/兼容**：必要时对重要外部资源提供本地回退（先尝试 CDN，失败再加载本地）。
- **隐私合规**：评估第三方脚本会不会传输用户数据，必要时加载前征得同意。
    

---
