单页应用的优缺点_单页和多页应用程序之间的优缺点

Currently, there are two ways of building websites: as multi-page applications (MPAs) or as single-page applications (SPAs). SPAs are more modern, but that does not invalidate MPAs. The decision between a single-page and multi-page application depends on business goals and the future architecture.

当前，有两种构建网站的方式：作为多页应用程序 (MPA)或作为单页应用程序 (SPA)。 SPA更现代，但这不会使MPA失效。 单页和多页应用程序之间的决定取决于业务目标和未来的体系结构。

Here some of the pros and cons of single-page and multi-page applications.

这里有一些单页和多页应用程序的优缺点。

什么是单页应用程序？ (What’s a Single Page Application?)

A SPA works in the browser and requires no page reloads and no extra time for waiting. The page doesn’t need to be updated since content is downloaded automatically. Facebook, Gmail, Twitter, Google Drive, or even GitHub are excellent examples of single-page apps.

SPA可在浏览器中使用，不需要重新加载页面，也无需等待额外的时间。 由于内容是自动下载的，因此无需更新页面。 Facebook，Gmail，Twitter，Google Drive甚至GitHub是单页应用程序的绝佳示例。

SPAs use AJAX and HTML5 as the groundwork to build responsive apps. JavaScript frameworks such as Angular, React, and Vue are responsible for handling the client side for a single-page app.

SPA使用AJAX和HTML5作为构建响应式应用程序的基础。 Angular，React和Vue等JavaScript框架负责处理单页应用程序的客户端。

Now let’s dive a bit deeper into SPAs and consider the pros and cons of this development approach.

现在，让我们更深入地研究SPA，并考虑这种开发方法的利弊。

单页应用程序的优点 (Advantages of Single-Page Applications)

更快响应 (Faster and responsive)

Since single-page applications don’t update the entire page but only the required content, and so they significantly improve a website’s speed. Most resources are only loaded once throughout the lifespan of an application. Only data is transmitted back and forth. This is a great advantage, and according to Google research, if a page takes more than 200 milliseconds to load it can have a potentially high impact on business and sales.

由于单页应用程序不更新整个页面，而是仅更新所需的内容，因此它们可以显着提高网站的速度。 在应用程序的整个生命周期中，大多数资源仅加载一次。 仅数据来回传输。 这是一个很大的优势，根据Google的研究，如果页面加载所需的时间超过200毫秒，则可能会对业务和销售产生重大影响。

更好的缓存功能 (Better caching capabilities)

A single-page app can cache any local data effectively. A SPA sends only one request to a server and then stores all the data it receives. Then it can use this data and work even offline. If a user has poor connectivity, local data can be synchronized with the server when the connection allows.

单页应用程序可以有效地缓存任何本地数据。 SPA仅向服务器发送一个请求，然后存储其接收的所有数据。 然后，它可以使用此数据，甚至可以脱机工作。 如果用户连接性较差，则在允许连接时可以将本地数据与服务器同步。

简单，线性的用户体验 (Simple, linear user experience)

SPAs provide users with a simple linear experience. These web apps contain a clear beginning, middle, and end. With SPAs, scrolling is convenient and uninterrupted; there’s no need to click on endless links. The scrolling nature of SPAs makes them perfectly suited for mobile users.

SPA为用户提供简单的线性体验。 这些Web应用程序包含清晰的开头，中间和结尾。 使用SPA时，滚动方便且不间断； 无需点击无尽的链接。 SPA的滚动特性使其非常适合移动用户。

使用Chrome轻松调试 (Easy debugging with Chrome)

It’s easy to debug an SPA with Chrome since such apps are developed on frameworks like AngularJS Batarang and React developer tools. These frameworks have their own Chrome developer tools that make debugging much easier than with MPAs. In addition, SPAs allow you to monitor network operations and investigate page elements and data associated with them.

使用Chrome调试SPA很容易，因为此类应用是在AngularJS Batarang和React开发人员工具等框架上开发的。 这些框架都有自己的Chrome开发人员工具，这些工具比MPA调试起来容易得多。 此外，SPA允许您监视网络操作并调查页面元素和与之相关的数据。

But with all their benefits, SPAs also have some disadvantages that you should consider. Let’s take a look at them.

但是，SPA具有所有优点，但您也应考虑一些缺点。 让我们看看它们。

单页应用程序的缺点 (Disadvantages of Single-Page Applications)

最差的SEO优化 (Poorer SEO optimization)

Some people are of the opinion that SPAs provide poor SEO optimization. This is because single-page apps operate on JavaScript and download data on request from the client side. The URL doesn’t really change and different pages don’t have their unique URL addresses. It’s hard to optimize these websites for search engines since most pages can’t be scanned by search bots.

