react骨架屏自动生成_用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架屏

骨架屏是在页面数据尚未加载完成前先给用户展示出页面的大致结构，直到请求数据返回后再显示真正的页面内容；随着单页应用( SPA )的越来越流行，单页应用的用户体验也越来越得到前端开发者的关注；为了优化用户体验，在数据到达用户之前，往往会在页面上加上 loading 的效果，而现在，越来越多的场景倾向于使用页面的骨架替代单一的 loading 效果；

为什么需要自动生成骨架屏？

提高效率，节约单独编写骨架屏代码的时间

替换原来单一的 loading 图片效果

可以优化用户体验，在页面数据尚未加载完成前先给用户展示出页面的大致结构，配合动画效果，给用户一种平滑切换的感觉

常见的方案：

手动编写骨架屏代码

通过预渲染手动书写的代码生成相应的骨架屏

比如：vue-skeleton-webpack-plugin

饿了么内部的生成骨架页面的工具

page-skeleton-webpack-plugin

…

a. 前两者的前提都是需要开发者自己编写骨架屏代码

b. 饿了么的做的比较强大了，还有 UI 界面专门调整骨架屏

对于复杂的页面也会有不尽如人意的地方

生成的骨架屏节点是基于页面本身的结构和 CSS，存在嵌套比较深的情况，体积不会太小

只支持 history 模式.

我们的方案是：用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架屏

编写操作 DOM 的 Javascript 脚本

遍历可见区域可见的 DOM 节点

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

针对(背景)图片、文字、表单项、音频视频等区域，算出其所占区域的宽、高、距离视口的绝对距离等信息

对于符合生成条件的区域，一视同仁，生成相应区域的颜色块

“一视同仁”即对于符合条件的区域，不区分具体元素，不用考虑结构层级，不考