Automatic Generation of Skeleton Screens Using DOM Analysis and Puppeteer

Skeleton screens (also called Skeleton UI) are placeholder layouts shown while page data is loading, giving users a sense of the page structure and reducing perceived waiting time.

Common implementation methods include:

Manually writing HTML/CSS or using images/SVG, which is quick but hard to maintain when designs change.

Using vue-skeleton-webpack-plugin to pre‑render Vue skeleton components during the build process.

Using page-skeleton-webpack-plugin (an internal Ele.me tool) that integrates with Webpack to automatically generate skeleton nodes based on the page’s DOM and CSS.

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
plugins: [
  // ...
  new SkeletonWebpackPlugin({
    webpackConfig: {
      entry: { app: resolve('./src/entry-skeleton.js') }
    }
  })
]

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin');
const path = require('path');
plugins: [
  // ...
  new HtmlWebpackPlugin({ /* Your HtmlWebpackPlugin config */ }),
  new SkeletonPlugin({
    pathname: path.resolve(__dirname, `${customPath}`),
    staticDir: path.resolve(__dirname, './dist'),
    routes: ['/', '/search']
  })
]

The authors propose a more flexible solution that analyses the page’s DOM in the browser, decides which visible nodes should become placeholder blocks, and generates a skeleton screen composed solely of div elements with fixed positioning.

Key rules for node selection:

Only visible elements with non‑zero width/height, non‑transparent, non‑empty content, and within the viewport are considered.

Blocks are created for background images, text, form fields, media, canvas, and custom‑styled areas.

Absolute dimensions are obtained via getBoundingClientRect and converted to percentages to ensure responsiveness across devices.

function isHideStyle(node) {
  return getStyle(node, 'display') === 'none' ||
         getStyle(node, 'visibility') === 'hidden' ||
         getStyle(node, 'opacity') == 0 ||
         node.hidden;
}

const blocks = [];
// width,height,top,left are already calculated percentages
function drawBlock({width, height, top, left, zIndex = 9999999, background, radius} = {}) {
  const styles = [
    'position: fixed',
    'z-index: ' + zIndex,
    'top: ' + top + '%',
    'left: ' + left + '%',
    'width: ' + width + '%',
    'height: ' + height + '%',
    'background: ' + background
  ];
  if (radius && radius != '0px') styles.push('border-radius: ' + radius);
  blocks.push(`
`);
}

After traversing the DOM from a root node (usually document.body ), the algorithm draws the blocks, producing a lightweight skeleton HTML that can be injected directly into the page.

To automate the whole workflow, a CLI tool built on Puppeteer is provided. The tool launches the target page, injects the evaluation script, and writes the generated skeleton HTML to a file or inserts it into the page at a specified selector.

const createSkeletonHTML = require('draw-page-structure/evalDOM');
createSkeletonHTML({
  background: 'red',
  animation: 'opacity 1s linear infinite;'
}).then(skeletonHTML => {
  console.log(skeletonHTML);
}).catch(e => {
  console.error(e);
});

Typical usage steps are:

Install globally: npm i draw-page-structure -g

Run dps init to generate dps.config.js .

Edit the config (URL, output path, selector, background, animation, device, etc.).

Execute dps start to generate the skeleton screen.

The configuration supports options such as url , output.filepath , output.injectSelector , background , animation , rootNode , device , extraHTTPHeaders , init , includeElement , and writePageStructure .

Demo screenshots show skeleton screens generated for JD PLUS homepage and mobile Baidu homepage, demonstrating that the approach works well for typical pages, though extremely complex layouts may still need manual adjustments.

In summary, the DOM‑based skeleton screen generation method provides a fast, automated way to create placeholder UIs, but further refinement is required to handle all possible web page variations.