标签：衡量 生成 还需 插入 带来 syn shel 业务 访问速度
骨架屏是什么？
在Goole提出的以用户为中心的四个页面性能衡量指标中，FP/FCP(首屏渲染)。
关于尽快渲染出首屏，减少白屏时间，常见的优化方式大致有以下几种：
1. 优化关键渲染路径，尽可能减少阻塞渲染的JavaScript和CSS，常见做法包括使用async/defer让浏览器下载JavaScript的同时不阻塞HTML解析，内联页面关键部分的 样式
2. 使用Service Worker 缓存AppShell，加快后续访问速度。
3. 使用HTTP/2 Server Push,帮助浏览器今早发现静态资源，减少请求数。浅谈HTTP/2 Server Push
骨架屏充分利用了前两点。
实现思路
从H5生成骨架屏方案说起，总得来说H5生成骨架屏的方案有2种
1. 完全靠手写HTML和CSS方式给每个页面定制一套骨架屏
2. 利用预渲染的方式生成静态骨架屏
第一套方案，无疑是最简单最直白的方式，缺点也很明细，加入页面布局有修改的话，那么除了修改业务代码之外还需要额外修改骨架屏，增加了维护的成本。
第二套方案，一定程度上改善了第一套方案带来的维护成本增加的缺点，主要还是使用工具预渲染页面，获取到DOM节点和样式，保留页面结构，覆盖样式，生成灰色块盖在原有文本、图片或者是canvas等节点上面，最后将生成的HTML和CSS打包出来，就是一个带有骨架屏的页面。最后再利用webpack工具将生成的骨架屏插入到HTML页面，详细的话可以看看饿了么的分享。
小程序生成骨架屏
1. 预渲染
2. 节点
标签：衡量 生成 还需 插入 带来 syn shel 业务 访问速度
原文地址：https://www.cnblogs.com/teemor/p/9759540.html
