全面解析单页面应用程序是什么

Posted wecloud1314

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了全面解析单页面应用程序是什么相关的知识,希望对你有一定的参考价值。

单页Web应用是当今网站开发技术的弄潮儿,很多传统网站都在或者已经转型为单页Web应用,新的单页Web应用网站(包括移动平台上的)也如雨后春笋般涌现在人们的面前,如Gmail、Evernote、Trello等。

什么是单页面应用程序

 

单页面应用应用(即Single-page App,以下简称SPA),就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个html 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和javascript,所有的操作都在这张页面上完成,都由JavaScript来控制。因此,对单页应用来说模块化的开发和设计显得相当重要。单页Web应用(single page web application,SPA),就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript,所有的操作都在这张页面上完成,都由JavaScript来控制。因此,对单页应用来说模块化的开发和设计显得相当重要。

以前,浏览器会收到来自服务器的HTML。当用户访问另一个URL地址时,需要全页刷新,服务器也会发送全新HTML。这就是所谓的服务器端渲染。

但是,在现代SPA中,客户端渲染已经取代了服务器端渲染。浏览器会先从服务器上加载出最初图像,和包括框架、库和应用代码在内的脚本,以及整个应用所需的样式表。当用户访问其他页面时,页面将不会进行整体刷新,而是通过HTML5 History API对页面地址进行更新。以JSON形式呈现出来的新页面所需的新数据,将会通过向服务器发出的AJAX请求,由浏览器检索进行检索。接着,SPA会通过原先在页面中下载好的JavaScript,来对页面数据进行动态更新。ssl证书申请

SPA特点

速度:更好的用户体验,让用户在web app感受native app的速度和流畅,

MVC:经典MVC开发模式,前后端各负其责。

ajax:重前端,业务逻辑全部在本地操作,数据都需要通过AJAX同步、提交。

路由:在URL中采用#号来作为当前视图的地址,改变#号后的参数,页面并不会重载。

SPA开发流程

用循环的视角审视Web应用开发

框定一个一致的SPA图形用户界面(GUI)和模型

将SPA的原则带回服务器端

聚集于对合适的应用进行早期SPA开发

SPA的优点

1.应用针对用户操作给出的反应更加灵敏,不会由于页面整体刷新而出现闪退;

2.向服务器发送的HTTP请求减少,无需在每一页进行重复下载;

3.用户和服务器划分明确,无需修改服务器代码就可以轻松为新用户创建不同平台。另外,只要不违背API规则,还可以分别对用户和服务器的技术堆栈进行修改。

SPA的缺点

1.最开始的加载任务较重,包括框架和应用代码等;

2.需要对服务器进行额外的配置操作,让它将所有请求汇集到同一个进入点;

3.SPA依靠JavaScript来呈现内容,但并不是所有搜索引擎都能够在爬虫过程中执行JavaScript。这一点,无疑会对应用的搜索引擎优化带来负面影响。

以上是关于全面解析单页面应用程序是什么的主要内容,如果未能解决你的问题,请参考以下文章

PEC学学了解一点block chain,做个trend-rider(弄潮儿)

全面解析|搞懂Nginx这一篇就够了

url参数解析为一个对象与序列化数据为URL参数

nginx全面解析负载均衡反向代理高可用宕机容错

nginx全面解析负载均衡反向代理高可用宕机容错

前端性能优化之--页面渲染优化全面解析