网页骨架屏自动生成方案（dps）

article/2025/9/15 4:52:58

来源：花满楼

https://zhuanlan.zhihu.com/p/74403911

什么是骨架屏？

什么是骨架屏呢？骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。

假如能在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变得自然通畅，不会造成网页长时间白屏或者闪烁。这就是 Skeleton Screen ！

Skeleton Screen 能给人一种页面内容“已经渲染出一部分”的感觉，相较于传统的 loading 效果，在一定程度上可提升用户体验。

骨架屏的实现方案

目前生成骨架屏的技术方案大概有三种：

1. 使用图片、svg 或者手动编写骨架屏代码：使用 HTML + CSS 的方式，我们可以很快的完成骨架屏效果，但是面对视觉设计的改版以及需求的更迭，我们对骨架屏的跟进修改会非常被动，这种机械化重复劳作的方式此时未免显得有些机动性不足；

2. 通过预渲染手动书写的代码生成相应的骨架屏：该方案做的比较成熟的是 vue-skeleton-webpack-plugin，通过 vueSSR 结合 webpack 在构建时渲染写好的 vue 骨架屏组件，将预渲染生成的 DOM 节点和相关样式插入到最终输出的 html 中。

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

该方案的前提同样是编写相应页面的骨架屏组件，然后预渲染生成骨架屏所需的 DOM 节点，但由于该方案与 vue 相关技术直接关联，在当今前端框架三分天下的大环境下，我们可能需要一个更加灵活、可控的方案；

3 . 饿了么内部的生成骨架页面的工具：该方案通过一个 webpack 插件 page-skeleton-webpack-plugin 的方式与项目开发无缝集成，属于在自动生成骨架屏方面做的非常强大的了，并且可以启动 UI 界面专门调整骨架屏，但是在面对复杂的页面也会有不尽如人意的地方，而且生成的骨架屏节点是基于页面本身的结构和 CSS，存在嵌套比较深的情况，体积不会太小，并且只支持 history 模式。

 // webpack.conf.jsconst 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}`), // 用来存储 shell 文件的地址staticDir: path.resolve(__dirname, './dist'), // 最好和 `output.path` 相同routes: ['/', '/search'], // 将需要生成骨架屏的路由添加到数组中})]

我们的实现方案

后来仔细想想，骨架屏这幅样子不是和一堆颜色块拼起来的页面一样吗？对比现有的骨架屏方案，这个想法有点“走捷径”的感觉。再进一步思考，这些色块基于当前页面去分析节点来生成，不如来段 JS 分析页面节点，一顿 DOM 操作生成颜色块拼成骨架屏。那么问题来了，该怎么样精确的分析页面节点，不同节点又该生成什么样的色块呢？

既然骨架屏代表了页面的大致结构，那么需要先用 js 对页面的结构进行分析。分析之前，我们需要制定一种规则，以确定需要排除哪些节点？哪些种类的节点需要生成颜色块？生成的颜色块如何定位等等。我们初步定下的规则如下：

1. 只遍历可见区域可见的 DOM 节点，包括：

非隐藏元素、宽高大于 0 的元素、非透明元素、内容不是空格的元素、位于浏览窗口可见区域内的元素等；

2. 针对（背景）图片、文字、表单项、音频视频、Canvas、自定义特征的块等区域来生成颜色块；

3. 页面节点使用的样式不可控，所以不可取 style 的尺寸相关的值，可通过 getBoundingClientRect 获取节点宽、高、距离视口距离的绝对值，计算出与当前设备的宽高对应的百分比作为颜色块的单位，来适配不同设备；

基于这套规则，我们开始生成骨架屏：

首先，确定一个 rootNode 作为入口节点，比如 document.body，同时方便以后扩展到生成页面内局部的骨架屏，由此入口进行递归遍历和筛选，初步排除不可见节点。

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

接下来判断元素特征，确定是否符合生成条件，对于符合条件的区域，”一视同仁”生成相应区域的颜色块。”一视同仁”即对于符合条件的区域不区分具体元素、不考虑结构层级、不考虑样式，统一根据该区域与视口的绝对距离值生成 div 的颜色块。之所以这样是因为生成的节点是扁平的，体积比较小，同时避免额外的读取样式表、通过抽离样式维持骨架屏的外观，这种统一生成的方式使得骨架屏的节点更可控。基于那上述“走捷径”的想法，该方法生成的骨架屏是由纯 DOM 颜色块拼成的。

生成颜色块的方法：

const blocks = [];
// width,height,top,left 都是算好的百分比
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];radius && radius != '0px' && styles.push('border-radius: ' + radius);// animation && styles.push('animation: ' + animation);blocks.push(`<div style="${ styles.join(';') }"></div>`);
}

绘制颜色块并不难，绘制之前的分析确认才是这个方案真正的核心和难点。比如，对于页面结构比较复杂或者大图片比较多的页面，由图片拼接的区域没有边界，生成的颜色块就会紧挨着，出现不尽如人意的地方。再比如，一个包含很多符合生成条件的小块的 card 块区域，是以 card 块为准还是以里面的小块为准来生成颜色块呢？如果以小块为准，绘制结果可能给人的感觉压根就不是一个 card 块，再加上布局方式和样式的可能性太多，大大增加了不确定因素。而如果以 card 块为准生成颜色块的话还要对 card 块做专门的规则。

目前来说，对于页面结构不是特别复杂，不是满屏图片的，不是布局方式特别“飘逸“的场景，该方式已经可以生成比较理想的骨架屏了。而对于那些与预期相差较远的情况，我们提供了两个钩子函数可供微调：

1. init 函数，在开始遍历节点之前执行，适合删除干扰节点等操作。

2. includeElement(node, draw) 函数，可在遍历到指定节点时，调 用 draw 方法进行自定义绘制。

通过以上步骤就能够直接在浏览器中生成骨架屏代码了。

在浏览器里运行

由于我们的方案出发点是通过单纯的 DOM 操作，遍历页面上的节点，根据制定的规则生成相应区域的颜色块，最终形成页面的骨架屏，所以核心代码完全可以直接跑在浏览器端；

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)})

结合 Puppeteer 自动生成骨架屏

虽然该方式已经可以生成骨架屏代码了，但是还是不够自动化，为了让生成的骨架屏代码自动加载进指定页面。于是，我们开发了一个配套的 CLI 工具。这个工具通过 Puppeteer 运行页面，并把 evalDOM.js 脚本注入页面自动执行，执行的结果是生成的骨架屏代码被插入到应用页面。

我们的方案大概思路如下：

接下来看看如何使用 CLI 工具生成骨架屏，最多只需如下四步：

1. 全局安装，npm i draw-page-structure – g

2. dps init 生成配置文件 dps.config.js

3. 修改 dps.config.js 进行相关配置

4. dps start 开始生成骨架屏

只需简单几步，然而并没有繁琐的配置：

一般来说，你需要按自己的项目情况来配置 dps.config.js ，常见的配置项有：

  • url: 待生成骨架屏的页面地址

  • output.filepath: 生成的骨架屏节点写入的文件

  • output.injectSelector: 骨架屏节点插入的位置，默认 #app

  • background: 骨架屏主题色

  • animation: css3 动画属性

  • rootNode: 真对某个模块生成骨架屏

  • device: 设备类型，默认 mobile

  • extraHTTPHeaders: 添加请求头

  • init: 开始生成之前的操作

  • includeElement(node, draw): 定制某个节点如何生成

  • writePageStructure(html, filepath): 回调的骨架屏节点

详细代码及工具的使用请移步 [Github]( famanoder/dps)；

初步实现的效果：

* 京东 PLUS 会员正式中首页：

* 京东 PLUS 会员正式中首页，通过该方案生成的骨架屏效果：

* 移动端百度首页，通过该方案生成的骨架屏效果：

总结

以上就是基于 DOM 的骨架屏自动生成方案，其核心是 evalDOM 函数。这个方案在很多场景下的表现还是令人满意的。不过，网页布局和样式组合的可能性太多，想要在各种场景下都获得理想的效果，还有很长的路要走，但既然已经在路上，就勇敢的向前吧！

欢迎 star，欢迎提 PR ！https://github.com/famanoder/dps

最后

欢迎关注「前端瓶子君」，回复「交流」加入前端交流群！

欢迎关注「前端瓶子君」，回复「算法」自动加入，从0到1构建完整的数据结构与算法体系！

在这里（算法群），你可以每天学习一道大厂算法编程题（阿里、腾讯、百度、字节等等）或 leetcode，瓶子君都会在第二天解答哟！

另外，每周还有手写源码题，瓶子君也会解答哟！

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持


http://chatgpt.dhexx.cn/article/LsQ0MNiL.shtml

相关文章

骨架屏

骨架屏

