单页应用程序：它是什么以及它实际上如何工作？

你的名字 2023-10-04 13:53 30阅读 0赞

## **单页应用程序：它是什么以及它实际上如何工作？** ##

2020年12月28日通过吉加尔·米斯特里（Jigar Mistry）

你在这里：

单[块][Link 1]/ [Web开发][Web]/单页应用程序：它是什么以及它实际上如何工作？

![单页应用程序：它是什么以及它实际上如何工作？][format_png]

我们习惯于上网并且手里拿着电话，以至于我们甚至都没有停止思考哪种类型的技术正在帮助我们运行该应用程序。但是，当您必须决定为公司创建应用程序时，理解**单个页面应用程序的**含义是有益的。

单页应用程序是一种出色的工具，可为您的用户提供令人惊奇的独特和引人入胜的体验。也可以将您的[SPA与正确的CMS][SPA_CMS]配对[，][SPA_CMS]以使开发人员和营销人员都能获得所需的控制级别。现在，让我们了解一下该工具的全部含义以及获得高流量的好处。

表中的内容

### **什么是单页应用程序？** ###

一个**单页的应用程序（SPA）**是一个应用程序，通过大力重写现有的网页从Web服务器的新的数据，而不是运行一个完全新的页面浏览器的默认用户技术相互联系。目的是进行更快的过渡，使站点更像是固有的应用程序。

在SPA中，所有必需的HTML，JavaScript和CSS代码都可以由浏览器恢复，也可以由适当的资源恢复，然后根据需要将这些资源可靠地加载并添加到页面中。这通常是在响应用户的操作时发生的。

尽管可以使用**HTML5历史API**或位置哈希值来提供Web应用程序中不同逻辑页面的可导航性和感知能力，但是该页面不会在过程中的任何给定点重新加载，也不会将控件转移到其他页面。

您可能会想到以下问题：“您需要Web应用程序或网站吗？” 通过[**网络应用程序与网站的比较**][Link 2]，我们可以估算出，如果您经营一家小公司，则只需要一个小册子或精品网站即可简洁地传达您的品牌。而且，如果您经营一家受欢迎的企业，则必须拥有一个量身定制的网站才能向您的客户展示您的服务或产品。

#### **单页应用程序如何工作？** ####

![单页应用程序如何工作？][format_png 1]

单页应用程序体系结构非常简单。它包含服务器端和客户端技术，如下图所示，可以选择三个选项：

1.  **服务器端渲染（SSR）**
    
     *  浏览器指示来自服务器的HTML文件请求。
     *  服务器获取所有所需的数据，提取应用程序，并即时生成应用程序的HTML文件。
     *  用户看到可访问的内容。
     *  单页应用程序框架是与事件相邻，创建虚拟DOM并执行其他操作的框架。
     *  该应用程序可以使用了。
    
    服务器端呈现可以选择，因为它可以关联单页Web应用程序的及时性，并且不会使用户的浏览器超载，从而使应用程序快速运行。
2.  **客户端渲染（CSR）**
    
     *  浏览器引导来自服务器的HTML文件请求。
     *  服务器使用简单的HTML文件以及链接的脚本和样式快速答复。
     *  在执行JavaScript时，用户会看到空白页或某些加载程序图像。
     *  应用程序获取数据，生成视图，然后将其插入DOM。
     *  该应用程序可以使用了。
    
    对于外观简单的网站，这可能是一种替代方法，但是您必须记住，在客户端解释数据会涉及设备中的许多资源，这可能会使用户的浏览器超负荷运行。结果，与所有三个替代方案相比，该选择可能被证明是缓慢的。
    
    另外，如果您的网站流量很高，则CSR是更可取的，因为CSR可以将信息传递给用户，而无需与服务器进行大量交谈。此外，如果您需要替代社交共享，请记住，CSR中的所有页面通常都具有相似的打开图和值，因此您必须使用服务器端呈现或静态网站生成器。
3.  **静态网站生成器（SSG）**
    
     *  浏览器指示来自服务器的HTML文件请求。
     *  然后，服务器使用先前组织的HTML文件快速答复。
     *  用户看到该页面。
     *  该应用程序绘制数据，产生视图并将其插入DOM。
     *  该应用程序可以使用了。
    
    它被认为是快速且不错的选择，但是请记住，如果您的站点上有活动内容，则静态站点生成器（SSG）并不是您的最佳支持，因为它们更多地集中在静态页面上。

