“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”
The concept of single-page apps came with frameworks like AngularJS, React, and Vue. In a multi-page application, the server returns an HTML file each time you jump, whereas a single-page application does not, and each time you click on a jump link, the single-page application uses the ability to partially refresh the page.
1. Multi-page applications
Multi-page jump Refreshes all resources. Each public resource (JS, CSS, etc.) needs to be selectively reloaded.
Application scenarios
Often used in apps or clients
The advantages and disadvantages
Advantages: fast first screen time, good SEO effect. Disadvantages: Slow page switching.
Second, single page application
An application with only one Web page is a rich client loaded from a Web server. Only partial resources are refreshed when hopping to a single page. Common resources (JS, CSS, etc.) need to be loaded only once. Page rendering is realized by JS dynamic rendering.
Application scenarios
It is often used in PC official website, shopping and other websites
The advantages and disadvantages
Advantages: Fast page switching. Disadvantages: slow first screen time, poor SEO.
There are other technologies available in Vue, such as server-side rendering, that can perfectly solve problems in single-page applications. So for the front end, a single page application is a perfect page development solution.
Three, contrast
Other differences between single-page apps and multi-page apps can be found in the following table:
| Single page application | Multi-page application | |
|---|---|---|
| composition | A shell page and multiple page fragments | Multiple complete pages constitute |
| Resource sharing (CSS, JS) | Shared, only need to load in the shell part | No, each page needs to be loaded |
| Refresh the way | Partial page refresh or change | A full page refresh |
| Url patterns | a.com/#/pageone a.com/#/pagetwo | a.com/pageone.html a.com/pagetwo.html |
| The user experience | Switching between page fragments is fast and user experience is good | Page switching loading is slow, the fluency is not enough, and the user experience is poor |
| Page jump animation | Easy to implement | Unable to realize |
| The data transfer | easy | Depend on URL parameter transfer, cookie, localStorage, etc |
| Search Engine Optimization (SEO) | It requires a separate scheme and is difficult to implement, which is not conducive to SEO retrieval using server-side rendering (SSR) optimization | Simple implementation method |
The last
This article introduces single-page apps and multi-page apps and the differences between them. If this article helped you, please like it and click github.com/skyblue309. I have other columns, welcome to read ~ Vue from giving up to getting started playing with the beauty of CSS in simple JavaScript
Later more text plan
- Asynchronous progression and event loop stuff
- Grid layout principle and actual combat
- Will VW and VH layouts be a new trend?