单页web应用是什么?它又会给传统网站带来哪些好处?

什么是单页应用?

单页应用是指在浏览器中运行的应用,它们在使用期间不会重新加载页面。像所有的应用一样,它旨在帮助用户完成任务,比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。

单页应用给传统网站带来的好处?

相对于传统网站,我们认为单页应用的主要好处是:

  • 它提供了更加吸引人的用户体验。单页应用可以做到一举两得:桌面应用的即时性和网站的可移植性和可访问性。
  • 单页应用可以和桌面应用一样渲染—单页应用只需要重绘界面上需要变化的部分。相比之下的传统网站,许多用户操作都会重绘整张页面,结果是当浏览器从服务器获取数据时,页面会假死并有“闪烁”现象,然后再重绘页面上的所有东西。如果页面很大,服务器又繁忙,或者网络连接很慢,这种“闪烁”现象会持续好几秒钟甚至是更长时间,用户只得猜测页面什么时候才可以再次使用。与单页应用的快速渲染和即时反馈相比,这是一种很恐怖的体验。
  • 单页应用可以拥有和桌面应用一样的响应速度—尽可能地把(临时的)工作数据和处理过程从服务端转移到浏览器端,单页应用由此把响应时间减至最小。单页应用在本地拥有大多数需要决策判断的数据和业务逻辑,因此是很快的。只有数据验证、授权和持久存储必须要放在服务端,原因我们会在第6章到第8章中进行讨论。传统网站的大多数应用逻辑在服务端,对大部分的用户输入的响应,他们必须等待一个“请求/响应/重绘”的循环周期。与接近即时响应的单页应用相比,这需要花费几秒钟的时间。
  • 单页应用可以和桌面应用一样,把它的状态通知给用户—当单页应用确实必须等待服务器的响应时,可以动态地显示进度条或者繁忙指示器,因此用户不会因延时而困惑。相比传统的网站,用户实际上只能猜测页面何时加载完并可用。
  • 单页应用像网络一样,几乎随处可以访问—不像大多数的桌面应用,用户可以通过任务网络连接和适当的浏览器访问单页应用。如今,这一名单包括智能手机、平板电脑、电视、笔记本电脑和台式计算机。
  • 单页应用可以像网站一样即时地更新和发布—用户不需要做任何事就能明白它的好处:他们只要重新加载浏览器就行了。维护软件的多个并存版本的麻烦在很大程度上消除了。开发单页应用的作者,在一天之内就能构建和更新很多次。桌面应用经常需要下载并且安装新版本需要管理访问权限,版本之间的间隔可能是很多个月或者很多年。
  • 单页应用和网站一样,是跨平台的—和大多数的桌面应用不一样,精心编写的单页应用可以在提供现代HTML5浏览器的任意操作系统上运行。尽管这通常被认为是对开发人员的好处,但对很多同时使用多种设备的用户来说是非常有用的,比如工作时用Windows,在家用Mac,Linux服务器,Android手机和Amazon平板电脑。

所有这些好处意味着,你可能会想把下个应用做成单页应用。每次点击后都会重新渲染整张页面的笨拙网站,容易日益疏远富有经验的用户。精心编写的单页应用具有互动和快速响应的界面,还伴有访问网络的功能,这将帮助我们把客户留在属于他们的地方:使用我们的产品。

关于单页Web应用

单页Web应用(single page web application,SPA)无疑是目前网站开发技术的弄潮儿,很多传统网站都在或者已经转型为单页Web应用,新的单页Web应用网站(包括移动平台上的)也如雨后春笋般涌现在人们的面前,如Gmail、Evernote、Trello等。如果你是一名Web开发人员,却还没开发过或者甚至是没有听说过单页应用,那你已经Out很久了。

单页Web应用和前端工程师们息息相关,因为主要的变革发生在浏览器端,用到的技术其实还是HTML+CSS+JavaScript,所有的浏览器都原生支持,当然有的浏览器因为具备一些高级特性,从而使得单页Web应用的用户体验更上一层楼。关于单页应用的优点和缺点,网上讲解的文章有很多,这里就不展开论述了。 单页Web应用,顾名思义,就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面上完成,这一切都由JavaScript来控制。因此,单页Web应用会包含大量的JavaScript代码,复杂度可想而知,模块化开发和设计的重要性不言而喻。

