千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip

单页面SPA

原理：一个网站 就一个 index.html，后续 路由的切换，本质是 JS动态渲染组件(DOM元素)。

好处：路由的切换，不需要下载/加载 新的 html 文件，页面的切换速度快。

坏处：

无法被 SEO（原因：搜索引擎 搜索/爬虫 的原理是搜索 html文件中的 DOM元素，而 单页面应用 中 html中 几乎没有 DOM元素，而是 JS动态渲染出来的DOM元素）

单页面应用，首屏加载速度，可能会比较慢。(原因：单页面应用是 首屏加 JS都下载到浏览器中，后续 JS渲染，所以 首屏可能下载很多的 JS代码，所以 首屏加载速度会相对慢)

SPA 路由跳转的技术方案

哈希路由：

好处：不需要 后端配置，前端能直接使用

坏处： url 中，有 `#`

 history路由：

好处： url 中，没有 `#`

坏处：将前端代码 发布至服务器上，需要 后端进行配置。

多页面MPA

原理：一个网站，每个 路由 对应一个 `xxx.html` 文件，切换路由就是 从新后服务器上下载 对应的 html 文件。

好处：一个网站，每个 路由 对应一个 `xxx.html` 文件，切换路由就是 从新后服务器上下载 对应的 html 文件。

坏处：

每切换一个路由，都需要下载 新的 html 文件；则网络比较差的时候，会影响页面切换速度。

多页面应用 无法 做到 单页面应用的 「局部刷新」。