【.com快译】单页Web应用（SinglePageWebApplications）自2003年诞生至今，已经走过了第15个年头。如今，它已成为现代JavaScript领域不可或缺的一部分。在我与许多开发人员的讨论中，我发现他们对单页应用程序的实际工作方式知之甚少。因此，我决定在这里给大家科普一下，深入探究一下单页Web应用的工作原理、优缺点。什么是单页应用程序？在我看来，最好的定义应该是：单页Web应用程序是只需要将单个页面加载到浏览器中的Web应用程序。您可能已经开始怀疑：这到底是什么意思？如何从单个页面提供整个应用程序？怎么够了？答案很简单。单页Web应用程序是围绕动态重写单页内容的概念构建的。这与从服务器加载的预渲染页面有着根本的不同。通过采用这种方法，单页Web应用程序可以避免在服务器上呈现各种页面时出现的中断问题。因此，这就解决了长期以来困扰Web开发行业的最大问题之一：如何为用户提供无缝的访问体验。既然这听起来是个好主意，让我们看看它是如何工作的，您会更加惊讶。魔法是如何发生的？在单页Web应用程序中，当浏览器向服务器发出第一个请求时，服务器返回一个index.html文件。就这么简单，但这是唯一一次在整个过程中提供HTML文件。HTML文件为.js类型的文件准备了一个script标签，这个标签只能用来控制index.html页面。由于所有后续调用只会返回JSON格式的数据，因此应用程序将使用此类JSON数据来动态更新页面。不过，值得注意的是，该页面将不再也永远不会重新加载。启动应用程序后，客户端（而非服务器）将完成将数据转换为HTML的过程。基本上，大多数现代单页应用程序框架都有一个在浏览器中运行以生成HTML的模板引擎。通过与传统Web应用的对比，你不难发现：在传统应用中，应用每次调用服务器时，服务器都需要渲染整个HTML页面。相应的，客户端会收到渲染后的页面，触发整个页面的刷新。所以在这种情况下，浏览器就扮演了客户端的角色。为了更直观的说明这两种方式的区别，我们为大家准备了如下对比图：SPA有哪些优势？显然，由于我们不能总是通过网络页面为每次与用户的交互发送各种HTML，因此单页应用程序可以节省大量时间和带宽。在传统方式中，我们每次向服务器发送请求，不仅需要使用各种开始和结束标签，还需要加载大量重复的HTML代码，而HTML本身的代码量并不大小的。因此，如果我们遵循SPA方法，应用程序的响应能力会被大大提及。由于SPA方式不再需要使用标签来猜测数据，这在一定程度上加快了数据刷新，减少了带宽消耗，可以为用户带来更好的体验。这对于移动设备，或者在互联网连接速度较慢的场景中非常有用。而那些持否定态度的单页Web应用程序开发人员会争辩说，JavaScript包的大小可能会变得臃肿。但客观的说，现在优秀的SPA框架大多都提供了很好的代码拆分方式。因此，我们可以检查包的大小，只在适用时才进行按需加载。整个SPA架构的另一个不太明显的好处：使用JSON发送应用程序数据的方式在HTML视图层和应用程序层之间创建了一个分离。这样就把表现层和应用层分开了，不同的开发者可以独立开发每一层。因此，您可以在不修改应用程序逻辑的情况下替换某些HTML标记。当然，客户端和服务端也是完全独立的。同时，还有一个可能被忽视的优势：单页应用在生产环境的部署特点。由于SPA非常容易部署，因此当我们在生产环境中构建SPA时，我们很容易得到一个HTML文件、一个CSS包和一个JavaScript包。因此，任何静态内容服务器都可用于托管这些文件。此类服务器包括：Nginx、AmazonS3Bucket、Apache和Firebase。SPA有什么缺点吗？凡事有利有弊。单页Web应用程序的最大缺点是它们无法被Google等搜索引擎正确索引。由于除了其原始的index.html文件外没有HTML标签，对于各种搜索引擎的爬虫工具来说，它们无法执行和生成HTMLJavaScript，因此根本无法索引任何相关内容。不过好消息是，在谷歌的官方公告中（参见：https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html），他们的搜索引擎现在可以抓取各种AJAX调用。尽管业界对SPA的使用偏好和复杂度仍有一些批评。但在我看来，这些意见只是不同意见而已。总而言之，我们需要仔细考虑我们的项目用例和场景，以确定哪种方法最适合我们自己的应用程序开发需求。原标题：HowSinglePageWebApplicationsActuallyWork，作者：SaurabhDashora
