Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to generate the skeleton screen in vue". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to generate the skeleton screen in vue.

In vue, the skeleton screen shows the general structure of the page to the user before the page data is loaded, and then renders the page until the request data is returned to supplement the data content that needs to be displayed; the skeleton screen can be understood as a blank version of the page and a simple key rendering path before the data is loaded.

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

Compared with the era in which the front-end code was tightly coupled and the back-end engineers had to write the front-end code in previous years, it has now developed to the separation of the front-end and front-end, which greatly improves the maintainability and development efficiency of the front-end and front-end projects. let the front and rear engineers 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, more HTTP round-trip time (RTT) than the original, which results in a white screen. If the white screen time is too long, the user experience will be greatly reduced, and if the user's network speed is poor, the FCP will be longer.

As a result, a series of optimization methods are derived, and the skeleton screen is proposed.

1. FCP optimization

Of the four user-centric page performance metrics proposed by Google, FP/FCP is probably the most familiar to developers:

In order to optimize the rendering time of the first screen and reduce the white screen time, front-end people have come up with a lot of ways:

Accelerate or reduce the wastage of HTTP requests: use CDN to load common libraries, use strong cache and negotiation cache, use domain name convergence, use Base64 instead of small images, use Get requests instead of Post requests, set Access-Control-Max-Age to reduce pre-check requests, use browser prefetch pre-resolution when redirecting other domain names or requesting resources of other domain names, etc.

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

Reduce the volume of request content: enable server Gzip compression, compress and merge JS and CSS files, reduce cookies size, SSR directly output rendered HTML, etc.

Browser rendering principle: optimize critical rendering paths to minimize JS and CSS blocking rendering

Optimize the user waiting experience: the white screen uses loading progress bar, chrysanthemum diagram, skeleton screen instead, etc.

What we want to introduce here is the skeleton screen that optimizes the user's waiting experience, which can be regarded as an upgraded version of the original loaded chrysanthemum diagram, and can achieve good results by combining the traditional first screen optimization method to optimize the application.

two。 Skeleton screen

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

The skeleton screen can be understood as a blank version of the page, a simple key rendering path, before the data is loaded. You can take a look at the skeleton screen implementation of Facebook below. You can see that before the complete rendering of the page, the user will see a skeleton screen page with a simple style and a rough frame of the current page, and then each space-occupying part of the skeleton screen will be completely replaced by the actual resources. In this process, the user will feel that the content is gradually loading and about to appear, reducing the user's anxiety and making the loading process subjectively smooth.

You can take a look at the following example diagram, the first is the skeleton screen, the second is the chrysanthemum picture, and the third is no optimization. You can see that compared with the traditional chrysanthemum picture, the content will feel smooth and unobtrusive, and the experience is better.

3. The method of generating skeleton screen

The main ways to generate a skeleton screen are:

You can refer to the method of handwritten HTML and CSS to customize the skeleton screen for the target page. The main idea is to use vue-server-renderer, a plug-in originally used for server rendering, 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 way is not very civilized, if the page style changes, but also have to change the skeleton screen, increasing the maintenance cost. The style of the skeleton screen realizes the reference CodePen

Use pictures as the skeleton screen; simply violence, let UI students take some work ; Xiaomi Mall's mobile page uses this method, it uses a Base64 picture as the skeleton screen.

The method of automatically generating and automatically inserting a static skeleton screen is similar to the first method, but it automatically generates a skeleton screen. You can follow ele.me 's open source plug-in page-skeleton-webpack-plugin, which generates the corresponding skeleton screen page according to the different routing pages in the project, and packages the skeleton screen page into the corresponding static routing page through webpack. However, it should be noted that this plug-in only supports history routing. Hash is not supported, and currently only supports the home skeleton screen, and there is no component-level partial skeleton screen implementation, the author said that there will be a planned implementation (issue9) in the future.

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 when building, insert the rendering result HTML fragments of the skeleton screen components into the mount point of the HTML page template, and inline the style into the head tag. This plug-in can set different skeleton screens for different routes on a single page, or set up multiple pages. At the same time, for the convenience of debugging during development, the skeleton screen will be written into router as a route, which is quite considerate.

The specific use of vue-skeleton-webpack-plugin refers to vue-style-codebase, which mainly focuses on several files in the build directory. Online Demo can see the effect by adjusting the network speed of network to Gast 3G / Slow 3G in the DevTools of Chrome.

At this point, I believe you have a deeper understanding of "how to generate the skeleton screen in vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.