什么是单页应用程序？ 架构、优势和挑战

单页应用程序 (SPA) 是一种 Web 应用程序，通过单个 HTML 页面呈现给用户，以提高响应速度并更接近地复制桌面应用程序或本机应用程序。

有时会来一次SPA defi单页接口（SPI）。

单页应用程序可以在初始加载期间获取应用程序的所有 HTML、JavaScript 和 CSS，也可以动态加载资源以进行更新，以响应用户交互或其他事件。

其他 Web 应用程序向用户提供一个链接到单独 HTML 页面上的应用程序部分的主页，这意味着用户每次发出新请求时都必须等待新页面加载。

技术

SPA 使用 HTML5 和 Ajax（异步 JavaScript 和 XML）来实现对用户请求的流畅和动态响应，从而允许在用户采取操作时立即更新内容。 页面加载后，通过 Ajax 调用与服务器进行交互，并返回数据（以 JSON（JavaScript 对象表示法）格式检测），以刷新页面而无需重新加载。

水疗详细

单页应用程序因其能够重新设计用户界面的任何部分而无需服务器往返来获取 HTML 而闻名。 这是通过使用管理数据的模型层和从模型读取的视图层将数据与数据表示分离来实现的。

好的代码来自于多次解决同一问题，或者重构它。 通常，这个过程以重复的模式发展，其中一种机制始终如一地做同样的事情。

要编写可维护的代码，您需要以简单的方式编写代码。 这是一场持续不断的斗争，事实上，通过编写代码来解决问题很容易增加复杂性（入口/依赖）； 并且以不降低复杂性的方式解决问题很容易。

命名空间就是一个例子。

单页应用程序 (SPA) 多页应用程序 (MPA) 比较

多页面应用程序 (MPA) 包含多个页面，其中包含静态数据和其他站点的链接。 HTML和CSS是用于开发MPA网站的主要技术。 他们可以使用 JavaScript 来减少负载并提高速度。 提供广泛服务的组织（例如在线商店）应考虑使用 MPA，因为它们可以轻松连接到不同的用户数据库。

单页应用程序与多页应用程序的不同之处如下：

• 开发流程：与 SPA 不同，创建 MPA 时，您不需要精通 JavaScript。 然而，MPA 中前后端耦合意味着这些站点需要比 SPA 更长的建设时间。
• 速度：MPA 运行速度相对较慢，需要从头开始加载每个新页面。 然而，SPA 在初始下载后加载速度要快得多，因为它们会缓存数据以供以后使用。
• Ottimizzazione per i motori di Ricerca：搜索引擎可以轻松地使用 MPA 索引网站。 MPA 有更多的页面被搜索引擎抓取，以产生更好的 SEO 排名。 每个页面的内容也是静态的，使其更易于访问。 相比之下，SPA 的页面具有唯一的 URL（统一资源定位符）。 他们还使用 JavaScript，但大多数搜索引擎都没有正确索引该 JavaScript。 这使得 SPA 的 SEO 排名更具挑战性。
• 安全：在 MPA 中，您需要单独保护每个在线页面。 然而，SPA 更容易受到黑客攻击。 但通过正确的方法，开发团队可以提高应用程序的安全性。

随着越来越多的企业转向使用 SPA，爬虫和搜索引擎将不断发展以更好地对其进行索引。 考虑到 SPA 的速度，问题只是何时成为 Web 应用程序开发的首选。 那么MPA相对于SPA的优势就会开始消失。

何时使用单页应用程序？

此类应用程序最相关的场景有五种：

• 想要开发具有动态平台和较低数据量的网站的用户可以使用 SPA。
• 计划为其网站构建移动应用程序的用户也可以考虑使用 SPA。 他们可以使用网站和移动应用程序的后端 API（应用程序编程接口）。
• SPA 架构适合构建 Facebook、SaaS 平台和封闭社区等社交网络，因为它们需要较少的 SEO。
• 想要为消费者提供无缝交互的用户还应该使用 SPA。 消费者还可以访问实时流数据和图表的实时更新。
• 希望跨设备、操作系统和浏览器提供一致、本机和动态用户体验的用户。

一个好的团队应该有预算、工具和时间来创建高质量的单页应用程序。 这将确保 SPA 可靠且高效，不会出现与流量相关的停机情况。

单页应用架构

单页面应用程序通过加载和处理当前页面来与访问者进行交互，从而无需从服务器加载多个网页。

具有 SPA 的网站由单个 URL 链接组成。 单击时将下载内容并更新特定的用户界面 (UI) 组件。 当从服务器获取新内容时，用户可以与当前页面进行交互，从而改善了用户体验。 发生刷新时，当前页面的部分内容将更新为新内容。

