This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact
Single Page Application (SPA)
Spa is a single-page application, where the content requested is only a small portion of the page and most of the rest is the same content. The common resources of the page are not reloaded, only the different parts are loaded, saving browser resources. It is usually used in conjunction with vue-Router, which helps us configure routes.
The principle of
Js is aware of url changes, which allows you to dynamically clear the content of the current page with JS, and then mount the content of the next page to the current page. At this time the routing is no longer back-end to do, but the front end to do, determine the page display corresponding components, clear unnecessary.
The advantage of a single page application is fast page switching. There is no need to deal with HTML file requests every time the page switches, which saves a lot of HTTP latency, so we can switch pages quickly
Disadvantage is the first screen time slightly slow, SEO poor. Because the first screen requires an HTML request and a JS request, the first screen will not be displayed until the two requests come back. Compared to multi-page apps, the first screen takes a little longer.
SEO effect is poor because search engines only know HTML inside the same, do not know the CONTENT generated by JS rendering, the search engine does not recognize, it will not give a good ranking, will lead to a single page application to make the web page in the search engine ranking poor.
MPA (Multi-page Application)
Mpa is a multi-page application. At the beginning, we learned the mode used in the front end. Every time a page jumps, the whole page will be refreshed
The advantage of multi-page application is fast first screen time, GOOD SEO effect; The first screen time is the time it takes for the page to first load the content displayed on the user’s monitor. When we visit the page, the server returns an HTML and the page is displayed. This process takes only one HTTP request, so the display is faster than a single page application
The disadvantage is that the web page switch is slow, each jump needs to send an HTTP request, if the network status is not good, when jumping back and forth between pages, there will be obvious lag, affecting the user experience.
conclusion
| / | Single page Application (SPA) | Multi-page application (MPA) |
|---|---|---|
| Application form | A shell page and multiple page fragments are composed of | Multiple complete pages constitute |
| Jump way | A page fragment is deleted or hidden, and another page fragment is loaded and displayed. Simulated jumps between fragments without leaving the shell page | A jump between pages is from one page to another |
| Whether public resources are reloaded after the jump | no | is |
| URL patterns | http://xxx/shell.html#page1andhttp://xxx/pshell.html#page2 | http://xxx/page1.htmlandhttp://xxx/page2.html |
| The user experience | Fast switching between page fragments and good user experience, including mobile devices | Switching between pages is slow and not smooth, resulting in poor user experience, especially on the mobile terminal |
| Can realize transition animation | Easy to implement | no |
| Data is passed between pages | Pages pass data easily (vuexorvueParent/child component communication in |
Rely onURL,cookieOr localstorage, relatively troublesome |
| Search Engine Optimization (SEO) | Separate protocol required (SSR) | You can just do it |
| Scope of special application | Demanding experience, especially on mobile | Need a search engine friendly site |
| The development of the difficulty | A specialized framework is required to reduce the difficulty of development of this pattern | Lower, frame selection is easy |
Reference article:
SPA (single-page application) and MPA (multi-page application)