What is the skeleton screen in vue

In vue, the skeleton screen shows the user the general structure of the page before the page data is loaded, and then renders the page after the requested data is returned, adding the data content that needs to be displayed; the skeleton screen can be understood This is a blank version of the page before the data is loaded, a simple critical rendering path.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Compared with the early days when back-end code was tightly coupled and back-end engineers had to write front-end code, it has now developed to the point where front-end and back-end are separated. This development method has greatly improved the maintainability of front-end and back-end projects. stability and development efficiency, allowing front-end and back-end engineers to focus on their main business. However, while bringing convenience, it also brings some disadvantages, such as the first screen rendering time (FCP) because the first screen needs to request more content, which requires more HTTP round-trip time (RTT) than before, which results in white If the screen remains blank for too long, the user experience will be greatly compromised. If the user's network speed is poor, the FCP will be longer.

This led to a series of optimization methods, and the skeleton screen was also proposed.

1. FCP optimization

Among the four user-centered page performance measurement indicators proposed by Google, FP/FCP may be the most familiar to developers:

In order to optimize the first screen rendering time indicator and reduce the white screen time, the front-end guys have thought of many ways:

• Accelerate or reduce HTTP requests Loss: Use CDN to load public libraries, use strong caching and negotiated caching, use domain name convergence, use Base64 instead of small pictures, use Get requests instead of Post requests, set Access-Control-Max-Age to reduce preflight requests, and jump to others within the page Use browser prefetch to pre-parse domain names or request resources from other domain names;

• Delayed loading: non-important libraries, delayed loading of non-first-screen images, lazy loading of SPA components, etc.;

• Reduce the size of the requested content: enable server Gzip compression, JS and CSS file compression and merging, reduce cookie size, SSR directly outputs the rendered HTML, etc.;

• Principle of browser rendering: optimize the key rendering path and minimize JS and CSS that block rendering;

• Optimize user waiting experience: use loading progress bar, chrysanthemum on white screen Picture, skeleton screen replacement, etc.;

What I want to introduce here is the skeleton screen that optimizes the user’s waiting experience. It can be regarded as an upgraded version of the original loading chrysanthemum picture, combined with the traditional The first screen optimization method can achieve good results by optimizing the application.

2. Skeleton screen

The skeleton screen shows the user the general structure of the page before the page data is loaded, and then renders the page until the requested data is returned to supplement the data that needs to be displayed. content. It is often used for relatively regular list pages such as article lists and dynamic list pages.

The skeleton screen can be understood as before the data is loaded in, a blank version of the page, a simple critical rendering path. You can take a look at Facebook's skeleton screen implementation below. You can see that before the page is fully rendered, the user will see a skeleton screen page with a simple style that depicts the general frame of the current page. Then each placeholder part in the skeleton screen is actually The resource is completely replaced. During this process, the user will feel that the content is gradually loading and about to be presented, which reduces the user's anxiety and makes the loading process subjectively smooth.

You can take a look at the example pictures below. The first one is a skeleton screen, the second one is a chrysanthemum picture, and the third one is without optimization. You can see that compared to The traditional chrysanthemum picture will make the content appear smooth and unobtrusive to the senses, and the experience will be better.

3. Methods of generating skeleton screens

The main methods of generating skeleton screens are:

1. To customize the skeleton screen for the target page by handwriting HTML and CSS, you can refer to "Vue Page Skeleton Screen Injection Practice". The main idea is to use vue-server-renderer, a plug-in originally used for server-side rendering. , used to process the .vue file we wrote into HTML, insert it into the mount point of the page template, and complete the injection of the skeleton screen. This method is not very civilized. If the page style changes, the skeleton screen must be changed again, which increases maintenance costs. For the style implementation of the skeleton screen, please refer to CodePen
2. Use pictures as the skeleton screen; It is simple and violent, let the UI students spend some effort haha; the mobile page of Xiaomi Mall uses this method, it uses a Base64 The picture is used as the skeleton screen.
3. Automatically generate and automatically insert a static skeleton screen. This method is similar to the first method, but it automatically generates a skeleton screen. You can pay attention to the Ele.me open source plug-in page-skeleton-webpack-plugin, which is based on Different routing pages in the project generate corresponding skeleton screen pages, and the skeleton screen pages are packaged into the corresponding static routing pages through webpack. However, it should be noted that this plug-in currently only supports history routing, and does not support hash routing. Currently, only the skeleton screen on the homepage is supported, and there is no partial skeleton screen implementation at the component level. The author said that there will be plans to implement it in the future (issue 9).

There is also a plug-in vue-skeleton-webpack-plugin, which changes the way of inserting the skeleton screen from manual to automatic. The principle is to use the Vue pre-rendering function during construction to convert the skeleton screen component. The HTML fragment of the rendering result is inserted into the mount point of the HTML page template, and the style is inlined into the head tag. This plug-in can set different skeleton screens for different routes on a single page, or for multiple pages. At the same time, for the convenience of debugging during development, the skeleton screen will be written into the router as a route, which is quite considerate.

vue-skeleton-webpack-plugin For specific usage, refer to vue-style-codebase, mainly focusing on several files in the build directory. For the online demo, use the network in Chrome's DevTools. Set the speed to Gast 3G / Slow 3G and you will see the effect~

[Related recommendations: vue.js tutorial]

The above is the detailed content of What is the skeleton screen in vue. For more information, please follow other related articles on the PHP Chinese website!