在我看来,最好的定义是:单页应用程序是一种只需要将单个页面加载到浏览器中的web应用程序。你可能会想,这到底是什么意思?一个只有一个页面的应用程序怎么可能对世界上的任何人都有用?
答案很简单。单页web应用程序是围绕动态重写该单页内容的概念构建的。这与从服务器加载预呈现页面不同。
这正是奇妙之处。通过采用这种方法,单页web应用程序可以避免由于在服务器上呈现页面而导致的中断。这就消除了web开发世界在提供无缝用户体验方面通常面临的最大问题。
让我们看看这一切是如何运作的,我相信你会更加惊讶。
在单页web应用程序中,当浏览器向服务器发出第一个请求时,服务器会发回index.html文件。基本上就是这样。这是唯一一次提供html文件。html文件有一个.js文件的脚本标记,该文件将控制index.html页面。所有后续调用只返回数据,通常为json格式。应用程序使用此json数据动态更新页面。但是,该页面从不重新加载。
一旦应用程序启动,客户端(而不是服务器)将处理将数据转换为html的任务。基本上,大多数现代spa框架都有一个在浏览器中运行的模板引擎来生成html。
将其与传统的web应用程序进行对比。在传统应用程序中,每次应用程序调用服务器时,服务器都会呈现整个html页面。客户端接收呈现的页面并触发页面刷新。在这种情况下,浏览器就是客户端。
有什么好处?
很明显,由于我们不会在网络上为每个用户交互发送任何html,因此节省了大量时间和带宽。由于不同的开始和结束标记,html版本通常更大。此外,在传统方法中,每次向服务器发出请求时,我们也会加载大量重复的html。通过遵循spa方法,应用程序的响应速度将大大提高。
没有理由猜测更快的数据刷新和更少的带宽消耗会带来更好的用户体验。这在移动设备和较慢的互联网连接上非常有用。
有人反对单页web应用程序说javascript包的大小可能会膨胀。然而,大多数优秀的spa框架都提供了出色的代码拆分方法。这将检查捆绑包的大小,并在适用的情况下执行按需加载。
一个不太明显的好处是关于水疗中心的整体架构。使用json发送应用程序数据会在视图层(html)和应用程序层之间产生某种分离。这将分离表示层和应用层,并允许开发人员独立地发展每一层。你可以在不更改应用程序逻辑的情况下替换html标记。客户机和服务器也完全相互独立。
另一个被忽视的好处是单页应用程序的生产部署。SPA非常易于部署。当你为生产构建spa时,通常会得到一个html文件、一个css包和一个javascript包。任何静态contentserver都可以托管这些文件。nginx、amazons3bucket、apache或firebase就是很好的例子。