介绍
1，骨架屏这个东西非常符合工程化的要求，2，爬虫、测试、工程化等等东西之间的联系是如何
# puppeteer
puppeteer 这个东西牛的地方在于它是根植在chrome的，各种方法都非常契合浏览器的思路
这个真的是相当大的优点，我以前用过auto.js，一款专门用于写手机脚本，类似于脚本精灵的东西，他定位某个块体有三个思路，一是类似于控制台中找dom（手机开发者模式也可以看到），但很多app都禁用了这个部分，二是强行定位，但这只要个随机的东西就爆炸，三就是基于opencv用颜色识别来找，但这个性能就有点堪忧了。而pupeeteer却基本看不到什么暴力破解的笨办法，
# 爬虫脚本与测试
一般来讲都是拿puppeteer来做爬虫或者是测试的（实际脚本完全没必要这么高级，一个request加一个分析的模块基本就够用，现在往往用作e2e测试） 说句题外话，这个东西的快照非常好用，得到的照片特别小
爬虫和测试其实本质上是挂点沟的，因为能经得起脚本折腾，那就能经得起人折腾，就能经得起测试
因为写测试这个东西本身堪比带病坐牢，再加上这个包体积很大。如果只有这点作用，puppeteer很难让人喜欢的起来，
# 骨架屏
这是一个有蛮多文章正儿八经讨论的东西，其实本质上非常简单，因为就是把写好了的块体换成某阴影即可，任何一个刚学css的都能做。 正是因为其特别简单，再加上可能有定制化需求，导致写骨架屏变成了简单的重复工作。所以就希望其能进入自动化的流程里，当程序写完时，自动产生对应骨架屏
现在很多的骨架屏，大多都不像是自动化出来的，至少知乎肯定不是，当然也有不采用骨架屏的
# 解决方案
我的思路是这样的，骨架屏对应的是每个页面，那么最理想的情况就是自动遍历完每个页面，每经过一个，就生成一个骨架屏（就是和人眼的流程一致） 那么我就在路由守卫处，加一个puppeteer写的程序，去将页面中的对应元素做处理（比如让他变灰），再生成快照，跳转一次生成一张。
最契合的应该是Nuxt，约定式的东西，遍历完后，在loading.vue里面根据跳转的页面，渲染对应的骨架屏,vue的话，高级组件或者suspend都行 要让页面的模式集中，也就是虽然有各种页，但只有几种模式，所以只要做几个骨架屏就行（感觉大部分app，有骨架屏的，都是这个思路 因为快照非常小，10kb+,才能适合这个方案，正常的骨架屏一般都是代码的格式而非图像的格式（前提是骨架屏数量较少，如果多了就要请求更多的图片，性能一定出问题）
# 难点
这一定要是一个约定式的思路，就是我一定要知道，骨架屏处理的块体是什么dom，对应的处理方式是什么（这个可以在puppeteer里面设置css），如果，比如我要把所有的文字在加载之前变灰，但有的文字在li标签下，有的在div下，有的在h1下，这个时候利用dom节点更改就完全无法处理 还有，原页面一些样式也会对puppeteer影响，无法正确渲染
# 附 10-7
虽然我个人觉得这个图片已经算比较小的了，10+kb放在网络里面也不会有啥压力，但感觉如果靠html做会优雅一些，这个用Puppeteer应该也行，不过我要再想想，要想个办法让各个文字节点再删减文字后宽高不变（其实不删减文字也行，甚至可以说更好，相当于直接把原本的html爬下来再加css覆盖即可，但这样就实在太不优雅了（笑。一大堆代码里面全是些没用的或者被覆盖的部分了。