微信小程序优化方案-一一网

尽量减少不必要的https请求，可使用 getStorageSync() 及 setStorageSync() 方法将数据存储在本地
避免将未绑定在 WXML 的变量传入 setData： setData操作会引起框架处理一些渲染界面相关的工作，一个未绑定的变量意味着与界面渲染无关，传入setData会造成不必要的性能消耗。如数据需要在当前页面共享，可采用定义全局变量的方式（如使用this.）。
避免每次 setData 都传递大量新数据：导致js编译过程变慢，例如在改变data中某个数组的某个数据项是，在setData是可采用只更改某个数据项。列表数据量过大时，也可采用分步渲染加载的方法。

/**
     * 分步添加列表数据
     * @param {*} lists 列表数据
     * @param {*} name data中字段name
     * @param {*} step 每步多少条
     * @param {*} interval 间隔时间
     */
    stepPushList({ lists, name, step = 10, interval = 300, reset = false }) {
      this._clearBaseStepPushTimer();

      if (!lists || !name || !Array.isArray(lists)) return;
      if (lists.length <= 0) return;

      // 步进数量不能小于等于零
      step = step <= 0 ? 10 : step;

      // 如果重置
      reset && (this.data[name] = []);

      let oldLists = this.data[name] || [];
      let newLists = this.copyData(lists);
      let pushLists = newLists.splice(0, step);

      // 设置部分数据
      this.setListPartData({
        partLists: pushLists,
        start: oldLists.length,
        name,
        callback: () => {
          if (newLists.length <= 0) return;
          this._baseStepPushTimer = setTimeout(() => {
            this.stepPushList({ lists: newLists, name, step, interval });
          }, interval || 300)
        }
      });
    },
    // 清理分步定时器
    _clearBaseStepPushTimer() {
      this._baseStepPushTimer && clearTimeout(this._baseStepPushTimer);
      this._baseStepPushTimer = null;
    },
复制代码

不能频繁调用setData（甚至一个函数里面不能调用两个setData函数）: 滑动时会感觉到卡顿，操作反馈延迟严重，因为 JS 线程一直在编译执行渲染，不能及时将用户操作事件传递到逻辑层，逻辑层亦无法及时将操作处理结果及时传递到视图层。
避免使用:active伪类来实现点击态，建议使用小程序内置组件的 ‘hover-class’ 属性来实现。
避免使用.获取对象的深层属性，容易造成微信告警，可使用对象结构默认赋值，增加代码严谨性，不然小程序助手会告警报错。
避免页面节点嵌套过深，增加页面渲染压力
页面退出之前销毁定时器，可在onUnLoad生命周期钩子函数中执行

文章版权归作者所有，未经允许请勿转载。

THE END

前端