百度小程序优化

最新推荐文章于 2024-04-26 16:42:01 发布

CallMeDogKing

最新推荐文章于 2024-04-26 16:42:01 发布

阅读量1.5k

点赞数 2

分类专栏：百度小程序文章标签：百度小程序优化性能代码

本文链接：https://blog.csdn.net/weixin_42819940/article/details/89415163

版权

百度小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

百度小程序优化

小程序中多张图片懒加载方案

由于小程序对用户内存使用进行了限制，如果一个页面的图片过多，会导致内存不足的内部错误。
小程序文档中有新增image的lazy-load属性，当值为true时生效，注意：只针对page与scroll-view下的image有效。

条件判断将swan:if换成了hidden

在百度小程序中，没有hidden属性，所以无法同微信小程序那般，将条件判断将wx:if换成了hidden

微信小程序的相关优化：
在小程序中使用wx-if，是基于局部渲染的形式。比如wx:if初始渲染条件为false时，框架什么都不会做；只有为真的时候才开始渲染该组件。而使用hidden在初始的时候就会渲染，它的值只是负责该组件的显示与隐藏。因此在切换的时候，wx:if有更高的性能消耗，当我们项目需要频繁切换时，建议把wx:if换成了hidden。

<view class="component-loading" hidden="{{!bottomDataloading}}">
  <template is="template-loading-line-scale" data="{{color: '#ccc'}}" />
</view>
  
<view
  hidden="{{!showInput}}"
  class="add-comment-control {{isIphoneX ? 'add-comment-control-iphonex' : ''}}"
  style="bottom: {{keyboardHeight}}px">
  <input
    value="{{commentText}}"
    bindfocus="handleCommentFocus"
    bindblur="handleCommentBlur"
    cursor-spacing='{{0}}'
    bindconfirm="handleCreateComment"
    focus="{{focus}}"
    type="text"
    placeholder="{{placeholder}}"
    adjust-position="{{false}}"
    confirm-type="send"
    class="write-comment" />
</view>

优化代码包大小

小程序代码包限制为2M，资源包4M，可以尽量优化代码，删除无用代码实现优化。小程序官方文档中提供了一些常规的控制代码包大小的方法：
在这里插入图片描述

精简代码，去掉不必要的SWAN结构和未使用的CSS定义；
减少在代码包中直接嵌入的资源文件；
压缩图片，使用适当的图片格式。

压缩本地图片或将本地图片上传至服务器

将本地图片压缩，会减少一部分包的大小。还有就是，在项目有引入本地较大的图片，可将图片转为.jpg格式，也可以压缩代码包大小；另一种方式，可以将本地图片上传至服务器，使用链接引入的方式显示图片。

代码包分包加载（画重点）

因为分包加载这块篇幅过长，直接引用官方提供的介绍
这块中微信小程序和百度小程序的功能点和原理是一样的，可参考两个的小程序手册
微信小程序 ——详见小程序启动
百度小程序 ——详见分包加载
微信小程序的链接——介绍了小程序启动全过程以及小程序为什么要使用分包加载
百度小程序的链接——介绍了小程序的分包加载的使用过程

setData优化（重点的爹）

在浏览了一部分的论坛博客，众说纷纭，不过大致就以下几点（亲测）

不要过于频繁调用setData，应考虑将多次setData合并成一次setData调用；

在这里插入图片描述
例子如下

Page({
  onShow: function() {

    // 不要频繁调用setData
    this.setData({ a: 1 })
    this.setData({ b: 2 })
    // 绝大多数时候可优化为
    this.setData({ a: 1, b: 2 })
  }
})

数据通信的性能与数据量正相关，因而如果有一些数据字段不在界面中展示且数据结构比较复杂或包含长字符串，则不应使用setData来设置这些数据；

在这里插入图片描述

Page({
	data:{
		nowebview: '' ,
		webview: ''
  	},
  	onShow:function(){
  		//需要将渲染在视图层的数据用setData来赋值
		this.setData({
			webview: 1
		});									
		//不需要再视图层渲染的数据应尽量避免使用setData来赋值
		this.data.nowebview = 2;
	}
})

与界面渲染无关的数据最好不要设置在data中，可以考虑设置在page对象的其他字段下

例子如下

Page({
	// 不要设置不在界面渲染时使用的数据，并将界面无关的数据放在data外
    this.setData({
      myData: {
        a: '这个字符串在WXML中用到了',
        b: '这个字符串未在WXML中用到，而且它很长…………………………'
      }
    })
    // 可以优化为
    this.setData({
      'myData.a': '这个字符串在WXML中用到了'
    })
    this._myData = {
      b: '这个字符串未在WXML中用到，而且它很长…………………………'
    }
})

切勿在后台页面进行setData
在一些页面会进行一些操作，而到页面跳转后，代码逻辑还在执行，此时多个webview是共享一个js进程；后台的setData操作会抢占前台页面的渲染资源；

ps:
单线程（百度百科）
————单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。