有人认为SPA提供的SEO优化效果不佳。 这是因为单页应用程序在JavaScript上运行，并根据客户端的请求下载数据。 该URL并没有真正改变，并且不同的页面没有其唯一的URL地址。 由于搜索机器人无法扫描大多数页面，因此很难为搜索引擎优化这些网站。

Recently, Google launched a new scheme to increase single-page app SEO optimization. Google now indexes dynamic pages. But for this, developers need to make sure that their JavaScript files can be indexed by Google (because Google runs them in their crawler). They also need to verify that a website uses HTML5 mode in the URL scheme.

最近，Google推出了一项新计划，以提高单页面应用程序SEO优化。 Google现在为动态页面编制索引。 但是为此，开发人员需要确保Google可以为其JavaScript文件建立索引(因为Google在其搜寻器中运行它们)。 他们还需要验证网站是否在URL方案中使用HTML5模式。

缺乏浏览器历史记录 (Lacking browser history)

An SPA doesn’t save when visitor’s jumps between states. This means that when users click the back button, they won’t go back. A browser only takes users to the previous page, not to the previous state in an app.

当访客在各州之间跳转时，SPA不会保存。 这意味着，当用户单击“后退”按钮时，他们将不会后退。 浏览器仅将用户带到上一页，而不带用户到应用程序中的上一个状态。

To combat this problem, there’s an HTML5 History API with which developers can equip their SPA frameworks. The History API offers developers access to browser navigation history via JavaScript.

为了解决这个问题，开发人员可以使用HTML5 History API为其SPA框架配备设备。 History API使开发人员可以通过JavaScript访问浏览器导航历史记录。

更多安全问题 (More Security issues)

Single-page apps are more vulnerable to cross-site scripting (XSS) attacks than are multi-page apps. Using XSS, hackers can inject client-side scripts into web applications.

单页面应用比多页面应用更容易受到跨站点脚本(XSS)攻击。 使用XSS，黑客可以将客户端脚本注入Web应用程序。

One security issue is the exposure of sensitive data. If developers aren’t careful about what data is contained in the initial page load, they can easily send data that shouldn’t be exposed to all users. The entirety of an SPA isn’t generally visible in the browser, which can provide a false sense of security.

一个安全问题是敏感数据的公开。 如果开发人员不关心初始页面加载中包含的数据，则他们可以轻松地发送不应暴露给所有用户的数据。 SPA的整体通常在浏览器中不可见，这可能会提供错误的安全感。

何时使用SPA (When to use an SPA)

Single-page web applications fit perfectly for building dynamic platforms with small data volumes. Furthermore, a single-page app is ideal as a base for future mobile app development. The main drawback of this development approach is poor SEO optimization. But this architecture is excellent for SaaS platforms, social networks, and closed communities where search engine optimization doesn’t matter. If a project requires effective SEO, on the other hand, then you should use a multi-page application.

单页Web应用程序非常适合构建具有小数据量的动态平台。 此外，单页应用程序非常适合作为未来移动应用程序开发的基础。 这种开发方法的主要缺点是SEO优化不佳。 但是，此架构非常适合SaaS平台，社交网络和搜索引擎优化无关紧要的封闭社区。 另一方面，如果项目需要有效的SEO，则应使用多页应用程序。

什么是多页应用程序？ (What’s a Multi-Page App?)

Comparatively, a multi-page website is a more complex website that contains multiple different pages like an eCommerce store such as Amazon or eBay.

相对而言，多页网站是一个更复杂的网站，包含多个不同的页面，例如电子商务商店(如Amazon或eBay)。

eBay is a prime example of an online store that consists of several pages with static information such as: text, images, and several links to other pages. Multi-page apps work in a traditional way and are extremely large out of necessity. Due to the amount of content they contain, multi-page apps are generally many levels deep with lots of links and intricate interfaces. An MPA like eBay can consist of many micro-websites and subsections to break down content and allow multiple entry points.

eBay是在线商店的主要示例，它由具有静态信息的多个页面组成，例如：文本，图像以及指向其他页面的多个链接。 多页应用程序以传统方式工作，并且由于必要而非常庞大。 由于它们包含的内容量，多页面应用程序通常处于许多层次，具有许多链接和复杂的界面。 像eBay这样的MPA可以由许多微型网站和小节组成，以细分内容并允许多个入口点。

The main technologies for building multi-page websites are HTML and CSS. To increase speed and reduce the load, many developers use JavaScript and jQuery.

建立多页网站的主要技术是HTML和CSS。 为了提高速度并减少负载，许多开发人员使用JavaScript和jQuery。

Before choosing this development approach, let’s look at the key advantages and disadvantages of building multi-page applications.

在选择这种开发方法之前，让我们看一下构建多页应用程序的主要优点和缺点。

