对骨架屏的研究

骨架屏简介：

骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。

1. 作为spa中路由切换的loading,结合组件的生命周期和ajax请求返回的时机来使用.
2. 作为首屏渲染的优化.

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

 

1.事先编写好骨架屏组件通过ssr render 解析注入html文件中(除了需要自己编写外其实过程类似于上面的自动化方案)

2.事先编写好的骨架屏组件可以用图片代替 (svg) ，或者设计师设计好.