The difference between a single-page application and a multi-page application

Definition of a multi-page website:

Every time a page jumps, the backend server will return a new html file. This type of website is called a multi-page website (multi-page application)

Advantages : the first screen time is fast --- the time required for the entire page to be displayed, the      SEO effect is good

The reason for the fast first screen time : When visiting a page, the server returns an html, and then the html is displayed. This process only goes through the process of an http request, so the page is displayed quickly, and the page is displayed when the request comes back.

The reason for the good SEO effect : search engines need to know the content of the page when ranking the page. According to the content of the page, a weight can be given. The search engine can identify the content in html, and the content of each page is placed in the html file, so SEO effect is good

Disadvantages : slow page switching

Reason : Every time the page jumps, an http request needs to be sent. Assuming that when the network is slow, it will be time-consuming to switch the page back and forth, and the page will be obviously stuck.

 

Single page application-----The project built using vue is a single page application

When you enter the page for the first time, you will request a file. When you click on a link in the page and enter the next page, you will not request an html file. When you return to the home page, you will not request an HTML. File, how does he do not request HTML, and the page will change accordingly?

Principle : js will perceive the url change. After js perceives the url change, you can use js to dynamically clear the current content, and then hang the content of the next page to the current page. This routing is not done by the back-end, but by the front-end to determine which one is displayed on the page.

Advantages : fast page switching

When using a single-page application to jump, actually every time the page jumps, it does not load an html file, but dynamically deletes the content of the current page through js, and then renders the DOM structure of the new page come out. The advantage of this is that when the page is switched, there is no need to make a request for the HTML file, which saves a lot of HTTP delay for you to send, that is, the page is switched very quickly

Disadvantages : Slightly slow first screen time, poor SEO

The reason for the slower first screen time: When the first screen of a single-page application is displayed, html needs to be requested once, and a js request needs to be sent at the same time. After both requests come back, the first screen will be displayed

Reasons for poor SEO: SEO engines recognize the content in HTML, but do not recognize the content in js, and the content in a single page is generated by js rendering, so the search engine does not recognize this piece of content, so it will not give a page. Good ranking, which leads to a poor ranking in Baidu’s search results

 

Single-page applications have the above shortcomings, why does vue still use single-page applications?

Vue provides other technologies, server-side rendering technologies, through which they can perfectly solve the problems in a single page, and then Du Yu front-end is a perfect development solution

 

 

 

 

 

 

 

 

Guess you like

Origin blog.csdn.net/tangxiujiang/article/details/88896298