SPA
For more exciting content, please search for " " on WeChat前端爱好者 , and click me to view . '
Talk about your understanding of SPA single page, what are its advantages and disadvantages
SPA (single-page application) only loads the corresponding HTML, JavaScript and CSS when the web page is initialized.
Once the page is loaded, SPA will not reload or jump the page due to the user's operation; instead, it uses the routing mechanism to realize the transformation of HTML content and the interaction between the UI and the user to avoid page reloading.
advantage:
- The user experience is good and fast, and the content change does not need to reload the entire page, avoiding unnecessary jumps and repeated rendering;
- Based on the above point, SPA has relatively little pressure on the server;
- The front-end and back-end responsibilities are separated, the structure is clear, the front-end performs interactive logic, and the back-end is responsible for data processing;
shortcoming:
- Slow loading of the first screen (first time) : In order to realize the functions and display effects of single-page web applications, JavaScript and CSS need to be loaded uniformly when loading pages, and some pages are loaded on demand;
- Not conducive to SEO : Since all content is dynamically replaced and displayed on one page, it has a natural weakness in SEO.
What are the implementation methods of SPA single page application
前端路由的实现原理。
- hash mode
- history mode
In the hash mode, listen to the hashchange event on the window (triggered by the hash change in the address bar) to drive the interface change;
In history mode, listen to the popstate event on the window (triggered by clicking the forward or back button of the browser) to drive
the interface change, listen to a link click event and use the history.pushState and history.replaceState methods to drive the interface
change ; use it directly on the interface Show hide events drive interface changes.
VUE
Have you used Vue SSR? Talk about SSR?
SSR – Server Side Renderer
Vue.js is a framework for building client-side applications. By default, Vue components can be output in the browser to generate DOM and manipulate DOM.
However, it is also possible to render the same component as HTML strings on the server, send them directly to the browser, and finally "activate" these static markup as a fully interactive application on the client.
Namely: SSR roughly means that vue renders the entire html fragment of the label on the client side and completes the work on the server side, and the html fragment formed by the server side is directly returned to the client. This process is called server-side rendering.
Advantages and disadvantages of server-side rendering SSR
Advantages of server-side rendering:
-
Better SEO : Because the content of the SPA page is obtained through Ajax, and the search engine crawler will not wait for the asynchronous completion of Ajax before crawling the content of the page, so the page cannot be crawled through Ajax in the SPA The obtained content; and SSR is directly returned by the server to the rendered page (the data is already included in the page), so search engine crawling tools can grab the rendered page;
-
Faster content arrival time (faster first screen loading) : SPA will wait for all Vue compiled js files to be downloaded before starting page rendering. File downloads take a certain amount of time, so first screen rendering It takes a certain amount of time; SSR directly renders the page from the server and returns it directly for display, without waiting for the js file to be downloaded and rendered again, so SSR has a faster content arrival time;
Disadvantages of server-side rendering:
-
More restrictions on development conditions : For example, server-side rendering only supports two hook functions, beforCreate and created, which will cause some external extension libraries to require special handling to run in server-side rendering applications; and can be deployed in any static file Unlike the fully static single-page application SPA on the server, the server-side rendering application needs to be in the Node.js server operating environment;
-
More server load : Rendering a full application in Node.js is obviously more CPU-intensive than a server that just serves static files (CPU-intensive - CPU-intensive), so if you expect high-traffic environments ( high traffic ), prepare for server load accordingly, and use caching strategies judiciously.
If you have no experience in SSR development, you can refer to an SSR practical article " Vue SSR Stepping into the Pit ", which contains SSR project construction and project source code.
Talk about your understanding of MVVM
Traditional server-side MVC architecture model: View
- models data model, dedicated to provide data support
- controllers controller module, which handles different page requests or handles interface requests
- views view file
Core concept: single responsibility, division of labor and collaboration
advantage:
- better development efficiency
- better maintainability
The MVVM pattern is commonly used in client applications for building user interfaces.
MVVM model:
The literal meaning is this:
MVVM 是 Model-View-ViewModel 的缩写，MVVM 是一种设计思想。
- The Model layer represents the data model, and the business logic of data modification and operation can also be defined in the Model
- View represents the UI component, which is responsible for converting the data model into UI display
- ViewModel is an object that synchronizes View and Model.
easy to understand
In the early days of front-end development, DOM was manipulated
Later, using jQuery allowed us to improve the efficiency of manipulating DOM, but from the perspective of development, we still need to manually manipulate DOM
The MVVM mode completely frees the previous manual operation of the DOM. It does not require the user to operate the DOM, but binds ordinary data to the ViewModel, and automatically renders the data to the page. View changes will notify the ViewModel layer to update the data. Data changes will also update the view through the ViewModel layer, so the most important role in MVVM is the ViewModel, which truly decouples the view and data and improves development efficiency .
The MVVM pattern is mainly used in front-end applications for building user interfaces
- Microsoft's WPF, for building client applications
- Mobile App, iOS APP, Android App
- web application
- …
core:
- The MVVM pattern frees us from cumbersome DOM operations
- MVVM is also called Data Driven View
MVVM in Vue:
This is how MVVM is represented by component code in Vue:
