骨架屏介绍
更新时间：2024-12-20 15:49:25
骨架屏
骨架屏是页面的一个空白版本，在逻辑层通信数据到渲染层呈现视图之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。
骨架屏效果(可配合IDE自动生成骨架工具使用)
运行效果
平台骨架屏加载流程
平台级别的骨架屏将参与到构建编译的流程中，并配合容器在最早的时机初始化骨架屏资源以给到用户最佳的过渡体验，容器会在启动阶段读取骨架屏的相关配置，并配合离屏渲染策略进行骨架屏渲染，并由开发者来决定真实内容的上屏时机
整个加载过程如下图所示：
骨架屏对于页面加载复杂，LCP 到达率较低的页面，提升效果显著。一般如果首屏渲染的节点超过 2000+，低版本的设备上可能就会出现首屏慢的问题，这时我们强烈建议开发者接入骨架屏来提升用户体验，降低 LCP 指标。
以下为一个 benchmark 案例，可以体验在首屏渲染超过（8000+）节点时，骨架屏对小程序加载体验的优化效果：
开发骨架屏
骨架屏通过 .skeleton.xhsml 和 .skeleton.css 文件定义视图内容和样式。与开发普通页面的视图模板几乎相同。
针对某个小程序的页面路径打开骨架屏，只需要在对应的 .json 文件中追加如下：
json
{
"navigationBarTitleText": "小程序示例",
"backgroundColor": "#EFF1F2",
"navigationStyle": "custom",
"usingComponents": {},
// 配置骨架屏字段
"skeleton": {
// 指定骨架屏路径 (注：平台默认加载 [name].skeleton.css 文件)
"path": "./component.skeleton.xhsml"
}
}
在合适的时机（一般是页面绝大部分依赖的渲染数据都获取到并渲染后），移除骨架屏，譬如 onLoad 请求结束后，移除骨架屏：
js
Page({
data: {
dataSource: []
},
onLoad() {
this.loadData().then(res => {
if (res.data) {
this.setData({
dataSource: res.data || []
}, () => {
this.removeSkeleton && this.removeSkeleton()
})
}
})
}
})