前言

一、浏览器是怎么工作的？

一次完整的页面访问流程

当你在浏览器地址栏输入一个 URL 并回车。背后发生了一系列事情：

使用者输入 URL │ ▼┌──────────────┐│ 浏览器解析 URL │ → 拆出协议、主机名、方法等└──────┬───────┘ │ ▼┌──────────────┐└──────┬───────┘ │ ▼┌──────────────┐│ 发起 HTTP 请求 │ → 向服务器说："我要访问 /index.html"└──────┬───────┘ │ ▼┌──────────────┐│ 服务器响应 │ → 返回 text/html└──────┬───────┘ │ ▼┌──────────────┐│ 浏览器渲染页面 │ → 解析 HTML → 建立 DOM 树 → 绘制到屏幕 └──────┬───────┘ │ ▼┌──────────────┐│ 插入浏览历史 │ → navigate 对象记录这条访问 └───────────────

至于关键点，每次访问新 URL，浏览器都会向服务器发起请求，拿到响应后整个页面重新渲染。

URL结构解析

URL可以拆分为协议、主机名、方法、查询参数和锚点。其中这方面，

• 协议 + 主机名 + 方法 + 查询参数会被发送给服务器。
• # 后面的内容仅在浏览器本地生效，服务器根本看不到它。

二、传统多页面时代

万物互联靠链接

互联网的本质是连接，而连接的载体就是

每次点击都在“重新开始”

使用者在首页
↓ 点击 
浏览器白屏
↓ 向服务器请求 about.html
服务器返回 HTML
↓ 浏览器解析渲染页面显示

这是一个 URL 与资源一一对应 的模型：

/index.html → 服务器上的 index.html 文件
/about.html → 服务器上的 about.html 文件
/contact.html → 服务器上的 contact.html 文件

传统方式的问题

传统方式：
────────────────────────────────
├────────────────────────────────
│ ┌── Header ──◄ 加载
│ │ logo
│ ├────────────
│ │ 首页内容
│ ├────────────
│ │ Footer
├────────────────────────────────
整体销毁 → 白屏闪烁
├────────────────────────────────
│ ┌── Header ──◄ 又加载一遍
│ │ logo
│ ├────────────
│ │ 关于内容
│ ├────────────
│ │ Footer
├────────────────────────────────
Header 明明没变！Footer 明明没变，


慢: Header、Footer 等公共部分每次都重新请求并渲染。

白屏: 网络慢时会出现明显闪烁。

浪费资源: 大量重复的 HTML 被反复传输。按理说，


Pc时代网速快、页面简单。这个问题还不突出，但到了移动端时代。网络不稳定、页面越来越复杂，每次整页刷新的体验已经不能忍了。

三、SPA 单页应用的诞生

再看灵感，怎么在一个页面里显示丰富内容？

回想一下我们熟悉的 DOM 编程：
// 点击按钮，局部替换内容——页面不刷新！button.onclick = => {
document.getElementById.innerHTML = '';}，

再看`那更进一步。能不能让 URL 改了但只用 JS 局部替换内容，不刷新整个页面？
`


- 传统：    URL 改    →   服务器返回整个新页面    →   s全量替换
- SPA： URL 改  → JS 拦截变化 → 只替换 container 内的内容



Spa 的主要思路 













╔═══════════════════════════╗
║ ╭─ Header ──╮ ← 始终不动
║ |logo|
║ ╰────────╮
║ | |
║ | 📍可变区域|
║ | |
║ ╰────────╮
║ |Footer|← 始终不动
╚══════════════════╝
✪
​








✪
``
.
`
`
`
`
`
`
`
.
`
`.
`
`.
`.
.`.
.
.`.
`.`.
.`.
.`.
`. `.
.`.
.`.
.`.
.`.
.
.
.
.
.
​​
​
​
​
​
​​
​
​​
​
​
​​
​​
​​​
​​​
​​
​​
​
`

• #后面任何变化。浏览器都不会向服务器发起请求，页面不会刷新。
• # 后面的片段仅在客户端内部使用，可被 JavaScript 捕获监听。说起来，
• # 后面的值可以作为状态管理。让单页应用控制视图切换，
}

// 捕获 hash change
window.addEventListener {
console.log;// 原始完整 URL
console.log;// 新完整 URL
});// 触发此事件，// 接下来可以决定渲染什么内容。\`\`\`
### 五、手写一个 HashRouter
#### 页面结构