首屏css-前端骨架屏解决方案总结

骨架屏风

最近项目中时不时就有骨架屏的需求，所以就抽出时间来监督一下骨架屏方案。 骨架屏的做法已经有很多，也有很多人推出了自己的方案。 在此，我根据我个人的经历，做了一个总结和分类，与大家分享。

关于骨架屏（简介）

骨架屏在页面数据加载之前向用户展示页面的大致结构，然后在请求数据返回后渲染页面，补充需要显示的数据内容。 常用于文章列表、动态列表页面等比较规则的列表页面。 很多项目都有应用：ex：饿了么h5版，知乎、Facebook等网站都有应用。 我们以一张图片为例：

图像

两种用途

简介中已经解释了目的，但仍然可以进一步细分：

作为spa中路由切换的加载，结合组件的生命周期和ajax请求返回的时机来使用。 作为首屏渲染的优化。 第一种使用方式

对于第一类应用，需要自己编译骨架屏。 我们推荐两个成熟且易于定制的svg组件来定制骨架屏。

作为第一屏幕渲染（自动化解决方案）

该方案是饿了么在骨架屏实践中总结的一套方案：

cssUnit的配置：需要使用自适应单位。 根据文档给出的选择范围进行选择。 直接用px生成的比例是不合适的。 Puppeteer大约80M。 安装过程中，可能无法一次性下载成功。

通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面，在等待页面加载
渲染完成之后，在保留页面布局样式的前提下，通过对页面中元素进行删减或增添，对已有元素通过层叠样
式进行覆盖，这样达到在不改变页面布局下，隐藏图片和文字，通过样式覆盖，使得其展示为灰色块。然后
将修改后的 HTML 和 CSS 样式提取出来，这样就是骨架屏了.

复制

自动生成骨架屏

其他选项

与 ssr 渲染/预渲染结合使用：

将提前编译好的骨架屏组件通过ssr render分析注入到html文件中（只不过需要自己编译首屏css首屏css，虽然过程和里面的自动化方案类似）。 参考文章1中预编译的骨架屏组件可以替换为图片（svg）； 或者设计者设计了它。 小程序的骨架屏没有预渲染的概念，但仍然可以预编译骨架屏组件并放置到页面上，等异步请求的数据返回后更新页面。 传播这个词