单页应用程序(SPA)工作原理简介自2003年左右首次出现以来，单页Web应用程序已经取得了长足的进步。它们已成为现代javascript领域不可或缺的一部分。但是在我和不少开发者的讨论中，我觉得单页应用程序到底是如何工作的，我仍然不清楚。所以我决定卷起袖子（比喻地说）并提出我对这个非常有趣的主题的看法。所以，让我们从头开始。什么是单页应用程序？在我看来，最好的定义是：单页应用程序是一种只需要将单个页面加载到浏览器中的Web应用程序。你可能会想，这到底是什么意思？单页应用程序如何对世界上的任何人都有用？答案很简单。单页Web应用程序是围绕动态重写该单页内容的概念构建的。这与从服务器加载预渲染页面不同。这就是魔法发生的地方。通过采用这种方法，单页Web应用程序可以避免因在服务器上呈现页面而造成的中断。这消除了Web开发世界在提供无缝用户体验方面通常面临的最大问题。单页应用程序如何工作在单页Web应用程序中，当浏览器向服务器发出第一个请求时，服务器会发回index.html文件。基本上就是这样。那是唯一一次提供html文件。html文件有一个用于控制index.html页面的.js文件的脚本标记。所有后续调用只返回数据，通常是json格式。应用程序使用此json数据动态更新页面。但是，页面永远不会重新加载。应用程序启动后，客户端（而不是服务器）处理将数据转换为html的工作。基本上，大多数现代spa框架都有一个在浏览器中运行的模板引擎来生成html。将此与传统的Web应用程序进行对比。在传统应用中，应用每次调用服务器时，服务器都会渲染整个html页面。客户端收到呈现的页面并触发页面刷新。在这种情况下，浏览器就是客户端。下图解释了这两种方法之间的区别：单页面应用程序的优势是显而易见的，因为我们不会为每次用户交互通过网络发送任何html，因此我们节省了大量时间和带宽。由于各种开始和结束标签，html版本通常更大。另外，在传统的方法中，每次向服务器发出请求时，我们也会加载大量重复的html。通过遵循spa方法，应用程序变得更具响应性。排除猜测，更快的数据刷新和更少的带宽消耗会带来更好的用户体验。这适用于移动设备和较慢的互联网连接。有一些反对单页Web应用程序的论点，认为JavaScript包的大小会变得臃肿。然而，大多数优秀的spa框架都提供了良好的代码拆分方法。这会控制您的包大小并在适用的情况下执行按需加载。一个不太明显的好处涉及单页应用程序的整体架构。使用json发送应用程序数据会在视图层(html)和应用程序层之间创建分离。这解耦了表示层和应用层，并允许开发人员独立地发展每一层。您可以在不更改应用程序逻辑的情况下替换html标记。客户端和服务器端也是完全独立的。另一个被忽视的好处是单页应用程序的生产部署。单页应用程序非常容易部署。当您构建用于生产的spa时，您通常会得到一个html文件、一个css包和一个javascript包。任何静态内容服务器都可以托管这些文件。很好的例子是nginx、amazons3bucket、apache或firebase。单页应用程序的缺点单页Web应用程序的最大缺点之一是它们无法被Google等搜索引擎正确索引。由于除了初始index.html文件之外没有html标签，搜索引擎无法索引内容，因为它们的爬虫无法执行用于生成html的javascript。然而，在官方公告中，Google表示他们的搜索引擎现在可以抓取ajax调用。
