原文地址

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 页面。客户端接管出现的页面并触发页面刷新。在这种状况下，浏览器是客户端。

下图解释了两种办法之间的区别：

单页面利用的劣势

很显著，因为咱们不会为每个用户交互通过网络发送任何 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 调用。