What is a skeleton screen

A skeleton screen is when you open a Web page and show the user an outline of what it looks like before the page is parsed and data is loaded.

Why do WE need a skeleton screen

  • According to a study by Google Research, 53% of users choose to close the Web page or application after waiting for 3s to load, resulting in user loss.
  • Current front-end frameworks are basically JS-driven, that is, until the JS code has been parsed, the page does not display any content, the so-called white screen.
  • User experience, user perception will be more friendly.

Existing solutions on the market

  • Handwritten skeleton screen manual HTML + CSS style placeholder

Disadvantages: unable to keep up with UI changes and demand changes, belong to mechanized labor mode.

  • Content straight out of server render (SSR) or VUE pre-render

Disadvantages: The content is straight out, requiring the support of the server, involving service construction, deployment, caching, etc., increasing the cost and risk.

  • Combined with the current project, and the advantages and disadvantages of all parties, here the use of page-skeleton-webpack-plugin (Element automatically generate skeleton screen plug-in), try.

Advantages: Least intrusive to existing pages and build tools. Disadvantages: Generation is variable, manual verification is required, and packaging has a certain size of style content.

The basic idea of the page-skeleton-webpack-plugin

Through puppeteer open development need to generate the skeleton of the screen of the page, waiting for the page loading rendering is finished, on the premise of keep the page layout style, through to the page elements to omit, or add to existing elements covered by cascading style, so that, under without changing the page layout, the hidden text and images, With style overlay, it is displayed as a gray block. Finally, the modified HTML and CSS styles are extracted, which is the skeleton screen. The main steps are as follows:

Demo & Experience process:

  • 1, update leka – introduce page-skeleton & replace <–shell —
  • 2, installation dependency, (puppteer needs CNPM)
  • 3. Run leKA serve mode to generate skeleton screen (evaluate whether it is suitable to use skeleton screen)
  • 4, local prod package, (web_leka is a new music effect, upload shell directory file content, and package in)

Skeleton sequence diagram

Modification Description

  • Fixed some issues with the Page-skeleton-webpack-plugin, see Demo for more details
  • Optimize preview two-dimensional code, realize real-time modification style, two-dimensional code real-time update
  • Scan your phone for a preview and add flexible. Js to make sure you see more realistic styles
  • Adjust priView preview to 375 phone width instead of 1280

The original 1280 width, easy to mistake the box is all the phone:

The current item needs to be modified

  • In fact, after the line, the skeleton screen will see the initial style, and then the adapted style, todo.
  • Migrate to web_leka project todo.
  • Can weeX skeleton be generated?
  • Adjusting and optimizing the generated DOM, such as the head block, is not required in the app.

Project encounter

  • Jenkins failed to read the specified directory address because there was no backslash processing.
const os = require('os')
os.type() // Linux Windows_NT Darwin
Copy the code
  • The dependency installation process took a long time and Jenkins kept failing
1. 2, NPM config set puppeteer_download_host=https://npm.taobao.org/mirrors guarantee successful installationCopy the code

Other related resources

3 to 10 years internal position related to the front and back end, PM (shrimp inside push, Lexin inside push) recommendation opportunity, welcome to contact, WX No. : X915324; You can also send your resume to:[email protected]

See the Clone Page-skeleton-webpack-plugin for details.