小程序原理
采用双线程架构,分为逻辑层和渲染层。
逻辑层产物:打包出一个app-service.js的代码,包含主包的代码。 逻辑层产物:html文件,html文件加载了基础库的js和视图层的js。 基础库js负责渲染、通信、底层基座等工作,包括怎么把代码渲染到页面上,怎么和逻辑层通信。
数据通信需要通过native,触发的事件由渲染层传给native,再传给逻辑层,逻辑层处理事件,再把处理好的数据给native,native再给渲染层,渲染层来渲染。
小程序的基础库
- 负责驱动整个业务逻辑js的执行、运行
- 提供小程序运行时所需的各种API
setData优化
- 合并setData,减少setData操作次数
- 状态提升数据预处理,主要表现在列表类型的组件,最好不要在子组件的初始化中做setData,因为每次初始化都会调用,所以解决方式就是将这个需要计算的状态移到父组件中计算好,直接当属性传入到子组件中
- 上述解决性能的另一种方式是使用wxs,wxs是运行在试图层的,不需要经过与native的通信,所以处理起来效率高,但我觉得使用这个的问题在于逻辑分散了,可能哪里都存在逻辑处理。
- 非渲染数据不要放到setData中,将业务数据与渲染数据分离开。
- 控制setData数量,只改变需要改变的字段,可以做数据diff
- 渲染任务分片:长列表场景,虚拟列表使用,分页等。
- 控制渲染优先级,setTimeout等