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

白屏解决方案

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

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

使用骨架屏

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

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

1、定义：

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

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

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

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

2、使用方法：

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

点击生成骨架屏后会有一个弹窗提示，点击确认即可。

确定后将在当前页面同级目录下生成 page.skeleton.wxml 和 page.skeleton.wxss 两个文件，分别为骨架屏代码的模板和样式。

2.2、将骨架屏代码引入

点击

index.skeleton.wxml

文件会有一下使用方法的提示。

1. 在index.wxml中引入骨架屏代码，用wx:if和wx:else动态切换页面两种不同的版本
2. 在index.wxss中引入骨架屏样式
3. 在index.js中设置loading初始值为true，在接口请求成功后loading值改为false

总结：

• 一般哪个时间节点使用骨架屏以及何时消除骨架屏？ 在data数据对象中默认设置loading等于true。它会在initDataSendTime这个时间节点发送到视图层，然后进行渲染（骨架屏版本）。 从后端接口动态加载数据这个动作要放在Page.onLoad这个周期函数里面甚至更早的周期函数里面去执行。等这个数据加载完成后立马就将这个数据塞到数据源对象里边，同时将loading设置为false。（消除骨架屏，显示页面内容版本）
• 不要直接修改生成的骨架屏的代码。 如果需要个性化修改，可以在project.config.json这个配置文件中修改，这样方便我们在多个骨架屏页面保持统一的一个风格。可查看官方文档进行配置哦！
• 不要过度去使用骨架屏。 一般只给主页去添加骨架屏效果
• 官方Tips

初始渲染缓存

工作原理：在小程序启动页面的时候，尤其是小程序冷启动进入第一个页面的时候，由于逻辑层初始化的时间比较长，等到逻辑层与视图层全面初始化完毕再渲染出这个页面可能会看到白屏现象，这是我们不想给用户看到的，启用初始渲染缓存可以使视图层不需要等待逻辑层初始化完毕，也就是这个时候我们可以跳过逻辑层与视图层初始化完成时间点的这样的一个对齐的限制，直接提前将一个缓存的页面渲染结果展示给用户。
具体的实现的流程它是这样的，在小程序页面的第一次被打开的时候，微信就将这个页面的初始渲染的结果记录下来，然后写入到一个临时的缓存区域里面，在这个页面第二次打开的时候，微信它查看缓存里面有没有这个页面，如果是有 直接就把这个页面展示给用户，但是我们要知道缓存的页面它是无法响应用户的交互事件的，需要等到这个页面真实渲染完成以后这个页面才可以正常访问

官方文档: 初始渲染缓存
官方教程: 代码按需注入与初始渲染缓存

1、定义

初始渲染缓存是第一次页面运行的时候由微信客户端负责将这个页面在本地的某个区域缓存起来，下次真正的页面未加载之前(热启动），先展示缓存过的页面。

2、静态初始渲染缓存

静态初始缓存以页面初始的data数据与页面里面的wxml标签代码共同渲染成一个页面在本地缓存，在下一次用户访问页面的时候，不必等逻辑层代码初始化完毕它就会将缓存的页面内容先发给用户展示，在一定程度上，初始渲染缓存的页面相当于是一个静态化的本地化的骨架屏页面。

**在页面的 .json 文件中添加配置项

"initialRenderingCache": "static"

**

如果想要对所有页面启用，可以在 app.json 的 window 配置段中添加这个配置：

{
  "window": {
    "initialRenderingCache": "static"
  }
}

添加完这些配置项之后，在手机中预览小程序首页，然后杀死小程序再次进入，就会通过初始渲染缓存来渲染首页。

3、动态初始渲染缓存

与静态初始缓存不同的是动态缓存可以指定缓存的内容

**在页面的 .json 文件（单页面）中添加配置项

"initialRenderingCache": "dynamic"

**

此时，初始渲染缓存不会被自动启用，还需要在页面中调用 this.setInitialRenderingCache(dynamicData) 才能启用。
其中， dynamicData 是一组数据，与 data 一起参与页面 WXML 渲染。

<view wx:if="{{loading}}">{{loadingHint}}</view>

Page({
  data: {
    loading: true
  },
  onReady: function() {
    this.setInitialRenderingCache({
      loadingHint: '正在加载' // 这一部分数据将被应用于界面上，相当于在初始 data 基础上额外进行一次 setData
    })
  }
})

4、支持的组件

总结

• this.setInitialRenderingCache 调用时机不能早于 Page 的 onReady 或 Component 的 ready 生命周期，否则可能对性能有负面影响。
• 要尽量避免频繁调用 this.setInitialRenderingCache，如果在一个页面内多次调用，仅最后一次调用生效。
• 如果想禁用初始渲染缓存，调用 this.setInitialRenderingCache(null) 。