摘要：设计设计意义前后端分离减轻服务器压力增强用户体验预渲染优化前后端分离前端做业务逻辑，后端处理数据和接口，耦合度减少，开发效率提高。响应浏览器的前进和后退。代码实现演示图结上就是设计原理愿你成为终身学习者
SPA设计 1、设计意义
前后端分离
减轻服务器压力
增强用户体验
Prerender预渲染优化SEO
前后端分离：前端做业务逻辑，后端处理数据和接口，耦合度减少，开发效率提高。
减轻服务器压力:一个页面不用每次都去请服务端，当一个应用较复杂，有10多个页面的时候，那么每个用用户操作几个页面，只需要请求一次，这会在很大程度上减轻服务器压力。
增强用户体验:比如说当从一个首页跳转详情页，如果按照传统页面的方式，相当于在首页请求，在去服务端请求另一个详情页，每一次的连接，都要消耗DNS以及TCP建立连接再加上页面传输的过程还要包括接口响应的时间，这个都是用户可以感受的到的，那么当使用单页面的时候，不存在多次下载页面的时间，只有接口消耗的时间，这在很大程度上增强了用户体验。
缺点:SPA关于SEO方面有些弱势，对于搜索引擎不是特别友好，那怎么弥补呢？
Prerender预渲染优化SEO:这个主要针对SPA在SEO弱势方面上的处理,这篇文章主要介绍处理方法，大家可去了解一下。
2、工作原理History API
Hash
SPA真正的工作原理是什么？大家有可能在使用vue的话，基本都会使用Router插件，用这个插件页面跑起来没问题，但是这个插件背后的工作原理是否清楚，有几种方式实现？
实现方面的主要有两大类History API和Hash实现，那么这两种之间有什么区别呢？
第一个History API更加优雅，但是对浏览器是有一定要求的,第二个Hash看上去不是特别的优雅，但是它是兼容性最好的方案。
如上图，左边对应的入口一，二，三，对应页面上的页面一，二，三的，一个入口点进去，应该对应一个页面，这个是入口的作用。那么它们之间是怎么关联上的？比如我点击了入口二，怎么让页面二打开，记住这里的页面二打开是不要请求服务端，是通过本地的JS控制，第是第一步。
第二个是点击浏览器的前进后退或者是其它控制，它怎么回到某个入口对应的页面上去，这是第二步。
以上二步就是SAP要控制的动作，如上图中间部分 History对象，就是实现的一个中间桥梁，History对象下的两个小东西onpopstate和pushState，这是来实现这两步的。
说明:上图主要有两个a标签，a.html,b.html，js注册a标签点击事件，通过history.pushState创建一个历史记录进行页面切换，pushState主要有三个参数，第一个就是传送参数，第二个是页面的标题，第三个就是跳转URL。
然后通过监听onpopstate，就可以知道浏览器前进和回退一些信息。
演示图:
如上，当我点击a.hmtl地址栏的就发生变化，页面切到了a.html，但页面不会刷新，同理点击b.html效果也是一新。
当我们点击回退的时候，就会显示具体信息了。
其实hash与History流程差不多，不同的是，桥梁发生了变化。大家知道，一个URL上有post,path,search还有hash。那么hash是怎么做的呢？
当我们改变一个地址的时候，去修改hash，然后监听hashchange事件，你就知道页面的地址发生的变化，然后在这个事件里面去做相应的动作，就能完成刚才所说的这种页面的切换。
代码实现演示图:
结上就是SPA设计原理愿你成为终身学习者
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93609.html
摘要：设计设计意义前后端分离减轻服务器压力增强用户体验预渲染优化前后端分离前端做业务逻辑，后端处理数据和接口，耦合度减少，开发效率提高。响应浏览器的前进和后退。代码实现演示图结上就是设计原理愿你成为终身学习者 SPA设计 1、设计意义 前后端分离 减轻服务器压力 增强用户体验 Prerender预渲染优化SEO 前后端分离：前端做业务逻辑，后端处理数据和接口，耦合度减少，开发效率提高。 ...
摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。 本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...
摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。 本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...
摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。 本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...
阅读 1001·2021-11-25 09:43
阅读 1671·2019-08-30 13:59
阅读 1587·2019-08-30 11:22
阅读 2121·2019-08-30 11:06
阅读 1298·2019-08-28 17:51
阅读 3716·2019-08-26 12:12
阅读 776·2019-08-26 12:11
阅读 442·2019-08-26 12:10
