小程序性能优化之——白屏解决方案

出现场景：在启动页面时，尤其是小程序冷启动、进入第一个页面时，逻辑层初始化的时间较长。在页面初始化过程中，用户将看到小程序的标准载入画面（冷启动时）或可能看到轻微的白屏现象

两种方案根据项目需求取其中一种即可。
骨架屏页面启动时占用的时间比初始渲染缓存时间长；初始渲染缓存针对复杂组件不能被展示。

使用骨架屏

优化原理：在数据完成加载之前使用骨架屏和Loading提示，数据完成之后将骨架屏和Loading做不渲染处理，再展示真正的一个页面内容。

官方文档: 骨架屏
官方教程: 使用骨架屏

1、定义：

骨架屏是页面的一个空白版本（展示一个页面骨架而不含有实际的页面内容），通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。

作用：给用户的感觉是数据正在紧张的加载，真实数据马上就可以呈现。

从渲染效率上来讲，骨架屏它并不能使首屏渲染加快。由于骨架屏的一些使用又向用户渲染了额外的一些内容，这些内容是额外添加的、本来是不需要渲染的，它反而从整体上加长了首屏渲染的一个时长。但是骨架屏在这个页面白屏的时候，它给了用户及时的反馈，减缓了用户焦急等待的一个情绪。

注意：骨架屏需要人工手动进行维护，当业务变更时，需要重新生成新的骨架屏并重新引入。

2、使用方法：

2.1、通过微信开发者工具直接生产骨架屏

点击生成骨架屏后会有一个弹窗提示ÿ