本文摘自即将上市的《单页Web应用:JavaScript从前端到后端》

时间: 2024-12-12 04:47:35

单页web应用是什么?它又会给传统网站带来哪些好处?的相关文章

单页web应用(SPA)的简单介绍

单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.JavaScript 和 CSS.一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转.而是利用 JavaScript 动态的变换HTML的内(采用的是div切换显示和隐藏),从而实现UI与用户的交互.由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验.得益于ajax,我们

简陋的 ASP.NET CORE 单页Web应用程序“框架”

我对ASP.NET CORE了解不多,不知道是不是重复造轮子,也或者什么也不是,这个Demo是这样的: 1.非常简单或者说原始:2.将单页Web应用增加了一个页(Page)概念(相当于MVC的 View) 3.Ajax无刷新跳转到新 Page,并支持H5浏览器刷新 Page.前进后退到其它 Page4.类 MVC 开发模式,Action 提供 Data,Js 渲染 View,Data 和 View 开发分离 完整代码可以访问 https://github.com/fonshen/Fonshen.

构建单页Web应用

让我们先来看几个站点: coding(https://coding.net/) teambition(https://www.teambition.com/) cloud9(https://c9.io/) ? 注意这几个站点的相同点.那就是在浏览器中,做了原先"应当"在client做的事情. 它们的界面切换非常流畅,响应非常迅速,跟传统的网页明显不一样,它们是什么呢?这就是单页Web应用. 所谓单页应用.指的是在一个页面上集成多种功能.甚至整个系统就仅仅有一个页面,全部的业务功能都是它

论单页Web应用+RESTful规约[上]

单页Web应用 概述 单页Web应用并不是突然诞生的一门新技术,而是web展示的一种新的尝试.它将所有的动作局限于一个Web页面,在加载站点首页的时候就加载站点需要的JavaScript和CSS.单页Web应用不会随着用户的操作而重新加载页面或者进行页面跳转,而是利用默默执行在后端的JavaScript动态的变换HTML内容,从而对用户动作做出响应.单页Web应用可以提供非常流畅的用户体验,并且在移动端Hybrid应用中有着Native应用的体验. 原理 根据RFC 1738中对URL的描述,U

单页Web应用:

概念: Web应用程序: WEB应用程序一般是B(浏览器)/S(服务器)模式.Web应用程序首先是“应用程序”,和用标准的程序语言,如C.C++等编写出来的程序没有什么本质上的不同.然而Web应用程序又有自己独特的地方,就是它是基于Web的,而不是采用传统方法运行的.换句话说,它是典型的浏览器/服务器架构的产物. 理解了什么是浏览器/服务器架构,就了解了什么是Web应用程序.常见的计数器.留言版.聊天室和论坛BBS等,都是Web应用程序,不过这些应用相对比较简单,而Web应用程序的真正核心主要是

单页Web应用优缺点

一.定义单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用.它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML.JavaScript 和 CSS.一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转.取而代之的是利用 JavaScript 动态的变换HTML的内容,从而实现UI与用户的交互.由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验. 二.优缺点 单页Web程序的出现

好程序员web前端分享如何构建单页Web应用

好程序员web前端分享如何构建单页Web应用,首先我们来看一看单页应用是什么?所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上.它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体验. 其实单页应用我们并不陌生,很多人写过ExtJS的项目,用它实现的系统,很天然的就已经是单页的了,也有人用jQuery或者其他框架实现过类似的东西.用各种JS框架,甚至不用框架,都是可

《单页web应用 javaScript从前端到后端》3.1 开发shell小例子demo

目前看到这里,还不懂什么是单页应用,这不就是一个普通的点击滑开收缩的动画而已--作者写的那么复杂666 请转载此文的朋友务必附带原文链接,谢谢. 原文链接:http://xuyran.blog.51cto.com/11641754/1891022 spa.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <li

创建HTML5/CSS3单页Web布局

1. [图片] 第1步:PhotoShop ?2. [代码]第2步:index.html <!DOCTYPE html><!-- The new doctype --><html class="cufon-active cufon-ready" lang="en"><head><meta http-equiv="content-type" content="text/html; ch