单页面 Web 应用(Single Page Application,SPA)的工作原理介绍-阿里云开发者社区

开发者社区> -技术小能手-> 正文

单页面 Web 应用(Single Page Application,SPA)的工作原理介绍

简介: 单页面 Web 应用(Single Page Application,SPA)的工作原理介绍
+关注继续查看

原文地址


SPA 无处不在,但在网络开发人员中仍然是一个颇有争议的话题。


自 2003 年左右首次出现以来,单页 Web 应用程序已经取得了长足的进步。它们已成为现代 javascript 领域不可或缺的一部分。


但是在我与不少开发人员的讨论中,我觉得单页应用程序的实际工作方式仍然不够清晰。 因此,我决定卷起袖子(形象地说)并提供我对这个非常有趣的主题的看法。


所以,让我们从头开始。


what are single page applications?

在我看来,最好的定义是:单页应用程序是一种 Web 应用程序,它只需要将单个页面加载到浏览器中。


你可能会想,这到底是什么意思? 一个只有单页的应用程序怎么可能对世界上的任何人有用?


答案很简单。 单页 Web 应用程序是围绕动态重写该单页内容的概念构建的。 这与从服务器加载预渲染页面不同。


这就是魔法发生的地方。 通过采用这种方式,单页面 Web 应用程序避免了由于在服务器上呈现页面而导致的中断。 这消除了 Web 开发世界在提供无缝用户体验方面通常面临的最大问题。


单页面应用的工作原理

在单页 Web 应用程序中,当浏览器向服务器发出第一个请求时,服务器会发回 index.html 文件。基本上就是这样。那是提供 html 文件的唯一时间。 html 文件有一个 .js 文件的脚本标记,它将控制 index.html 页面。所有后续调用仅返回数据,通常为 json 格式。应用程序使用此 json 数据动态更新页面。但是,页面永远不会重新加载。


一旦应用程序启动,客户端(而不是服务器)处理将数据转换为 html 的工作。基本上,大多数现代 spa 框架都有一个在浏览器中运行的模板引擎来生成 html。


将此与传统的 Web 应用程序形成对比。在传统应用中,每次应用调用服务器时,服务器都会渲染整个html页面。客户端接收呈现的页面并触发页面刷新。在这种情况下,浏览器是客户端。


下图解释了两种方法之间的区别:

image.png单页面应用的优势

很明显,由于我们不会为每个用户交互通过网络发送任何 html,因此可以节省大量时间和带宽。由于各种开始和结束标签,html 版本通常更大。此外,在传统方法中,每次向服务器发出请求时,我们也会加载大量重复的 html。通过遵循 spa 方法,应用程序变得更加敏感。


无需猜测,更快的数据刷新和更少的带宽消耗会带来更好的用户体验。这在移动设备和较慢的互联网连接上非常有用。


有一些反对单页 Web 应用程序的论据说,javascript 包的大小可能会变得臃肿。然而,大多数优秀的 spa 框架都提供了很好的代码拆分方法。这可以控制您的包大小并在适用的情况下执行按需加载。


一个不太明显的好处是关于单页面应用的整体架构。使用 json 发送应用程序数据在视图层 (html) 和应用程序层之间创建了一种分离。这将表示层和应用层解耦,并允许开发人员独立发展每一层。您可以在不更改应用程序逻辑的情况下替换 html 标记。客户端和服务器也是完全独立的。


另一个被忽视的好处是单页应用程序的生产部署。单页面应用非常容易部署。当您构建用于生产的 spa 时,您通常会得到一个 html 文件、一个 css 包和一个 javascript 包。任何静态内容服务器都可以托管这些文件。很好的例子是 nginx、amazon s3 bucket、apache 或 firebase。


单页面应用的缺点

单页 Web 应用程序的最大缺点之一是它们无法被像谷歌这样的搜索引擎正确索引。 由于除了初始 index.html 文件之外没有 html 标记,搜索引擎无法索引内容,因为它们的爬虫无法执行用于生成 html 的 javascript。


然而,在官方公告中,谷歌表示他们的搜索引擎现在能够抓取 ajax 调用。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【译】Spark Streaming 框架在 5G 中的应用
原文链接: Applying the Spark Streaming framework to 5G 我们已经很长时间没有更新流处理框架的相关博客(apache-storm-vs-spark-streaming 和 apache-storm-performance-tuners),这次想分享一下我们关于当前流处理引擎及其在 5G 和 IoT 场景适用性的一些观点。
1137 0
Hadoop - 企业级大数据管理平台CDH(介绍和准备工作)
哈喽大家好呀,仅经过了一段时间大数据相关的博文又和大家见面了,笔者之前有写过一套Hadoop大数据相关的博客,为什么今天又要开坑呢?当然是有原因,随着不断的学习了解,慢慢意识到之前做法存在很多缺陷,最终对比了比较成熟的解决方案EMR和CDH,最终选择了使用CDH来搭建大数据管理平台,那么我们就开始新的一趴,企业级大数据管理平台CDH的学习吧!
418 0
【Web API系列教程】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(上)
前言 在传统的web应用程序中,客户端(浏览器)通过请求页面来启动与服务器的通信。然后服务器处理该请求,并发送HTML页面到客户端。
815 0
SAP Fiori Elements里Smart Link工作原理介绍
SAP Fiori Elements里Smart Link工作原理介绍
14 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
8344 0
Docker入门系列之二:使用dockerfile制作包含指定web应用的镜像
在前一篇文章:Docker入门系列之一:在一个Docker容器里运行指定的web应用 里, 我们已经成功地将我们在本地开发的一个web应用部署到Docker容器里运行。 本文将介绍如何制作一个包含了这个web应用的Docker镜像。
851 0
SAP UI5 WebIDE里使用Mock数据的工作原理介绍
Created by Wang, Jerry, last modified on Feb 02, 2015
5 0
1727
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载