什么是骨架屏
骨架屏指的是当你打开一个 web 页面，在页面解析和数据加载之前，首先展示给用户大概的样式。
为什么需要骨架屏
- Google Research 的研究显示，53% 的用户在等待加载 3s 后，选择关闭 Web 页面或应用，导致用户流失。
- 当下前端框架，基本都是js 驱动型的，也就是说在JS 代码解析完成之前，页面是不会展示任何内容，即所谓的白屏。
- 用户体验、用户感知会更友好。
现有市面上的方案
- 手写骨架屏 手动html+css样式占位
缺点： 跟不上UI改变与需求更迭，属于机械化劳动方式。
- 内容直出 服务端渲染（ssr） 或者 vue 预渲染
缺点： 内容直出，需要服务端支持，涉及到服务构建、部署、缓存等，成本与风险加大。
- 结合当前项目，与各方优缺点，这里采用page-skeleton-webpack-plugin（element 自动生成骨架屏插件），进行尝试。
优点：对现有页面、构建工具侵入性最小。
缺点：生成会有差异，需人工校验，且打包有一定的样式内容体积。
page-skeleton-webpack-plugin 插件的基本思路
通过 puppeteer 打开开发中的需要生成骨架屏的页面，在等待页面加载渲染完成之后， 在保留页面布局样式的前提下，通过对页面中元素进行删减或增添，对已有元素通过层叠样式进行覆盖，这样达到在不改变页面布局下， 隐藏图片和文字，通过样式覆盖，使得其展示为灰色块。最后将修改后的 HTML 和 CSS 样式提取出来，这样就是骨架屏了。
主要步骤思路如下：
演示&体验流程：
- 1、更新leka 命令 - 引入page-skeleton 插件 & 替换<--shell -->插件
- 2、安装依赖，（有puppteer 需用cnpm）
- 3、跑leka serve 模式，进行骨架屏生成（评估好是否合适用骨架屏）
- 4、本地prod打包， (web_leka是新乐效，就上传shell 目录文件内容，然后打包进去)
骨架时序图
修改部分说明
- 修复一些page-skeleton-webpack-plugin插件问题，详见 Demo 踩坑
- 优化预览二维码，实现实时修改样式，二维码实时更新
- 手机扫一扫预览，加入适配flexible.js,保证看到的样式更真实
- 调整priview 预览，把原1280宽度改成375手机宽度
原1280宽度，容易误认为框内就是手机的全部: 
结合当前，需修改项
- 实际上线后，骨架屏会看到初始样式，然后才是适配后的样式, todo。
- 迁移到web_leka工程todo。
- weex 骨架是否可以生成？
- 调整、优化生成的dom, 如head块，app里是不需要的。
融入项目遇到
- Jenkins 读取指定目录地址无反斜线处理，导致读取失败。
const os = require('os')
os.type() // Linux Windows_NT Darwin
- 安装依赖过程耗时长，Jenkins 一直失败
1、依赖放dependencies。
2、npm config set puppeteer_download_host=https://npm.taobao.org/mirrors 保证安装成功
3-10 年内部岗位涉及前后端、PM（虾皮内推、乐信内推、vivo、oppo）推荐机会，欢迎联系，wx号： X915324 ； 也可发简历到： zgxie@126.com