Preface: When the interviewer asks this question, we have to answer from three dimensions:
1. What is MPA and SPA
2. The advantages and disadvantages of MPA and SPA
3. In what scenarios will we use these two
(Note: The possible extended interview questions for the content are displayed in the form of hyperlinks, click on the blue font to view!!)
Don’t worry about the interview, pay attention to the representatives of the front-end class, aha~
Both MPA and SPA are the abbreviations of some front-end engineering development concepts, representing two completely opposite development models and user experience. MPA refers to multi-page application, and SPA refers to single-page application.
MPA multi-page application (referring to a website with multiple pages, corresponding to multiple actual HTML files, accessing each page needs to go through a complete page request process) Advantages: 1. The first screen loads quickly (due to the
first
screen When loading, it corresponds to an HTML file. In the case of image loading and additional CSS, the content rendering speed of this mode is the fastest) 2. It is friendly to SEO and is conducive to crawling by search engines (
about SEO, in addition to the three elements of webpage TKD we know, the content of the webpage is also a key factor for inclusion. For multi-page applications, the content of the webpage is located in the body of the HTML file) 3. It is easy to combine with the server language (due
to Traditional pages are output directly from the server, so non-front-end languages such as PHP and Python can be used to write page templates, and finally output HTML pages to browsers for access) Disadvantages: 1. The jumping access speed between pages is slow,
and
users The experience is not good (because the multi-page application needs to go through a complete page request process for each jump, so the page jump access speed is slow; and if the web page has a lot of resources or the network speed is not good, the process will be slow There will be obvious lag or disordered layout, which will affect the user experience)
2. High development costs (traditional multi-page applications lack the support of many excellent technology stacks for front-end engineering, resulting in inefficiency in the development process of front-end engineers; if it is based on For non-front-end language development such as PHP, the workload is usually on one developer, and it is impossible to separate the front-end and back-end to make good use of cross-job collaboration)
SPA single-page application (referring to no matter how many pages the website has, there is actually only one HTML file in the SPA project, that is, the index.html homepage file; it only needs to go through a completed page request process when it is accessed for the first time , each subsequent page jump or data update operation uses AJAX technology to obtain the content that needs to be presented and only updates the specified web page location) Advantages: 1. Good
user
experience (since only the first complete request is required, so Fast speed during page switching)
2. High development efficiency (separation of front and back ends, back end is responsible for API interface, front end is responsible for interface and joint debugging, synchronously shortening the construction period)
Disadvantages:
1. Slow loading of the first screen (after the SPA opens the home page, Because a whole website is a single page, concentrated in one HTML file, so compared to MPA, the loading of the first screen is slow) 2. It is not
conducive to SEO optimization (the browser will find that the TDK of each route cannot be set when viewing the source code , will always be the index.html file, only the most basic HTML structure, which is not conducive to search engine crawling)