&#xff08;一&#xff09;什么是骨架屏 骨架屏可以理解为是当数据还未加载进来前&#xff0c;页面的一个空白版本。在页面完全渲染完成之前&#xff0c;用户会看到一个样式简单&#xff0c;描绘了当前页面的大致框架的页面&#xff0c;然后骨架屏中各个占位部分被实际资源完…
阅读更多...
Vue中实现骨架屏的多种方式

Vue中实现骨架屏的多种方式

vue-cli项目首页加载缓慢想要使用骨架屏效果&#xff0c;经过几天的实践&#xff0c;这里学习并记录一下vue项目自动生成骨架屏方法。 前言&#xff1a;骨架屏的作用主要是在网络请求较慢时&#xff0c;提供基础占位&#xff0c;当数据加载完成&#xff0c;恢复数据展示。这样给…
阅读更多...
骨架屏原理——面试别再被挨打了

骨架屏原理——面试别再被挨打了

目录 前言 骨架屏是什么 骨架屏原理 用途&#xff1a; &#xff08;一&#xff09;简单实现 &#xff08;二&#xff09; vue项目中的构建 &#xff08;三&#xff09;自动化方案 前言 同样是之前练手项目中的&#xff0c;emmm,知道干嘛用的&#xff0c;没了解过具体原理…
阅读更多...
性能测试总结之内存泄露和内存溢出

性能测试总结之内存泄露和内存溢出

刚刚做完了一个项目的性能测试&#xff0c;“有幸”也遇到了内存泄露的案例&#xff0c;所以在此和大家分享一下。 主要从以下几部分来说明&#xff0c;关于内存和内存泄露、溢出的概念&#xff0c;区分内存泄露和内存溢出&#xff1b;内存的区域划分&#xff0c;了解GC回收机…
阅读更多...
内存泄露与内存溢出的区别及解决方法

内存泄露与内存溢出的区别及解决方法

内存溢出与泄露的区别 内存溢出 out of memory&#xff0c;是指程序在申请内存时&#xff0c;没有足够的内存空间供其使用&#xff0c;出现out of memory&#xff1b;比如申请了一个integer,但给它存了long才能存下的数&#xff0c;那就是内存溢出。 内存泄露 memory leak&…
阅读更多...
jvm故障 内存泄露和内存溢出总结

jvm故障 内存泄露和内存溢出总结

目录 内存泄漏memory leak 内存泄漏的分类&#xff08;按发生方式来分类&#xff09; 内存泄露的场景 静态集合类 / 长生命周期的对象持有短生命周期对象的引用 / 单例模式 /类加载器 各种连接&#xff0c;如数据库连接、网络连接和IO连接等 变量不合理的作用域 内部类持…
阅读更多...
JVM——内存泄漏与内存溢出

JVM——内存泄漏与内存溢出

内存泄漏与内存溢出 1. 面试题 什么是内存泄漏和什么是内存溢出 (陌陌) Java存在内存泄漏吗&#xff0c;内存泄漏的场景有哪些&#xff0c;如何避免(百度) Java 中会存在内存泄漏吗&#xff0c;简述一下&#xff1f;(猎聘) 内存泄漏是怎么造成的&#xff1f;(拼多多、字节跳动)…
阅读更多...
Java中内存溢出和内存泄露详解

Java中内存溢出和内存泄露详解

1、内存溢出&#xff08;OOM&#xff09; 在程序中导致程序崩溃的两种原因有&#xff1a; ①、空指针、下标越界等异常&#xff0c;这类问题主要原因是因为代码写的有问题 ②、还有一类问题是&#xff0c;代码看着也没有问题&#xff0c;在进行GC时&#xff0c;回收也没有空出足…
阅读更多...
内存泄漏和内存溢出的区别

内存泄漏和内存溢出的区别

内存泄漏就是在jvm堆中生成的对象&#xff0c;经过垃圾回收器回收后也无法得到有效的释放&#xff0c;则会导致可用的虚拟机可分配的内存越来越少。最终可能导致内存溢出。 以发生的方式来分类&#xff0c;内存泄漏可以分为4类&#xff1a; 1、常发性内存泄漏。发生内存泄漏的…
阅读更多...
什么是内存泄漏和内存溢出

什么是内存泄漏和内存溢出

目录 一、内存溢出 (OutOfMemory)二、内存泄漏 (Memory Leak) 一、内存溢出 (OutOfMemory) 它是指程序在申请内存时&#xff0c;没有足够的内存空间供其使用&#xff0c;抛出OutOfMemory异常。 比如申请了一个8MB空间&#xff0c;但是当前内存可用空间只有5MB&#xff0c;那么…
阅读更多...
内存溢出和内存泄漏

内存溢出和内存泄漏

