當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2023/12/20 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了单页应用的优缺点_单页和多页应用程序之间的优缺点小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

單頁應(yīng)用的優(yōu)缺點(diǎn)

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.

當(dāng)前，有兩種構(gòu)建網(wǎng)站的方式：作為多頁應(yīng)用程序 (MPA)或作為單頁應(yīng)用程序 (SPA)。 SPA更現(xiàn)代，但這不會(huì)使MPA失效。單頁和多頁應(yīng)用程序之間的決定取決于業(yè)務(wù)目標(biāo)和未來的體系結(jié)構(gòu)。

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

這里有一些單頁和多頁應(yīng)用程序的優(yōu)缺點(diǎn)。

什么是單頁應(yīng)用程序？ (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可在瀏覽器中使用，不需要重新加載頁面，也無需等待額外的時(shí)間。由于內(nèi)容是自動(dòng)下載的，因此無需更新頁面。 Facebook，Gmail，Twitter，Google Drive甚至GitHub是單頁應(yīng)用程序的絕佳示例。

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作為構(gòu)建響應(yīng)式應(yīng)用程序的基礎(chǔ)。 Angular，React和Vue等JavaScript框架負(fù)責(zé)處理單頁應(yīng)用程序的客戶端。

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

現(xiàn)在，讓我們更深入地研究SPA，并考慮這種開發(fā)方法的利弊。

單頁應(yīng)用程序的優(yōu)點(diǎn) (Advantages of Single-Page Applications)

更快響應(yīng) (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.

由于單頁應(yīng)用程序不更新整個(gè)頁面，而是僅更新所需的內(nèi)容，因此它們可以顯著提高網(wǎng)站的速度。在應(yīng)用程序的整個(gè)生命周期中，大多數(shù)資源僅加載一次。僅數(shù)據(jù)來回傳輸。這是一個(gè)很大的優(yōu)勢(shì)，根據(jù)Google的研究，如果頁面加載所需的時(shí)間超過200毫秒，則可能會(huì)對(duì)業(yè)務(wù)和銷售產(chǎn)生重大影響。

更好的緩存功能 (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.

單頁應(yīng)用程序可以有效地緩存任何本地?cái)?shù)據(jù)。 SPA僅向服務(wù)器發(fā)送一個(gè)請(qǐng)求，然后存儲(chǔ)其接收的所有數(shù)據(jù)。然后，它可以使用此數(shù)據(jù)，甚至可以脫機(jī)工作。如果用戶連接性較差，則在允許連接時(shí)可以將本地?cái)?shù)據(jù)與服務(wù)器同步。

簡(jiǎn)單，線性的用戶體驗(yàn) (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為用戶提供簡(jiǎn)單的線性體驗(yàn)。這些Web應(yīng)用程序包含清晰的開頭，中間和結(jié)尾。使用SPA時(shí)，滾動(dòng)方便且不間斷；無需點(diǎn)擊無盡的鏈接。 SPA的滾動(dòng)特性使其非常適合移動(dòng)用戶。

使用Chrome輕松調(diào)試 (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調(diào)試SPA很容易，因?yàn)榇祟悜?yīng)用是在AngularJS Batarang和React開發(fā)人員工具等框架上開發(fā)的。這些框架都有自己的Chrome開發(fā)人員工具，這些工具比MPA調(diào)試起來容易得多。此外，SPA允許您監(jiān)視網(wǎng)絡(luò)操作并調(diào)查頁面元素和與之相關(guān)的數(shù)據(jù)。

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

但是，SPA具有所有優(yōu)點(diǎn)，但您也應(yīng)考慮一些缺點(diǎn)。讓我們看看它們。

單頁應(yīng)用程序的缺點(diǎn) (Disadvantages of Single-Page Applications)

最差的SEO優(yōu)化 (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.

有人認(rèn)為SPA提供的SEO優(yōu)化效果不佳。這是因?yàn)閱雾搼?yīng)用程序在JavaScript上運(yùn)行，并根據(jù)客戶端的請(qǐng)求下載數(shù)據(jù)。該URL并沒有真正改變，并且不同的頁面沒有其唯一的URL地址。由于搜索機(jī)器人無法掃描大多數(shù)頁面，因此很難為搜索引擎優(yōu)化這些網(wǎng)站。

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推出了一項(xiàng)新計(jì)劃，以提高單頁面應(yīng)用程序SEO優(yōu)化。 Google現(xiàn)在為動(dòng)態(tài)頁面編制索引。但是為此，開發(fā)人員需要確保Google可以為其JavaScript文件建立索引(因?yàn)镚oogle在其搜尋器中運(yùn)行它們)。他們還需要驗(yàn)證網(wǎng)站是否在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.

當(dāng)訪客在各州之間跳轉(zhuǎn)時(shí)，SPA不會(huì)保存。這意味著，當(dāng)用戶單擊“后退”按鈕時(shí)，他們將不會(huì)后退。瀏覽器僅將用戶帶到上一頁，而不帶用戶到應(yīng)用程序中的上一個(gè)狀態(tài)。

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.

為了解決這個(gè)問題，開發(fā)人員可以使用HTML5 History API為其SPA框架配備設(shè)備。 History API使開發(fā)人員可以通過JavaScript訪問瀏覽器導(dǎo)航歷史記錄。