### **单页应用程序框架** ###

几个框架具有不同的工作背景，但是单页Web应用程序的前三个框架是React，Angular和Vue。要开发单页应用程序，您需要HTML5和AJAX来形成响应页面，而React，Angular和Vue负责管理SPA客户端的“繁重任务”。

1.  #### **React.js和单页应用程序** ####
    
    React.js**由Facebook**在**2013**年开发，是一个JavaScript库。他们在整个产品线中全面采用了它，包括著名的单页Web应用程序，如Facebook本身，WhatsApp和Instagram。此外，Uber还为其产品利用了React.js库。
    
    在这三个SPA框架中，React在GitHub上贡献了最多的人员，这有助于保持开发人员团队每天面临的多项任务的最新状态。
    
    对于那些刚开始使用JavaScript前端框架的人以及灵活的初创公司和开发人员，React是一个合适的选择。React提供了与其他几种框架和技术的有价值的集成选择，当您在具有巨大环境的项目中工作时，这将非常有帮助。
2.  #### **角和单页应用程序** ####
    
    Angular是**Google在2010**年发明的，它是一个JavaScript框架。在这三个选项中，Angular是最古老的。它基于TypeScript。由于TypeScript，Angular是供庞大的开发团队使用的绝佳选择，并且一些企业已经在其他可用产品中采用了该技术。
    
    与其他框架相比，它更加成熟，并且在GitHub上有大量的贡献者。在其单页应用程序中使用Angular的消费者包括Google及其产品，例如Google Drive，Gmail和Wix。
3.  #### **Vue.js和单页应用程序** ####
    
    Vue是**由前Google成员Evan You于2014年成立**的三个单页应用程序框架中的最新框架。尽管没有大型机构支持其发展，但Vue的知名度不断提高。目前，百度，GitLab和阿里巴巴等公司都采用Vue.js来满足他们的要求。
    
    如果您喜欢前端框架的灵活性和简单性，那么Vue.js是一个更好的选择。而且，它是所有三个框架中最轻量的。

#### **单页应用程序示例** ####

大多数SPA是在React和Angular等框架上开发的。以下是SPA的一些突出示例：

1.  **Netflix公司**
    
    流行的娱乐流媒体服务采用React框架，以允许其用户无缝访问电视机和电影，而不会遇到很大的延迟。如果您观察到Netflix上正在流传输的数据量以及有多少用户，则可以说Netflix的SPA方法充分利用了该方法的优势。
2.  **Facebook**
    
    Facebook的新闻提要是单页Web应用程序的一个实例。当您滚动浏览过去的视频或单击各种按钮时，页面上将加载精确的内容块。您不必离开页面即可体验。
3.  **的Gmail**
    
    当您单击收件箱中的消息时，浏览器将保留在同一网页上。 *“对于前三个导航页面，该应用程序将位于相同的URL上，并在单击时大力添加新颖的内容，” WhiteHat Security的安全经理Jeannie Warner说。*

### **单页应用程序的优点** ###

![单页应用程序的优点][format_png 2]

1.  #### **缓存能力** ####
    
    单页应用程序可以有效地缓存本地数据。SPA仅将一个请求定向到服务器，然后将其获取的所有数据存储起来。然后，即使处于脱机状态，它也可以利用这些数据和功能。如果任何用户的连接性降低，只要连接允许，就可以将本地数据与服务器同步。
2.  #### **快速且容易接受** ####
    
    由于单页应用程序不更新整个页面，而仅更新基本内容，因此它们可以有意义地提高网站的速度。在应用程序运行期间，大多数资源（CSS / HTML /脚本）仅被加载一次。仅数据来回传送。
    
    这是一个巨大的好处，并且根据Google的一项研究，如果一个页面需要200毫秒以上的加载时间，那么它可能会对销售和业务产生很高的印象。
3.  #### **使用Chrome进行调试** ####
    
    使用Chrome调试SPA很容易，因为这些[应用程序是基于Angular和React][Angular_React]开发人员工具[等框架构建的][Angular_React]。此类框架具有其Chrome开发人员工具，与**多页**应用程序（MPA）相比，可以使调试更加轻松。此外，SPA允许您观察网络过程并检查与之连接的页面元素和数据。
