Nativescript批量添加元素渲染速度慢于Web端问题咨询

性能问题原因&优化方案 #

• 核心诱因是你的写法触发了多次重复布局计算：你循环30次调用push方法修改数组，每次修改都会触发一次视图更新，WrapLayout每次新增元素都会重新计算所有子元素的排列位置，相当于连续触发了30次原生视图重排，安卓原生布局的计算开销远高于Web DOM，自然会有明显延迟。
• 第一个优化点：批量修改数组，仅触发一次更新
  把你的点击事件逻辑改成一次性替换整个数组，不要多次修改：

click(e) {
  // 一次性生成所有新元素，合并后直接替换原数组，仅触发1次视图更新
  const newItems = Array.from({length: 30}, (_, i) => ({i}))
  this.items = [...this.items, ...newItems]
}

修改后渲染速度会提升数倍，基本能达到你要的瞬时效果。

• 第二个优化点：更换布局容器，优先用可复用列表组件
  WrapLayout本身没有视图复用机制，元素数量越多布局开销越大，如果你需要展示大量平铺元素，替换为CollectionView或者GridView这类自带元素复用能力的列表组件，只会渲染可视区域内的元素，性能会有数量级提升。
• 第三个优化点：手动创建元素时暂停布局计算
  如果你不用Vue绑定，直接用原生API创建元素，记得先暂停父容器的布局计算，所有元素添加完成后再一次性触发布局：

// 先给WrapLayout加id="myWrap"
const wrapLayout = this.$refs.myWrap.nativeView
// 暂停布局，避免新增元素时重复计算
wrapLayout.suspendLayout()
for (let i = 0; i < 30; i++) {
  const label = new Label()
  label.width = 20
  label.height = 20
  label.backgroundColor = 'red'
  label.marginLeft = 5
  label.marginTop = 5
  wrapLayout.addChild(label)
}
// 恢复布局，一次性计算所有元素位置
wrapLayout.resumeLayout()
wrapLayout.requestLayout()

• 额外注意：debug包本身有大量调试日志和运行时检查，性能比release包慢3~10倍，你打正式release包运行的话，速度还会有明显提升，你之前在Playground运行慢就是因为Playground的包是带额外调试逻辑的debug包。

内容的提问来源于stack exchange，提问作者Andrey Kononenko