SPA 中的初始客户端请求会加载应用程序及其所有相关资产，例如 HTML、CSS 和 JavaScript。 初始加载文件对于复杂的应用程序可能很重要，并会导致加载时间变慢。 当用户浏览 SPA 时，应用程序编程接口 (API) 会获取新数据。 服务器仅响应 JSON（JavaScript 对象表示法）格式的数据。 收到此数据后，浏览器将刷新用户看到的应用程序视图，而无需重新加载页面。

单页应用架构包括服务器端和客户端渲染技术。 站点通过客户端呈现 (CSR)、服务器端呈现 (SSR) 或静态站点生成器 (SSG) 向用户显示和呈现。

1. 客户端渲染 (CSR)
   通过客户端呈现，浏览器向服务器发出 HTML 文件请求，并接收带有附加脚本和样式的基本 HTML 文件。 执行 JavaScript 时，用户会看到空白页面或加载程序图像。 SPA 获取数据、生成可视化并将数据推送到文档对象模型 (DOM) 中。 然后 SPA 就可以使用了。 CSR 通常是三个替代方案中最长的一个，并且由于在查看内容时大量使用设备资源，有时可能会压垮浏览器。 此外，CSR 是高流量网站的绝佳替代方案，因为它无需过多的服务器通信即可向消费者提供信息，从而带来更快的用户体验。

2. 服务器端渲染 (SSR)
   在服务器端渲染期间，浏览器向服务器请求 HTML 文件，服务器获取请求的数据、渲染 SPA 并为移动应用程序创建 HTML 文件。 然后将可访问的材料呈现给用户。 SPA 架构需要附加事件、生成虚拟 DOM 并执行进一步的操作。 然后 SPA 就可以使用了。 SSR 使程序速度更快，因为它结合了 SPA 的速度，并且不会使用户的浏览器过载。

3. 静态站点生成器 (SSG)
   在静态站点构建器中，浏览器立即向服务器发出 HTML 文件请求。 该页面显示给用户。 SPA 获取数据、生成视图并填充文档对象模型 (DOM)。 然后，SPA 就可以使用了。 从名称来看，SSG 最适合静态页面。 他们提供静态页面，具有良好且快速的选项。 对于具有动态内容的网站，建议用户选择其他两个信息呈现选项之一。

单页应用程序的优点

Meta、YouTube 和 Netflix 等大公司已经从多页面应用程序转向单页面应用程序。 SPA 提供更流畅的用户体验、更高的性能和响应能力。 以下是使用单页应用程序的好处。

1. 缓存功能
   单页应用程序在初始下载时向服务器发出单个请求，并保存它收到的任何数据。 如果需要，消费者可以使用接收到的数据进行离线工作，这使得用户更加方便，因为它允许他们消耗更少的数据资源。 另外，当客户端网络连接状况不佳时，如果局域网连接允许，也可以将本地数据同步到服务器。
2. 快速响应
   使用 SPA 可以提高网站的速度，因为它仅刷新请求的内容，而不是刷新整个页面。 SPA 加载较小的 JSON 文件而不是新页面。 JSON文件保证更快的加载速度和效率。 它可以立即访问页面的所有特性和功能，没有任何延迟。 这是一个巨大的优势，因为网站的加载时间可以显着影响收入和销售。

SPA 通过立即提供页面上的所有信息来实现平稳过渡。 该网站不需要更新，因此其流程比典型的在线应用程序更高效。

此外，对于 SPA，HTML、CSS 和脚本等资产 爪哇岛 它们在应用程序的生命周期中只会被获取一次。 仅来回交换必要的数据。

由于缓存和减少的数据量，具有 SPA 的页面还允许用户更快地导航。 仅来回传输必要的数据，并且仅下载更新内容的缺失部分。

3. 使用 Chrome 进行调试
   调试可检测并消除导致性能下降的 bug、错误和 Web 应用程序安全漏洞。 使用 Chrome 开发者工具可以轻松调试 SPA。 开发人员可以从浏览器控制 JS 代码的渲染，调试 SPA，而无需筛选多行代码。

SPA 构建在 JavaScript 框架（例如 AngularJS 和 React 开发人员工具）之上，使它们更容易使用 Chrome 浏览器进行调试。

开发人员工具允许开发人员了解浏览器如何从服务器请求数据、缓存数据以及如何显示页面元素。 此外，这些工具允许开发人员监视和分析页面元素、网络操作和相关数据。

4. 快速发展
   在开发过程中，SPA的前端和后端可以分离，允许两个或多个开发人员并行工作。 改变前端或后端不会影响另一端，从而促进更快的开发。

