search

didi / chameleon

🦎 一套代码运行多端，一端所见即多端所见
http://cml.didi.cn/
Apache License 2.0
9.02k stars 692 forks source link

小程序setData性能漏洞 #475

Open Dongjian413 opened 4 years ago

Dongjian413 commented 4 years ago

bug描述 比如：

<template>
<page title="chameleon">
  <text class="test_text">{{title}}</text>
</page>
</template>

我的页面只有这一个text组件，使用到了title属性，然后 data里面有 titile content 两个属性 当我使用 this.content = xxx的时候，其内部在小程序会调用setData导致页面刷新，但实际上 content 根本与页面无关

引起该问题的原因： CML的内部逻辑是 this.content = 3 等同于 this.setData({ 'content' : 3, }) 意味着 data 里面的所有属性，都会导致页面刷新，即使某些数据我们只是页面内部业务逻辑需要记录的数据而并不是呈现给用户看到的数据，并且 setData接口的调用涉及逻辑层与渲染层间的线程通过，通信过于频繁可能导致处理队列阻塞，界面渲染不及时而导致卡顿，应避免无用的频繁调用

期望场景： 当组件 data 里出现与页面无关的属性进行赋值时，内部不要调用 setData 方法，参照 VUE 的 diff算法

修改想法： 建议新增“渲染忽略数据规则”，或者建立一个新的数据放置区域，该区域内的数据进行赋值不会调用 setData

编译环境信息

运行环境信息

shaoyecf commented 4 years ago

666