何時(shí)使用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應(yīng)用程序非常適合構(gòu)建具有小數(shù)據(jù)量的動(dòng)態(tài)平臺(tái)。此外，單頁應(yīng)用程序非常適合作為未來移動(dòng)應(yīng)用程序開發(fā)的基礎(chǔ)。這種開發(fā)方法的主要缺點(diǎn)是SEO優(yōu)化不佳。但是，此架構(gòu)非常適合SaaS平臺(tái)，社交網(wǎng)絡(luò)和搜索引擎優(yōu)化無關(guān)緊要的封閉社區(qū)。另一方面，如果項(xiàng)目需要有效的SEO，則應(yīng)使用多頁應(yīng)用程序。

什么是多頁應(yīng)用程序？ (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.

相對(duì)而言，多頁網(wǎng)站是一個(gè)更復(fù)雜的網(wǎng)站，包含多個(gè)不同的頁面，例如電子商務(wù)商店(如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是在線商店的主要示例，它由具有靜態(tài)信息的多個(gè)頁面組成，例如：文本，圖像以及指向其他頁面的多個(gè)鏈接。多頁應(yīng)用程序以傳統(tǒng)方式工作，并且由于必要而非常龐大。由于它們包含的內(nèi)容量，多頁面應(yīng)用程序通常處于許多層次，具有許多鏈接和復(fù)雜的界面。像eBay這樣的MPA可以由許多微型網(wǎng)站和小節(jié)組成，以細(xì)分內(nèi)容并允許多個(gè)入口點(diǎn)。

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.

建立多頁網(wǎng)站的主要技術(shù)是HTML和CSS。為了提高速度并減少負(fù)載，許多開發(fā)人員使用JavaScript和jQuery。

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

在選擇這種開發(fā)方法之前，讓我們看一下構(gòu)建多頁應(yīng)用程序的主要優(yōu)點(diǎn)和缺點(diǎn)。

多頁應(yīng)用程序的優(yōu)點(diǎn) (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上更好，因?yàn)樵摷軜?gòu)是搜索引擎爬蟲的本機(jī)架構(gòu)。由于有多個(gè)頁面和不斷變化的內(nèi)容，此類應(yīng)用程序可更好地控制SEO。此外，開發(fā)人員可以將meta標(biāo)簽添加到每個(gè)頁面。 MPA可以為不同關(guān)鍵字排名提供更好的機(jī)會(huì)，因?yàn)榭梢葬槍?duì)每頁一個(gè)關(guān)鍵字優(yōu)化應(yīng)用程序。

無限的可擴(kuò)展性 (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允許您創(chuàng)建新內(nèi)容并將其放置在新頁面上。多頁面應(yīng)用程序可以根據(jù)需要包含盡可能多的產(chǎn)品或服務(wù)信息，而沒有頁面限制。單頁應(yīng)用程序不允許在一頁上包含許多功能，這可能導(dǎo)致更長的加載時(shí)間。因此，當(dāng)公司需要更多功能時(shí)，他們決定使用多頁應(yīng)用程序。

通過分析獲得更好的見解 (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可以為許多分析提供有關(guān)網(wǎng)站性能的有價(jià)值的信息：哪些功能有效，哪些功能無效。使用單頁應(yīng)用程序，您可以收集的唯一有用信息是訪問者是誰，以及他們?cè)诰W(wǎng)站上停留的時(shí)間。

多頁面應(yīng)用程序的缺點(diǎn) (Disadvantages of Multi-Page Applications)

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

除了優(yōu)點(diǎn)之外，構(gòu)建多頁面應(yīng)用程序還有一些相當(dāng)大的缺點(diǎn)。讓我們考慮一下。

較慢的速度和整體性能 (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.

對(duì)于多頁應(yīng)用程序，服務(wù)器需要在每次交互時(shí)重新加載大多數(shù)資源，例如HTML，CSS和腳本。當(dāng)加載另一個(gè)頁面時(shí)，瀏覽器會(huì)完全重新加載頁面數(shù)據(jù)并再次下載所有資源，甚至包括在所有頁面中重復(fù)的組件(例如頁眉和頁腳)。這會(huì)對(duì)速度和性能產(chǎn)生負(fù)面影響。

難以維護(hù)和更新 (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.

維護(hù)和更新多個(gè)頁面可能會(huì)很痛苦，而且隨著網(wǎng)站變得更大，事情只會(huì)變得更糟。另外，維護(hù)安全性可能會(huì)帶來問題，因?yàn)殚_發(fā)人員需要保護(hù)每個(gè)單獨(dú)的頁面。單頁應(yīng)用程序允許開發(fā)人員僅保護(hù)數(shù)據(jù)端點(diǎn)。

何時(shí)使用多頁應(yīng)用 (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.

多頁應(yīng)用程序適合于具有大量產(chǎn)品或服務(wù)，需要大量功能和多個(gè)菜單的大型公司。 MPA更適合在線商店，商業(yè)網(wǎng)站，目錄和市場(chǎng)。經(jīng)營這些網(wǎng)站的公司很可能也擁有不同的用戶群。簡(jiǎn)而言之，如果您要在網(wǎng)站上包含很多內(nèi)容和功能，或者要出售多種產(chǎn)品和服務(wù)，則MPA是更好的選擇。

百萬美元問題：您應(yīng)該使用哪個(gè)？ (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.

這真的取決于情況。每種體系結(jié)構(gòu)都有其優(yōu)缺點(diǎn)，非常適合于特定類型的項(xiàng)目和特定的業(yè)務(wù)目標(biāo)。

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