✅ 一、Hash History 与 Browser / Web History 的区别
（这是前端路由的基础：比如 React Router、Vue Router）
🟦 1. Hash History（# 号路由）
URL 示例：
https://xx.com/#/home
✔ 特点
- # 后面的内容不会被发送给服务器
- 刷新不会 404
- 浏览器不会真的跳转目录
- 兼容性最好（任何浏览器都支持）
✔ 优点
- 不需要后端配合
- 刷新永远不会报 404
- 实现简单
✘ 缺点
- URL 不够美观
- SEO 极差（# 后的内容搜索引擎不抓）
🟩 2. Browser History / Web History（HTML5 History API）
URL 示例：
https://xx.com/home
✔ 特点
- 通过
pushState/replaceState实现前端路由 - 刷新会向服务器发送真实路径
✔ 优点
- URL 干净
- SEO 友好
- 和真实服务器路径一致
✘ 缺点
- 刷新会请求真实路径，如果后端没处理 → 404
- 需要后端做默认路由配置（常见：所有路径都跳转到 index.html）
🧠 总结对比表
| 项目 | Hash History | Browser / Web History |
|---|---|---|
| URL | 含 # | 无 # |
| SEO | 差 | 好 |
| 刷新 | 不会 404 | 可能 404，需要服务器配合 |
| 浏览器支持 | 全支持 | 旧浏览器部分不支持 |
| 适用场景 | 无后端、静态托管 | 有后端、正规项目 |
✅ 二、FCP 和 LCP 的区别
（这是 Web 性能指标，PageSpeed Insights、Chrome DevTools 中常见）
🔵 1. FCP（First Contentful Paint）首屏内容绘制时间
定义：
浏览器第一次绘制任何内容（文字、图片、SVG、canvas 等）的时间点。
通俗理解：
📌 页面开始有内容出现的时间
比如：
- 顶部 Logo
- 一行文字
- 背景图片
都算 FCP。
衡量：页面是不是“快开始显示东西”了？
🟢 2. LCP（Largest Contentful Paint）最大内容绘制时间
定义：
视口中最大的元素（大图、大标题、Banner 等）加载完成的时间。
通俗理解：
📌 用户主要看到的核心内容什么时候加载完？
比如：
- 首屏 banner 大图
- 大标题区域
- hero 版块图片
这些会作为 LCP。
衡量：主要内容是不是“快显示完”了？
🧠 总结对比表（非常关键）
| 指标 | FCP | LCP |
|---|---|---|
| 全称 | First Contentful Paint | Largest Contentful Paint |
| 触发点 | 页面首次出现任何内容 | 页面最大可见内容加载完成 |
| 关注点 | 页面有东西出现了吗？（初次展示） | 主要内容加载完了吗？（可交互感） |
| 影响用户感受 | 页面开始“亮”了 | 页面基本“看完首屏”了 |
| 影响优化方向 | 首屏渲染速度 | 图片加载、布局稳定性、服务器响应 |
