小程序分屏加载实践
在小程序不断迭代的时候,很容易遇到首屏渲染问题。这种问题,可能出现的原因是:小程序包太大,资源需要加载;网络环境太差,下载速度太慢;渲染节点太多,渲染耗时。 针对小程序首次加载包的问题,小程序提出了分包加载的功能,这里不做详细描述,可以去看下官方文档 这里我选择的是针对渲染节点去做优化。 技术方案在微信的API文档里面,有一个判断节点与可视区域的API IntersectionObserver 对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见 这个时候就在想,能不能建立? // 伪代码
// 建立监听
element.observer()
// 处理进入
observer.handleEnterView(() => {
callback() // 处理回调
disconnect() // 销毁
})
复制代码
<!-- component -->
<view class="component">
<"component-header"></view>
<"component-observer" wx:if="{{ observer_status}}"></"component-content" wx:else>
<!-- your content -->
</view>
</view>
复制代码
开发阶段建立了基本技术方案之后,就开始到代码层面了 Component({
data: {
observer_status: true
},// 在ready写是因为组件在这个时候,才在视图层布局完成
ready () {
// 因为我们是把设备的整个可视区域当成了观参照区域,所以这里直接选择relativeToViewport,如果需要其他的观察区域可以调用relativeTo选择参照区域
this.observer = this.createIntersectionObserver().relativeToViewport()
// 我这里的做法是,只要观察的节点进入了可视区域,就显示自己本身的内容
// 实际上这个observer的回调触发时机是观察节点进入或者离开可视区域,我这里选择的是,只要执行了就显示这个区域,并且关闭这个观察
this.observer.observe('.observer',(res) => {
this.setData({
observer_status: false
})
this.observer.disconnect()
this.observer = null
})
},detached () {
// 如果未进入可视区域就离开了,也需要销毁自己的观察
this.observer && this.observer.disconnect()
}
})
复制代码
优化你们以为这就完了么,并没有。 对于一个小程序页面,它是可以由template或者Component组成的。对于template来说,需要在Page里面定义,而且如果观察的东西比较多的话,需要设置? 对于组件开发来说,如果每个组件都这样写的话,是否也会跟? 这个时候,组件的好处就来了。在定义组件的时候,有一个很神奇的属性,他就是? ,detached () {
this.observer.disconnect()
}
})
复制代码
)
Component({
behaviors: [mixin]
})
复制代码
或者你可以把整个observer做成组件,这样去减少observer的数量,内聚一些模块
|