楼层节点性能优化关联文章 https://docs.taro.zone/blog/2021-02-08-taro-jxpp1.1. 删除楼层节点需要谨慎处理
开发者无需关心是否使用标签来包裹楼层节点
y1aodyip1#
的确不应该将删除节点的复杂度暴露给用户,增加心智负担。而且不止 removeChild ,其实 appendChild 、 insertBefore 都有可能引起和删除节点一样的逻辑。
removeChild
appendChild
insertBefore
目前逻辑层的 Taro DOM 树经序列化后的数据结构:
const domTreeData = { nodeName: 'view', childNodes: [ { nodeName: 'view', childNodes: [] }, { nodeName: 'view', childNodes: [] }, // 假设删除此节点 { nodeName: 'view', childNodes: [] }, ] }
假设要删除第二个节点,setData 只能是这样写:
this.setData({ 'domTreeData.childNodes': [ { nodeName: 'view', childNodes: [] }, { nodeName: 'view', childNodes: [] }, ] })
可以看到必须更新整个数组,因为小程序 setData 对于数组没有提供类似 splice 的操作方法。而如果只是把 'domTreeData.childNodes.[1]' 设为 null,那会导致逻辑层与渲染层数据不一致的问题。
'domTreeData.childNodes.[1]'
我们也尝试过使用对象代替数组:
const domTreeData = { nodeName: 'view', childIds: ['_a', '_b', '_c'], childeNodes: { _a: { nodeName: 'view', childNodes: [] }, _b: { nodeName: 'view', childNodes: [] }, _c: { nodeName: 'view', childNodes: [] }, } }
删除节点时只需要:
this.setData({ 'domTreeData.childIds': ['_a', '_c'], 'childeNodes._b': null })
但在微信小程序里发现,使用对象的初次渲染速度比使用数组时慢很多,遂放弃。
因此目前还没有很好的解决思路,需要和小程序框架的研发团队沟通更好的解决方案
i7uaboj42#
也就是说,截止到 3.5.12 版本,目前还是需要下图这种手动优化方式? @Chen-jj
px9o7tmv3#
暂时是的
3条答案
按热度按时间y1aodyip1#
的确不应该将删除节点的复杂度暴露给用户,增加心智负担。而且不止
removeChild
,其实appendChild
、insertBefore
都有可能引起和删除节点一样的逻辑。目前逻辑层的 Taro DOM 树经序列化后的数据结构:
假设要删除第二个节点,setData 只能是这样写:
可以看到必须更新整个数组,因为小程序 setData 对于数组没有提供类似 splice 的操作方法。而如果只是把
'domTreeData.childNodes.[1]'
设为 null,那会导致逻辑层与渲染层数据不一致的问题。我们也尝试过使用对象代替数组:
删除节点时只需要:
但在微信小程序里发现,使用对象的初次渲染速度比使用数组时慢很多,遂放弃。
因此目前还没有很好的解决思路,需要和小程序框架的研发团队沟通更好的解决方案
i7uaboj42#
也就是说,截止到 3.5.12 版本,目前还是需要下图这种手动优化方式? @Chen-jj
px9o7tmv3#
也就是说,截止到 3.5.12 版本,目前还是需要下图这种手动优化方式? @Chen-jj
暂时是的