您的位置:首页 > 健康 > 养生 > 网站seo设置是什么意思_中卫网站制作公司_信息流优化师没经验可以做吗_网页制作公司

网站seo设置是什么意思_中卫网站制作公司_信息流优化师没经验可以做吗_网页制作公司

2025/4/17 5:46:29 来源:https://blog.csdn.net/weixin_63515766/article/details/145595490  浏览:    关键词:网站seo设置是什么意思_中卫网站制作公司_信息流优化师没经验可以做吗_网页制作公司
网站seo设置是什么意思_中卫网站制作公司_信息流优化师没经验可以做吗_网页制作公司

在一些小程序列表的页面,总是会看到小程序控制台的黄色警告:

这是由于data 数据过大,导致的问题

方法:

1.避免setData的数据过大,小于1024kb。

2.避免调用频繁,保证数据实时性。

3.避免未绑定在WXML的变量传入setData,也就是不显示的数据不写入方法中。

4.不需要使用的字段让后端删除

5.尽量避免大循环

6.尝试使用uni.createIntersectionObserver

重点尝试uni.createIntersectionObserver


传送门:https://uniapp.dcloud.net.cn/api/ui/intersection-observer.html#createintersectionobserver

思路参考:

用户在划动列表的时候,离开可视范围的数据卸载dom元素,在接近可视范围的时候挂在dom元素,这样可以减少dom元素的数量以达到性能优化的目的

获取到数据的时候给数据初始化增加单个item是否展示的show,默认为true,单个item初始化的实例值为null,单个item的高度为0,然后获取到单个item的id,给每个item绑定一个createIntersectionObserver实例,这个实例返回的参数有个intersectionRatio为相交点的值,如果intersectionRatio为0则表示当前这个item不在可视范围,可以卸载dom元素,不等0的时候就是item在可视范围之内,需要展示dom元素

在获取到后端数据的时候增加初始化值
前后代码逻辑忽略:

获取到数据之后,做生成实例处理:
 

				// ----性能优化方案this.$nextTick(() => {this.prescriptionList.forEach(item => {// 判断为创建过实例if(!item.observer) {// 创建并返回一个 IntersectionObserver 对象实例item.observer = uni.createIntersectionObserver(this);// 指定页面显示区域作为参照区域之一,假设windowHeight=617,即超出屏幕上方617*2px和超出屏幕下方617*2px时,则把dom元素v-if隐藏console.log('this.$system.windowHeight', this.$system.windowHeight,'this.$system.windowHeight')item.observer.relativeToViewport({ top: this.$system.windowHeight * 2, bottom: this.$system.windowHeight * 2 }).observe(`#${item.virtualId}`, res => {/*** 指定目标节点并开始监听相交状态变化情况。回调函数callback包含一个参数result。observe(selector, [callback])* intersectionRatio:相交比例-最大值1-最小值0,0~1区间*/item.intersectionRatio = res.intersectionRatio;if(res.intersectionRatio === 0) {// 超过预定范围,从页面卸载dom元素item.virtualShow = false;}else {// 达到预定范围,将dom元素渲染进页面item.virtualShow = true;// 拿到当前item的高度item.itemHeight = res.intersectionRect.height;}})}})})

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com