Single-page and multi-page summary of scenarios
First, what is a single-page application?
The basic concept : in project applications to a single page html page as a shell and load-time items depend on resources (CSS, JS) in the housing page. Other project pages as a page fragment-free switching in the sense of enclosure page (for example: the use of History H5 listener to change the URL of the page fragment switch (add and delete)).
Single-page application structure diagram:
Advantages : resource sharing project dependency, page fragment smooth handover (non-sense), page fragment can be multiplexed may be used when a page transition animation switching segment;
Drawback : is not conducive to SEO optimization, the first screen slow to load. As some information that the high development costs and do not agree with this, the following description;
Second, what is a multi-page application?
Here I think the multi-page application can be divided into two forms:
1. Traditional forms : This solution is initially set up the page implementation, each page has its own HTML files, each page depends resources introduced in the respective HTML files and pages between jump by URL jump. FIG architecture is as follows:
2. The single-page form : this solution is based on the actual starting projects, essentially adjusted between single-page application into a plurality of single-page applications, a plurality of single-page applications achieved by traditional forms; FIG architecture follows It shows:
Summary : traditional formal structure is fully compliant with multi-page idea. Single-page single-page program structure is complementary applications and multi-page applications; solve the problem of slow loading of the first screen, to some extent, to optimize the SEO optimization (feel little effect). Compared with the traditional forms of architecture, it can be like single-page application to achieve transition animation (or multiple pages can not be achieved between the jump). Sorting as shown below:
Third, how to choose the page structure?
Again, according to the specific project analysis for the official website, the electricity supplier for this class SEO and the fold load relatively high speed projects, multi-page application can be adopted. Or excellent "server-side rendering scheme"; if the page is the background management system, not open system, with a single-page application, so you can use third-party frameworks (Vue, React, etc.) components of the system, if the system is too large, leading to the first screen load slowly, the system can be split into single page of multi-page application form; general login page as the first screen page back office systems.