4.  #### **线性用户体验** ####
    
    SPA为用户提供了轻松的线性体验。例如，诸如Saucony的这些Web应用程序包含一个完美的开始，中间和结束。Saucony Web应用程序开发利用视差滚动以及惊人的过渡和效果来显示整个客户旅程，从而提供了出色的交互式用户体验。
    
    使用SPA时，滚动是合适且连续的；无需单击无限链接。当然，SPA的滚动特性使其非常适合习惯于滚动的移动用户。

### **单页应用程序的缺点** ###

![单页应用程序的缺点][format_png 3]

但是，尽管具有上述所有单页应用程序的优点，但它也具有一些必须考虑的缺点。让我们了解它们：

1.  #### **浏览器历史记录** ####
    
    SPA不能保存访客在各州之间的跳转。这是指当用户单击“后退”按钮时，他们不会后退的事实。浏览器只是将用户带到上一页，而不是应用程序中的上一个状态。
    
    要解决此问题，开发人员可以使用HTML5 History API来准备SPA框架。History API通过JavaScript框架向开发人员提供对浏览器导航历史记录的访问。
2.  #### **SEO优化** ####
    
    一些人认为SPA减少了SEO优化。这就是单页应用程序可以在JavaScript上运行并根据请求从客户端下载数据的原因。该URL肯定不会更改，并且不同的页面没有其特殊的URL地址。由于搜索引擎无法扫描大多数页面，因此很难为搜索引擎优化网站。
    
    近期，Google推出了一种新颖的方案来激增单页应用程序SEO优化。Google当前为活动页面编制索引。为此，开发人员必须确保JavaScript文件可以在其搜寻器中执行时通过Google进行索引。它还要求网站在URL安排中使用HTML5模式。
3.  #### **安全问题** ####
    
    与多页面应用程序相比，单页面应用程序受到的**跨站点脚本（XSS）**攻击的保护较少。利用XSS，黑客可以将客户端脚本插入Web应用程序。一个安全问题是敏感数据的泄露。如果开发人员对初始页面加载中包含的数据不谨慎，则他们可以发送不应该向所有用户公开的数据。
    
    完整的SPA方法通常在浏览器中不可见，这可能会带来不真实的安全感。SPA可能不安全的另一个原因是在操作级别上没有访问控制。由于开发人员将特性和逻辑从服务器移出并移交给客户端，因此很容易向客户端提供对不应被允许使用的功能的访问权限。

### **经常问的问题** ###

#### **单页应用程序的示例是什么？** ####

单页应用程序是一种令人难以置信的工具，可为用户创造引人入胜的卓越体验。单页应用程序的一些示例包括Google Maps，Gmail，Netflix，Airbnb，Paypal，Pinterest，还有更多使用SPA来开发流畅和可扩展的体验的示例。

#### **单页应用程序的优势是什么？** ####

单页应用程序的主要优点是它的速度。大多数资源需要HTML，CSS和脚本，并在应用程序启动时加载，并且在练习期间不需要重新加载。改变的是往返于服务器的数据。结果，该应用程序很容易接受用户查询，而不必暂停以进行客户端与服务器之间的通信。

#### **什么是单页应用程序？** ####

单页应用程序是通过使用来自服务器的新颖数据来健壮地重写现有网页，而不是浏览器加载完整新页的默认技术，从而与用户建立联系的应用程序。

### **结论** ###

**单页应用程序**无缝适合开发具有少量数据的强大平台。此外，单页应用程序非常适合作为未来移动和Web应用程序开发的基础。SPA通过尝试在浏览器中复制自然设置来提供出色的用户体验-无需重新加载页面，也无需额外的等待时间。

对于社交网络，SaaS平台和搜索引擎优化无关紧要的封闭社区，这种模式非常出色。

[Link 1]: https://www.monocubed.com/
[Web]: https://www.monocubed.com/web-development/
[format_png]: https://img-blog.csdnimg.cn/img_convert/da4caf7c54a11953754ae55230b08c8b.webp?x-oss-process=image/format,png
[SPA_CMS]: https://www.bloomreach.com/en/resources/whitepapers/how-to-use-single-page-applications-with-a-cms.html
[Link 2]: https://www.monocubed.com/web-app-vs-website/
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/3f771c6736adc03cfe6a8048cbf05c11.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/81a886370074d747697d30dc14852546.webp?x-oss-process=image/format,png
[Angular_React]: https://www.monocubed.com/websites-built-with-angular/
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/b17fea53534c75760a620369c55cab64.webp?x-oss-process=image/format,png