Concept and Background

Skeleton Screen, as it is called in Chinese. Before the page data is loaded, some simple graphics are used to describe the general layout of the page content, so that users feel that the page is loading; When the data is loaded, render the page with real data and replace it.

, before the birth of skeleton screen are most of the industry with chrysanthemum figure like to do the loading effect of the load effect of display data waiting period, but the effect for the user experience is not necessarily good, when a user focused on chrysanthemum figure, like staring at the next five minutes before class, students perception on time will be slow, it is easy to cause anxiety, If the network is weak, the user may close the page directly.

If we can just before the page content to present the outline of the first page content display, and then gradually show the real content, so that can give the user a content is being loaded the present look forward to, also can reduce anxiety in the process of users wait for, at the same time can also make the page loading process became more smooth, senses would be more natural, That’s what skeleton screens are for.

How do I generate a skeleton screen

So what can we do to generate a skeleton screen? Answer a: handwritten skeleton screen code, this scheme may be everyone’s response is the following

Answer two: automatically?

It may seem difficult to automatically generate skeleton screens, but the main challenges are:

  • The actual content structure of a page is difficult to capture automatically

  • If you have the page structure, how do you generate the nodes and styles of the skeleton screen from the page structure

These two problems can also be solved by using some front-end technologies. I have written a webpack plugin, skeleton-webpack-plugin, which can generate HTML and CSS for the skeleton screen of the dev Server preview page when you run it locally. The general idea is as follows:

But at this point we’ve just generated a skeleton screen that works in the H5 environment. Back to our theme, we want to span multiple platforms, which means I want iOS, Android, applets, etc. How do I do that?

skeleton-weex-plugin

At present, our team has developed a cross-terminal development framework based on WEEX. With this framework, we can basically achieve a set of code reuse in iOS, Android, small programs and other terminals. However, it is not open source yet, so I first borrow WEEX as cross-terminal technology implementation and VUE as DSL. If your team is weeX-like, you can reuse my code.

My solution to the problem of generating multiple skeleton screens is the skeleton-Weex-plugin, which is a plug-in to the skeleton-webpack-plugin. As mentioned above, the skeleton-webpack-plugin can generate HTML and CSS corresponding to the skeleton screen of the page, so further thinking, if we can convert this HTML and CSS into weex code, so that we can achieve a skeleton screen in multiple ends can be displayed. The implementation idea of the skeleton-Weex-Plugin is as follows:

It will generate a skeleton.vue file in your corresponding page directory as follows:

<template>
<div v-if="isShow" class="skeleton-wrapper">
<div>skeleton content</div>
</div>
</template>
<script>
export default {
  name: "Skeleton",
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped>
skeleton style content
</style>
Copy the code

This way you can refer to it as a component and control its display and hiding. You can take a look at the renderings of xiaoju’s home page:





But is that perfect?

Subsequent optimization of the road

Although we have preliminarily achieved the expected goal, there are still several more important problems.

  • The H5 page will still have a blank screen because it will still display a blank page until the JS bundle is loaded.

    The solution to this problem is that you can print the skeleton screen HTML and CSS directly to the static page template HTML, and then delete the node after the JS bundle is loaded

  • The introduction of skeleton screen components will cause the JS bundle to grow in size.

    So far I have done a lot of streamlining in weeX code generation, such as creating skeleton screens only for elements that are visible in the viewport area, removing some unnecessary styles, etc. I will see if there is more streamlining in weeX code generation.

  • During native rendering, the page will also display a blank screen before the page JS bundle is loaded.

    The solution to this problem is to use a screenshot of the preview page of the skeleton screen to generate an image, and then the Native terminal can display this image before the JS bundle is loaded to fill the blank screen time.

So we can and we must do better

Here is the use of WEEX to achieve cross-terminal appeal, but if you want to expand to other technology stack in fact, the essence of the idea is the same, just need to skeleton screen HTML and CSS abstract syntax tree into the implementation of the corresponding technology stack, even if the generation of pure native code is not impossible to do, welcome to contribute plug-ins.

The relevant code

  • skeleton-webpack-plugin

  • skeleton-weex-plugin

If you like, please hit me with star.