SPA单页面应用

1.单页面应用的定义

1. 何为单页面

单页面并不是说一个网页只有一个页面构成，而是说这个网页可以有1到多个不同的页面，但是其入口文件只有index.html这一个，其他的页面都是通过js控制路由跳转实现页面跳转的

2. 与传统多页面模式的对比

• 由上图可以看出，传统的多页面模式应用，每次刷新界面都会像服务器重新请求html文件，在早期的 Web 应用中，前端的作用很弱，业务逻辑和数据处理都在后端，后端给前端返回一个 HTML 页面，前端只负责展示。在这种模式下，单个 HTML 页面被当做一个功能原件，表单提交，超链接跳转都可以用来重新请求新的 HTML 页面，从而达到给用户展示新的页面的目的。在这种方式中，你可以感觉到页面总是在不停的刷新，一个点击可能都需要等待很久，这是因为，当页面变化时，所有资源都需要重新请求。这些问题导致了用户体验不佳，也浪费了资源。
• 如果采用单页面模式，第一次完成html文件的请求后，后面再次像后台发送请求，后台返回的只是更新的data数据，它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。相对于传统的 Web 应用，单页应用做到了前后端分离，后端只负责处理数据提供接口，页面逻辑和页面渲染都交给了前端。前端发展到现在，单页应用的使用已经很广泛，目前时兴的 React、Vue、Angular 等前端框架均采用了 SPA 原则。单页应用意味着前端掌握了主动权，也让前端代码更复杂和庞大，模块化、组件化以及架构设计都变得越来越重要

2. 如何实现单页面

1. location.hash

我们可以监听 # 号后面内容的变化（hashChange），从而动态改变页面内容。URL 的 # 号后面的地址被称为 hash,这种实现方式我们称之为 Hash 模式，是非常典型的前端路由方式。

2. window.history

这种方式使用了 History API，History API 顾名思义就是针对历史记录的 API ，这种模式的原理是先把页面的状态保存到一个对象（state）里，当页面的 URL 变化时找到对应的对象，从而还原这个页面。其实原本人家这个功能是为了方便浏览器前进后退的,使用了这种模式，就可以摆脱 # 号实现前端路由。

Vue 已经为我们提供了两种模式的前端路由，无需我们自己去实现。

3. SPA的优缺点

优点有：

• 无刷新体验，用户在切换页面过程中不会频繁被“打断”，因为界面框架都在本地，对用户的响应非常及时，因此提升了用户体验；

• 分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起；

• 减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；

• API 共享，同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；

• 完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整。

缺点有：

• 对 SEO 不太优好，多页面应用是对SEO友好的，因为返回给前端的是渲染好的HTML结构，里面的内容都可以被爬虫抓取到，尽管可以通过 Prerender 预渲染优化等技术解决一部分，但是相对还是不容易索引到它；

• 易出错，需要使用程序管理前进、后退、地址栏等信息；

• 较高的前端开发门槛，对技术能力要求较高，需要对设计模式有一定理解，因为面对不是一个简单的页面，而是一个运行在浏览器环境里面的桌面软件。

参考链接