前端学习之路之SPA(单页应用)设计原理
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看上去不是特别的优雅,但是它是兼容性最好的方案。
2.1) History API
如上图,左边对应的入口一,二,三,对应页面上的页面一,二,三的,一个入口点进去,应该对应一个页面,这个是入口的作用。那么它们之间是怎么关联上的?比如我点击了入口二,怎么让页面二打开,记住这里的页面二打开是不要请求服务端,是通过本地的JS控制,第是第一步。
第二个是点击浏览器的前进后退或者是其它控制,它怎么回到某个入口对应的页面上去,这是第二步。
以上二步就是SAP要控制的动作,如上图中间部分 History对象,就是实现的一个中间桥梁,History对象下的两个小东西onpopstate和pushState,这是来实现这两步的。
pushState:创建一个历史记录。
onpopstate:响应浏览器的前进和后退。
代码实现
说明:上图主要有两个a标签,a.html,b.html,js注册a标签点击事件,通过history.pushState创建一个历史记录进行页面切换,pushState主要有三个参数,第一个就是传送参数,第二个是页面的标题,第三个就是跳转URL。
然后通过监听onpopstate,就可以知道浏览器前进和回退一些信息。
演示图:
如上,当我点击a.hmtl地址栏的就发生变化,页面切到了a.html,但页面不会刷新,同理点击b.html效果也是一新。
当我们点击回退的时候,就会显示具体信息了。
2.2) Hash
其实hash与History流程差不多,不同的是,桥梁发生了变化。大家知道,一个URL上有post,path,search还有hash。那么hash是怎么做的呢?
当我们改变一个地址的时候,去修改hash,然后监听hashchange事件,你就知道页面的地址发生的变化,然后在这个事件里面去做相应的动作,就能完成刚才所说的这种页面的切换。
代码实现
演示图:
结上就是SPA设计原理
愿你成为终身学习者
前端学习之路之SPA(单页应用)设计原理相关推荐
- spa单页应用PHP,前端学习之路之SPA(单页应用)设计原理
SPA设计 1.设计意义 前后端分离 减轻服务器压力 增强用户体验 Prerender预渲染优化SEO 前后端分离:前端做业务逻辑,后端处理数据和接口,耦合度减少,开发效率提高. 减轻服务器压力:一个 ...
- 前端学习(1510):单页应用SPA实现原理
- 前端学习(1509):单页应用SPA特点
- java 单页面spa_Javascript 与 SPA单页Web富应用
书单推荐 # <单页Web应用:JavaScript从前端到后端>http://download.csdn.net/detail/epubitbook/8720475 # <MVC的 ...
- 前端开始学java_[Java教程]开启前端学习之路
[Java教程]开启前端学习之路 0 2014-06-10 17:00:06 前言 第一次在博客园写博客,写写自己开启前端学习之路.应该是受邢师兄的影响吧,不得不说邢师兄人很好,学习也很认真,师兄的前 ...
- SPA单页应用的优缺点
SPA单页应用的优缺点 Single Page Web Application是一种特殊的Web应用,其所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.JavaScrip ...
- 前端学习之路之图片(魔方旋转)
前端学习之路之图片(魔方旋转) 前面实现了图片的轮播,同时实现了自动轮播图片.图片轮播的就是通过js监听通过改变css样式实现图片轮播的.改文章也是图片的轮播 不过是增加了一些css样式,是的旋转的时 ...
- 前端学习之路之图片轮播(已实现自动轮播)
前端学习之路之图片轮播 近期学习了不少的前端知识和前端的一些应用,今天呢就实现了一下图片的轮播效果,话不多说. 图片轮播的本质就是类似走马灯,当用户点击指示器的时候,需要轮播的图片发生偏移就行了. 使 ...
- 40个漂亮的单页网站设计案例(上篇)
有很多人喜欢单页网站,这种网站只有一个页面,设计都很精美,通过锚记进行平滑的导航.不过,并不是每个网站都适合做成单页,一般都是内容比较少而且将来内容也不怎么增加的情况才适合这样做.如果你打算做一个这样 ...
最新文章
- 互联网项目中, 一些可能有用的开源系统
- DFS水题 URAL 1152 False Mirrors
- 2-1:配置与环境之环境
- Fedora 10下应用网络模拟器NS心得
- 需求分析模板_看完总经理做的公司财务经营分析报告,怪不得人家能拿年薪150万...
- iOS进阶--提高XCode编译速度、Xcode卡顿解决方案
- (20190401)IGS GNSS数据下载网址与下载说明
- java常见面试题:Java程序员面试题(三)
- 论需求分析方法及应用--系统分析师
- 鸿蒙系统反应慢,系统优化非常的关键 鸿蒙2.0和iOS14的反应速度测试
- nexrcloud 自动上传_Nextcloud默认文件的自定义
- VMI(供应商管理库存)模式及其改进方式探讨
- Wibbitz:根据网页文字生成在线视频(转)
- 阿里P9李运华:架构到底是指什么?
- CY8C5888AXQ-LP096 CY8C5888AXI-LP096,IC MCU 32BIT
- 计算机操作系统 学习笔记(第四版 汤小丹)(上)
- 执行unzip命令报错Archive: home.zip End-of-central-directory signature not found. Either this file is
- 华中科技大学计算机复试答案,华中科技大学计算机复试题目
- SPSS数据分析之连续变量频率分析
- pool win10提示bad_Win10系统出现bad pool header蓝屏怎么办?
热门文章
- 网络江湖里爬虫玩的是一场“无间道”
- Could not download xxx.jar的解决办法
- 用蒙特卡洛算法 编程求解Π的值
- 【电池健康状态预测】基于灰狼算法优化BP神经网络实现电池健康状态预测附matlab代码
- Springboot OAuth2 自定义验证
- 怎么购买 nest_购买Nest恒温器时如何省钱
- cf1451D. Circle Game(圆圈博弈、数学、博弈总结)
- windows 设置 java 程序开机启动 + 崩溃重启
- 点播和文件服务器,视频点播文件
- Chapter11——分别声明Teacher(教师类)和Cadre(干部)类,采用多重继承方式由这两个类派生出新类Teacher_Cadre(教师兼干部)类。