小程序小程序性能探索----骨架屏

Posted teemor

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序小程序性能探索----骨架屏相关的知识,希望对你有一定的参考价值。

骨架屏是什么?

在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. 节点

 

以上是关于小程序小程序性能探索----骨架屏的主要内容,如果未能解决你的问题,请参考以下文章

Java防锁屏小程序

如何实现全屏小程序及自定义左上角胶囊

音乐播放器锁屏小部件 Android

Flutter中的Android锁屏小部件?

uniapp骨架图使用不了

如何将 QVideoWidget 设置为全屏并在全屏小部件中有音量滑块?