小程序RSA加密以及setData使用优化

652

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情

在用户登录的时候,为了安全,一般要对密码进行加密,本文主要介绍一下Rsa加密算法的使用。以及小程序中使用频率很高的setData使用时候的优化建议。

RSA非对称加密

密钥加密是一种算法,需要两个密钥,一个是公开密钥,一个私有密钥,一个用于加密,一个用于解密。 明文:需要加密的内容,即为明文。 密文:使用密钥加密后的内容,只能用相应的另一个密钥才能解密得到原来的明文。

加密

let encryptor = new Encrypt.JSEncrypt();
encryptor.setPublicKey(publicKey) 
var mi = encryptor.encrypt("123456")

解密

const decryptor = new Encrypt.JSEncrypt();
decryptor.setPrivateKey(privateKey)
var ming = decryptor.decrypt(mi)

image.png

合理使用 setData

setData 是小程序开发中使用最频繁、也是最容易引发性能问题的接口。

1. setData 的流程

setData 可以分成几个阶段

  • 逻辑层虚拟 DOM 树的遍历和更新,触发组件生命周期和 observer
  • 将 data 从逻辑层传输到视图层
  • 视图层虚拟 DOM 树的更新、真实 DOM 元素的更新并触发页面渲染更新

2. 数据通信

小程序的逻辑层和视图层是两个独立的运行环境,属于不同的线程,不能直接进行数据共享,需要进行数据的序列化数据传输、数据的反序列化,因此数据传输过程是异步的、非实时的

3. 使用要求

3.1 data 应只包括渲染相关的数据

setData 应只用来进行渲染相关的数据更新。用 setData 的方式更新渲染无关的字段,会增加额外的渲染流程,影响渲染耗时。

  • 页面或组件的 data 字段,应用来存放和页面或组件渲染相关的数据(即直接在 wxml 中出现的字段);
  • 页面或组件渲染间接相关的数据可以设置为纯数据字段,可以使用 setData 设置并使用 observers 监听变化;
  • 页面或组件渲染无关的数据,应挂在非 data 的字段下,如 this.news = {new: '123'}

3.2 要控制 setData 的频率

每次 setData 都会触发逻辑层虚拟 DOM 树的遍历和更新,也会导致触发一次完整的页面渲染流程。

  • 仅在需要进行页面内容更新时调用 setData;
  • 对连续的 setData 调用尽可能的进行合并

3.3 选择合适的 setData 范围

组件的 setData 只会引起当前组件和子组件的更新,可以降低虚拟 DOM 更新时的计算开销。

  • 对于需要频繁更新的页面元素(例如:倒计时),可以封装为独立的组件,在组件内进行 setData 操作。

3.4 setData 应只传发生变化的数据

setData 的数据量会影响数据拷贝和数据通讯的耗时,增加页面更新的开销,造成页面更新延迟。

  • setData 应只传入发生变化的字段;
  • 建议以数据路径形式改变数组中的某一项或对象的某个属性,如 this.setData({'arr[1].id': '1', 'a.b.c': '2'}),而不是每次都更新整个对象或数组
  • 不要在 setData 中偷懒一次性传所有data:this.setData(this.data)

4. 性能分析

通过组件的 setUpdatePerformanceListener 接口获取更新性能统计信息,来分析产生性能瓶颈的组件。

Component({
  attached() { // 调用时机不能早于 attached
    this.setUpdatePerformanceListener({withDataPaths: true}, (res) => {
      console.log(res)
    })
  }
})