内存溢出&#xff1a; 一、内存溢出相对于内存泄漏来说&#xff0c;尽管更容易被理解&#xff0c;但是同样的&#xff0c;内存溢出也是引发程序崩溃的罪魁祸首之一。 二、由于GC一直在发展&#xff0c;所有一般情况下&#xff0c;除非应用程序占用的内存增长速度非常快&#…
阅读更多...
Vim替换命令substitute介绍

Vim替换命令substitute介绍

原文地址&#xff1a;再谈Vim substitute替换命令-Vim入门教程(54) 在Vim替换命令一文介绍过&#xff0c;substitute 命令的语法格式为&#xff1a;:[range]s[ubstitute]/{pattern}/{string}/[flags]。 [flags] 表示可选的标志位&#xff0c;常用的包括 g、c、n、e 等。其中&…
阅读更多...
VIM替换命令%s

VIM替换命令%s

[rootlocalhost 09:03:42 /home/test]# cat vim_test.txt linux nginx aabb bbcc ccdd vim vim_test.txt 进入编辑模式 输入指令 :%s/bb/zz/gc 全局替换&#xff0c;带确认 按y对搜索项替换第一个 按y对搜索项替换第二个 这种操作方法 &#xff0c;查看替换过程与效果。避…
阅读更多...
八皇后问题c语言算法

八皇后问题c语言算法

目录 [TOC] 问题分析&#xff1a; 相信八皇后规则的问题&#xff0c;大家都很熟悉&#xff0c;接下来是如何分析回溯法的应用。回溯法与图里面的深度优先遍历非常的类似&#xff0c;就是&#xff0c;在满足题目条件时候&#xff0c;它总是优先选择第一个&#xff0c;当不满足…
阅读更多...
八皇后算法

八皇后算法

两个皇后都不能处于同一行、同一列或同一斜线上 讨论如果是八个皇后&#xff0c;即存在于8*8的行列式中&#xff0c;每行每列一定存在一个皇后&#xff0c;现在我们用queen[row]col 表示在第row行的皇后处于第col列&#xff0c; 位置的选定&#xff0c;5人 然后判断此时皇后所…
阅读更多...
【算法】八皇后问题

【算法】八皇后问题

1. 问题描述 在 8 * 8 的国际象棋棋盘上摆放八个皇后&#xff0c;任意两个皇后不能处于同一行、同一列或同一斜 线上&#xff0c;请求出所有的摆法。 2. 算法描述 用回溯算法来考虑此问题&#xff0c;在放置皇后之前判断该位置是否会产生冲突。有冲突就继续判断 下一个位置&…
阅读更多...
八皇后问题算法解析

八皇后问题算法解析

八皇后问题&#xff0c;是一个古老而著名的问题&#xff0c;是回溯算法的典型案例。 该问题是国际西洋棋棋手马克斯贝瑟尔于1848年提出&#xff1a;在88格的国际象棋上摆放八个皇后&#xff0c;使其不能互相攻击&#xff0c; 即任意两个皇后都不能处于同一行、同一列或同一斜线…
阅读更多...
用遗传算法解决八皇后问题

用遗传算法解决八皇后问题

一、问题描述 八皇后问题的目标是在国际象棋棋盘中放置8个皇后&#xff0c;使得任何一个皇后都不会攻击到其他任一皇后。(皇后可以攻击和它在同一行&#xff0c;同一列或者同一对角线的任何棋子) 二、编程语言及算法 编程语言&#xff1a;python 算法&#xff1a;遗传算法 …
阅读更多...
经典算法问题-01-八皇后

经典算法问题-01-八皇后

#八皇后问题 ###问题描述&#xff1a; 八皇后问题&#xff0c;是一个古老而著名的问题&#xff0c;是回溯算法的典型案例。在88格的国际象棋上摆放八个皇后&#xff0c;使其不能互相攻击&#xff0c;即任意两个皇后都不能处于同一行、同一列或同一斜线上&#xff0c;问有多少种…
阅读更多...
【算法】八皇后问题解法(c++版)

【算法】八皇后问题解法(c++版)

八皇后问题是回溯算法里面的经典问题&#xff0c;起源于1848年由国际西洋棋手马克斯&#xff0c;贝瑟尔提出&#xff0c;1850年法国著名的数学家高斯提出共有76种解法&#xff0c;实际上真的是这样吗&#xff0c;多年后我们通过计算机程序可以发现真正的解法比76种更多。 问题描…
阅读更多...
推荐文章

Copyright @ 2022~2023