开发人员可以重用服务器端代码并​​将 SPA 与前端 UI 分开。 SPA 中的解耦架构将前端显示和后端服务分开。 这使得开发人员能够改变观点、构建和实验，而不会影响内容或担心后端技术。 然后，客户可以使用这些应用程序获得一致的体验。

5. 改善用户体验
   通过 SPA，用户可以立即访问已查看的页面以及所有内容。 这更方便，因为用户可以舒适、无缝地滚动。 感觉就像使用本机桌面或移动应用程序。

SPA 提供积极的用户体验，具有独特的开头、中间和结尾。 此外，用户无需单击多个链接即可访问所需内容，就像在 MPA 中一样。 当用户即时访问信息时，您会体验到较低的跳出率，这与 MPA 不同，在 MPA 中，用户会因为页面需要花费大量时间来加载而感到沮丧。 由于页面元素被重用，导航速度也更快。

6. 转换为 IOS 和 Android 应用程序
   希望过渡到 iOS 和 Android 应用程序的开发人员应该使用 SPA，因为它们相对更容易转换。 他们可以使用相同的代码从 SPA 切换到移动应用程序。 由于整个代码是在单个实例中提供的，因此 SPA 易于导航，使其成为移动应用程序的理想选择。
7. 跨平台兼容性
   开发人员可以使用单一代码库构建可以在任何设备、浏览器和操作系统上运行的应用程序。 这增强了消费者体验，因为他们可以在任何地方使用 SPA。 它还使开发人员和 DevOps 工程师能够在开发内容编辑应用程序的同时构建功能丰富的应用程序，包括实时分析。

缺点

尽管单页应用程序具有所有优点，但使用 SPA 框架时会出现一些缺点。 幸运的是，人们正在努力通过 SPA 来克服这些问题。 以下是一些缺点；

1. 搜索引擎优化 (SEO)
   人们普遍认为单页应用程序不太适合搜索引擎优化。 大多数搜索引擎（例如 Google 或 Yahoo）暂时无法抓取基于 Ajax 与服务器交互的 SPA 网站。 因此，大多数 SPA 网站仍未建立索引。 目前，Google 机器人已学会如何使用 JavaScript 而不是常规 HTML 来索引 SPA 网站，这会损害排名。

尝试将 SEO 融入到现成的 SPA 网站中具有挑战性且成本高昂。 开发人员必须构建一个单独的网站，由搜索引擎服务器呈现，效率低下，并且涉及大量额外代码。 也可以使用其他技术，例如特征检测和预渲染。 在 SPA 设施中，每个页面的单个 URL 限制了 SPA 的 SEO 功能。

2. 后退和前进按钮导航
   浏览器保存信息以帮助网页快速加载。 当消费者点击后退按钮时，大多数人希望页面处于与上次查看时类似的状态，并且转换会很快发生。 传统的 Web 架构通过使用网站和相关资源的缓存副本来实现这一点。 然而，在 SPA 的简单实现中，按后退按钮与单击链接具有相同的效果。 导致服务器请求、延迟增加以及可见的数据更改。

为了满足用户期望并提供更快的体验，SPA 开发人员必须使用 JavaScript 模仿本机浏览器的功能。

3. 滚动位置
   浏览器存储诸如访问页面的最后滚动位置之类的信息。 但是，用户可能会发现在使用浏览器的后退和前进按钮导航 SPA 时滚动位置发生了变化。 例如，在 Facebook 上，有时用户会滚动回到上次滚动的位置，但有时却不会。 这会导致用户体验不佳，因为他们必须手动恢复滚动回到之前的滚动位置。

为了解决这个问题，开发人员需要提供代码来保存、检索并在用户来回滚动时提示正确的滚动位置。

4. 网站分析
   通过向页面添加分析代码，用户可以跟踪页面的流量。 然而，SPA 使得很难确定哪些页面或内容最受欢迎，因为它只是一个页面。 您需要提供额外的分析代码来跟踪查看伪页面。
5. 安全问题
   SPA 更容易通过以下方式受到损害 跨站脚本。 它们允许消费者下载整个应用程序，使他们有更多机会通过逆向工程发现漏洞。 为了解决这个问题，开发人员必须确保与Web应用程序安全相关的所有客户端逻辑（例如身份验证和输入验证）在服务器上加倍进行验证。 此外，开发人员必须提供有限的基于角色的访问。

总结

单页应用程序标志着应用程序体验发展的下一步。 它们更快、更直观，并且可以与定制等高级功能集成。 这就是为什么拥有许多并发用户的最佳公司（例如 Gmail、Netflix 或 Facebook 的新闻源）依赖于单页面架构。 通过实施这项技术，企业可以从其在线资产中获得更多价值，并在数字业务方面取得新的进展。

Ercole Palmeri