第40题(2019-09-16)：如何实现骨架屏，说说你的思路

[qappleh]

No description provided.

[qappleh]

1.如果是首屏可以在index.html中手写骨架屏样式
2.如果是其他页面，可以让UI做一个小的SVG图
3.可以使用组件库中的骨架屏组件
4.可以使用饿了么团队开源的根据页面样式生成骨架屏的工具[还可配置生效路由]

饿了么骨架屏核心思想就是：
1.puppeteer 当 Puppeteer 连接到一个 Chromium 实例的时候会通过 puppeteer.launch 或 puppeteer.connect 创建一个 Browser 对象。这个时候你就会获得当前页面的dom结构。
2.获取你需要做骨架屏的dom元素的宽高，你还可以排除一些你不想做骨架屏的元素。
3.已知了宽高，你就可以去改她的背景颜色变成一个灰色的方框，看起来就会像一个骨架屏了

参考链接：
Webpack插件自动生成骨架页面
一种自动化生成骨架屏的方案
前端骨架屏方案小结
首页白屏的引发的思考

演示demo:
Skeleton Screen with CSS
http://getskeleton.com/

在文档库里建了一个前端骨架屏的资料库，里面有精选文章，有需要的可以点击查看，前端骨架屏资料库