Skeleton screen is to show the user the general structure of the page before the page data is loaded, and then show the real page content after the request data is returned. With the popularity of single page application (SPA), the user experience of single page application is getting more and more attention of front-end developers. In order to optimize user experience, loading effect is often added to the page before data reaches the user. However, nowadays, more and more scenes tend to use the skeleton of the page instead of a single loading effect.

Why do I need to automatically generate skeleton screens?

  1. Improve efficiency, save time to write skeleton screen code alone
  2. Replace the original single loading image effect
  3. The user experience can be optimized by showing the user the general structure of the page before the page data is loaded. With the animation effect, the user can have a feeling of smooth switching

Common solutions:

  1. Write skeleton screen code manually
  2. Generate a skeleton screen by pre-rendering hand-written code such as vue-skeleton-webpack-plugin
  3. Ele. me internal skeleton page generation tool page-skeleton-webpack-plugin
  4. .

A. The first two require developers to write their own skeleton screen code

B. Ele. me is more powerful, and the UI interface is dedicated to adjusting the skeleton screen

  • Complex pages can also have their drawbacks
  • The generated skeleton screen node is based on the structure and CSS of the page itself, which is deeply nested and not too small
  • Only history mode is supported.

Our solution is to use pure DOM and Puppeteer to automatically generate the web skeleton screen

  • Write Javascript scripts that manipulate the DOM
    • Visible DOM nodes include: non-hidden elements, elements larger than 0, non-transparent elements, elements whose content is not a space, and elements located in the visible area of the browsing window
    • Figure out the width, height and absolute distance from the viewport of the (background) image, text, form items, audio and video
    • For the regions that meet the generation conditions, the color blocks of the corresponding regions are generated equally
    • “No discrimination” means that the color blocks of divs are generated uniformly for the areas that meet the conditions, regardless of specific elements, regardless of structure level, regardless of style
    • The running environment of the script determines that the size of the elements obtained and the relevant distance units are not controllable, which may require conversion, such as REM, EM, VH, etc. Instead of taking the size related value of style, we use getBoundingClientRect to get the absolute value of width, height and distance from viewport, and the width and height of the current device, and calculate the corresponding percentage as the unit of color block, so as to adapt to different devices
    • For complex pages or pages with large images, we use includeElement(node, draw) and init hook functions to support custom tweaks
    • This can be run directly in the browser to generate skeleton screen code, manually added to the application page
    const createSkeletonHTML = require('DrawPageStructure/evalDOM')

    createSkeletonHTML({
        // ...
        background: 'red'.animation: 'opacity 1s linear infinite; '
    }).then(skeletonHTML= > {
        console.log(skeletonHTML)
    }).catch(e= > {
        console.error(e)
    })
Copy the code

Directly run in the browser, print the skeleton screen node of the current page on the console, copy and add to the application page, but this method is not automatic, we should let the skeleton screen automatically generated and added to the application page

  • Puppeteer

Puppeteer is an official Google Node library that controls Headless Chrome. You can directly control Chrome through the apis provided by Puppeteer to simulate most user actions to perform UI tests or to crawl pages to collect data.

Puppeteer provides an operating environment and an export mode

  1. Run the pages that need to generate skeleton screens using puppeteer
  2. A previously written Javascript script is pre-injected into the page via puppeteer to run the script and generate the DOM nodes needed for the skeleton screen
  3. Insert the automatically generated skeleton screen DOM fragment into the entry node of the application page
const evalDOM = require('.. /evalDOM');

await page.goto(url, {waitUntil: 'networkidle0'});
const skeletonHTML = awaitpage.evaluate.call(page, evalDOM, ... args);Copy the code

summary

  1. The core of puppeteer is DOM manipulation. Puppeteer only provides a running environment and an export method
  2. Any page that can be accessed can be generated. History and hash modes are unlimited
  3. Projects such as VUE and React can be reused with zero modification regardless of project and framework constraints
  4. The unit of color block is percentage, which is adaptive for different devices
  5. There is no need for CSS-tree to extract styles, no dependence on the layout structure of the page itself, and the resulting flat DOM nodes are extremely small in size
  6. Supports custom generation and export modes

There are many details in the optimization, welcome interested partners to join together!

For detailed code and usage, please go to: github.com/famanoder/D…

Welcome to star! Welcome to PR!