骨架屏
# 骨架屏
骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图）
# 骨架屏方案
（1） 手动书写骨架
- 使用图片、svg 或者手动编写骨架屏代码
使用 HTML + CSS 的方式，我们可以很快的完成骨架屏效果，但是面对视觉设计的改版以及需求的更迭，我们对骨架屏的跟进修改会非常被动，这种机械化重复劳作的方式此时未免显得有些机动性不足
（2）自动生成骨架
- 通过预渲染手动书写的代码生成相应的骨架屏
vue-skeleton-webpack-plugin，通过 vueSSR 结合 webpack 在构建时渲染写好的 vue 骨架屏组件，将预渲染生成的 DOM 节点和相关样式插入到最终输出的 html 中。
- 饿了么内部的生成骨架页面的工具（已不维护）
该方案通过一个 webpack 插件 page-skeleton-webpack-plugin 的方式与项目开发无缝集成，属于在自动生成骨架屏方面做的非常强大的了，并且可以启动 UI 界面专门调整骨架屏，但是在面对复杂的页面也会有不尽如人意的地方，而且生成的骨架屏节点是基于页面本身的结构和 CSS，存在嵌套比较深的情况，体积不会太小，并且只支持 history 模式。
实现原理：通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架页面的页面，在等待页面加载渲染完成之后，在保留页面布局样式的前提下，通过对页面中元素进行删减或增添，对已有元素通过层叠样式进行覆盖，这样达到在不改变页面布局下，隐藏图片、文字和图片的展现，通过样式覆盖，使得其展示为灰色块。并且将修改后的 HTML 和 CSS 样式提取出来，通过 webpack 插件的形式注入最后生成的 html 中，并且还可以启动 UI 界面专门调整骨架屏代码。
缺点：
（1）由于生成的骨架屏节点是基于页面本身的结构和样式，在某些嵌套比较深的页面，骨架屏代码体积不会很小，并且对于多路由的页面，生成的代码就更加庞大了
（2）无法选择生成骨架屏的时机。当页面存在着重定向(H5 需要鉴权)的时候，生成的骨架屏和预期相差比较大
（3）某些依赖浏览器 jsbridge 接口的页面，工具无法使用
（4）只支持 history 路由
- 京东 dps
结合 Puppeteer 自动生成骨架屏；
实现原理：通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架页面的页面，在等待页面加载渲染完成之后, 执行遍历 dom 树的脚本代码，通过单纯的 DOM 操作，挑选目标节点，生成骨架屏 html 和 css 代码
简单概括原理：遍历页面上的节点，根据制定的规则生成相应区域的颜色块，最终形成页面的骨架屏；
缺点：
（1）无法选择生成骨架屏的时机。当页面存在着重定向(H5 需要鉴权)的时候，生成的骨架屏和预期相差比较大
（2）内部实现并不完善，某些元素比如伪元素等无法生成骨架屏
（3）某些依赖浏览器 jsbridge 接口的页面，工具无法使用