SPA设计1.设计意义前后端分离减少服务器压力提升用户体验Prerender预渲染优化SEO界面，度减少了耦合，提高了开发效率。减轻服务器压力：一个页面不需要每次都去请求服务器。当一个应用比较复杂，超过10个页面时，每个用户操作几个页面，只需要请求一次，会大大减轻服务器的压力。减轻服务器压力。提升用户体验：比如从首页跳转到详情页，如果按照传统的页面方式，相当于在首页请求，在服务器端请求另一个详情页。每次连接都会消耗DNS和TCP建立连接加上页面传输的过程也包括接口响应的时间，用户可以感受到，所以在使用单个页面时，没有时间多次下载页面，只有接口消耗的时间。很大程度上提升了用户体验。缺点：SPA在SEO方面有些弱，对搜索引擎不是特别友好，那么如何弥补呢？Prerender预渲染优化SEO：这个主要是针对SPA薄弱的SEO方面的处理。本文主要介绍处理方法。你可以去了解一下。2.工作原理HistoryAPIHashSPA真正的工作原理是什么？如果你用的是Vue，基本上都会用到Router插件。用这个插件运行页面是没有问题的，但是这个插件背后的工作原理是否清楚，有多少种实现方式？在实现上，主要有HistoryAPI和Hash实现两种，那么这两者有什么区别呢？第一个HistoryAPI比较优雅，但是对浏览器有一定的要求。第二个Hash看起来不是特别优雅，但它是最兼容的解决方案。2.1)HistoryAPI如上图所示。左侧对应条目1、2、3分别对应页面上的第1、2、3页。一个入口点应该对应一个页面。这就是条目的功能。那么它们有什么关系呢？比如我点击入口2，如何让页面2打开，记住这里的页面2是在不请求服务器的情况下打开的，是本地JS控制的，先第一步。第二种是点击浏览器的前进后退或者其他控件。如何返回到某个条目对应的页面是第二步。以上两步是SAP要控制的动作。如上图中间部分所示，History对象是实现的中间桥梁。History对象下的两个小东西onpopstate和pushState就是用来实现这两个步骤的。pushState：创建一个历史记录。onpopstate：响应浏览器的前进后退。代码实现说明：上图主要有两个a标签，a.html，b.html，js注册一个标签点击事件，通过history.pushState创建历史记录来切换页面，pushState主要有三个参数，第一个是Transfer参数，第二个是页面标题，第三个是重定向URL。然后通过监听onpopstate就可以知道浏览器前进和后退了一些信息。演示图：如上，当我点击a.hmtl地址栏时，它会发生变化。页面切换到a.html，但是页面不会刷新。同样，点击b.html的效果也是新的。当我们点击返回时，会显示具体的信息。2.2)Hash其实hash类似于History的过程，不同的是桥变了。众所周知，一个URL有post、path、search和hash。那么散列是如何完成的呢？当我们改变一个地址，修改hash，然后监听hashchange事件，就会知道页面地址的变化，然后在这个事件中做相应的动作，就可以完成刚才说的页面的切换.代码实现演示图：结是SPA的设计原则愿你成为终身学习者
