單頁應用的優缺點

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.

這真的取決于情況。 每種體系結構都有其優缺點，非常適合于特定類型的項目和特定的業務目標。

翻譯自: https://levelup.gitconnected.com/pros-and-cons-between-single-page-and-multi-page-apps-8f4b26acd9c9

單頁應用的優缺點

總結

以上是生活随笔為你收集整理的单页应用的优缺点_单页和多页应用程序之间的优缺点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。