最近项目中时不时需要骨架屏，所以抽空研究了一下骨架屏方案。骨架屏的做法已经有很多了，很多人都有自己的解决方案。做了介绍。这里我根据个人的理解做了一个总结和分类，分享给大家。关于骨架屏（简介）骨架屏是在页面数据加载之前，向用户展示页面的大致结构，直到请求数据返回，然后渲染页面，添加需要展示的数据内容。常用于文章列表、动态列表页等比较规则的列表页。在很多项目中都有应用：例如：饿了么H5版、知乎、Facebook等网站。以一张图为例如下：在介绍两种使用方式的时候都做了使用说明，但是还可以进一步细分：作为spa中路由交换机的加载，结合使用随着组件的生命周期和ajax请求的返回时间。作为首屏渲染优化。第一种用途。第一种使用需要自己写骨架屏。推荐两个成熟方便的自定义svg组件定制为骨架屏方案react-content-loadervue-content-loader作为首屏渲染（自动化方案）本方案是饿了么在骨架屏实践中总结的一套方案：骨架屏的dom结构和css在离线构建的时候注入到模板中的节点中。原理参考饿了么骨架屏插件实现原理方案项目地址：page-skeleton-webpack-plugin使用时注意事项：cssUnit配置：需要使用自适应单位，根据选择范围选择文档中给定的，px直接生成的比例是不合适的。Puppeteer大约有80M。安装过程中，可能一次下载不成功。原理：使用puppeteer在server端控制headlessChrome打开开发中需要生成骨架屏的页面。等待页面加载渲染完成后，在保留页面布局样式的前提下，通过删除或添加页面中的元素，将已有的元素用层叠样式覆盖，实现隐藏图片和文字而不改变页面布局，通过样式覆盖使它们呈现为灰色块。然后提取修改后的HTML和CSS样式，就是骨架屏。其他方案结合ssrrender/prerender使用：骨架屏组件提前写好，通过ssrrender解析注入到html文件中（除了需要自己写，实际过程与上述自动化方案类似）参考文章1中预先写好的骨架屏组件，可以用图片（svg）代替；或由设计师设计。小程序的骨架屏没有预渲染的概念，但是还是可以自己预渲染。写好骨架屏组件放到页面上，异步请求数据回来后更新页面。广而告之，本文发表于薄荷前端周刊，欢迎关注星★，转载请注明出处。欢迎讨论，点个赞走咯?????～