多页应用程序的优点 (Advantages of Multi-Page Applications)

更好的SEO (Better SEO)

SEO is better on MPAs since the architecture is native to search engine crawlers. Such apps provide better control over SEO thanks to multiple pages and changing content. Moreover, developers can add meta tags to every page. An MPA gives a better chance of ranking for different keywords since an app can be optimized for one keyword per page.

SEA在MPA上更好，因为该架构是搜索引擎爬虫的本机架构。 由于有多个页面和不断变化的内容，此类应用程序可更好地控制SEO。 此外，开发人员可以将meta标签添加到每个页面。 MPA可以为不同关键字排名提供更好的机会，因为可以针对每页一个关键字优化应用程序。

无限的可扩展性 (Unlimited scalability)

MPAs allow you to create new content and place it on new pages. Multi-page apps can include as much information about products or services as required, with no page limitations. Single-page applications don’t allow a lot of features on one page, which can lead to longer loading times. Therefore, when company needs more features, they decide to use multi-page applications.

MPA允许您创建新内容并将其放置在新页面上。 多页面应用程序可以根据需要包含尽可能多的产品或服务信息，而没有页面限制。 单页应用程序不允许在一页上包含许多功能，这可能导致更长的加载时间。 因此，当公司需要更多功能时，他们决定使用多页应用程序。

通过分析获得更好的见解 (Better Insights from Analytics)

MPAs can provide lots of analytics with valuable information on how a website is performing: which features are working and which aren’t. With a single-page app, the only useful information you can collect is who visitors are and for how long they stay on the site.

MPA可以为许多分析提供有关网站性能的有价值的信息：哪些功能有效，哪些功能无效。 使用单页应用程序，您可以收集的唯一有用信息是访问者是谁，以及他们在网站上停留的时间。

多页面应用程序的缺点 (Disadvantages of Multi-Page Applications)

Along with the advantages there are some considerable disadvantages of building a multi-page app. Let’s consider them.

除了优点之外，构建多页面应用程序还有一些相当大的缺点。 让我们考虑一下。

较慢的速度和整体性能 (Slower speed and overall performance)

With multi-page apps, a server needs to reload most resources such as HTML, CSS, and scripts with every interaction. When loading another page, the browser completely reloads page data and downloads all resources again, even components that are repeated throughout all pages such as the header and footer. This negatively affects speed and performance.

对于多页应用程序，服务器需要在每次交互时重新加载大多数资源，例如HTML，CSS和脚本。 当加载另一个页面时，浏览器会完全重新加载页面数据并再次下载所有资源，甚至包括在所有页面中重复的组件(例如页眉和页脚)。 这会对速度和性能产生负面影响。

更多的开发时间 (More time for development)

Compared to SPAs, MPAs take longer to develop. In most cases, developers have to code the backend from scratch. There are also difficulties in frontend and backend separation since they interact very closely with each other. Developers need to use frameworks for both the frontend or backend. This results in longer app development.

与SPA相比，MPA需要更长的开发时间。 在大多数情况下，开发人员必须从头开始编写后端代码。 由于前端和后端之间的交互非常紧密，因此它们之间也存在困难。 开发人员需要为前端或后端使用框架。 这样可以延长应用程序的开发时间。

难以维护和更新 (Harder maintenance and updates)

Maintaining and updating multiple pages can be a pain, and things only get worse the bigger a website becomes. In addition, maintaining security may be problematic because developers need to secure each separate page. Single-page apps allow developers to just secure data endpoints.

维护和更新多个页面可能会很痛苦，而且随着网站变得更大，事情只会变得更糟。 另外，维护安全性可能会带来问题，因为开发人员需要保护每个单独的页面。 单页应用程序允许开发人员仅保护数据端点。

何时使用多页应用 (When to use a Multi-Page App)

A multi-page application is appropriate for large companies with a broad range of products or services that require lots of features and multiple menus. An MPA is more suitable for online stores, business sites, catalogs, and marketplaces. Companies running these sites most likely also have diverse user bases. To put it simply, if you have a lot of content and features to include on your website or if you are selling multiple products and services, an MPA would be the better choice.

多页应用程序适合于具有大量产品或服务，需要大量功能和多个菜单的大型公司。 MPA更适合在线商店，商业网站，目录和市场。 经营这些网站的公司很可能也拥有不同的用户群。 简而言之，如果您要在网站上包含很多内容和功能，或者要出售多种产品和服务，则MPA是更好的选择。

百万美元问题：您应该使用哪个？ (Million Dollar Question: Which should you use?)

It really depends on the situation. Each architecture has its pros and cons and is well suited to a particular type of project and specific business goals.

这真的取决于情况。 每种体系结构都有其优缺点，非常适合于特定类型的项目和特定的业务目标。