多维表格/业务库表格大数据量性能瓶颈

news2024/11/24 12:53:42

先说最终结论：Angular 组件创建性能损耗是当下主要的性能瓶颈

理由：
基于以往编辑器性能优化的经验，编辑器在动态渲染内容时会创建很多壳子组件（也就是Angular 组件），排查的时候就发现如果略这些壳子组件性能可以有一倍的提升，所以有了对编辑器的一次大的性能优化 #TECHW-20 编辑器性能优化：使用 ListRender 渲染列表，核心就是自己写列表的渲染去掉中间的壳子组件。
排查业务组件库表格性能问题（styx-table），发现了同样的问题，就是在组件进入 reflow 之前会有很长一段时间的 js 的执行时间，300 条数据、9个字段大概有 350ms 的纯脚本的执行时间，这 350ms 应该是 angular 组件创建的性能损耗。
v-table 上简单测试，渲染 240 行、30 个字段，各种场景下：

壳子组件（grid-cell）500ms
使用模版（ng-template）100ms
直接绑定 40ms

初步方案：
表格核心部分的渲染不基于 Angular 组件，而是基于原生 HTML 或者 WebComponent 组件（需要验证性能表现），这种方案的带来的问题是需要自己重写每一种字段的显示组件，无法复用组件库或者业务组件库组件，而单元格的编辑可以通过桥接、定位的方式复用业务组件库组件

测试表现：

在这里插入图片描述

<div class="grid-cell">
  <div class="text-column">
    <span class="d-block">{{ data.value }}</span>
  </div>
</div>

模版

<ng-template #text let-data="data">
  <div class="grid-cell">
    <div class="text-column">
      <span class="d-block">{{ data.value }}</span>
    </div>
  </div>
  <!-- <ng-template [ngTemplateOutlet]="text2" [ngTemplateOutletContext]="{ data }"></ng-template> -->
</ng-template>

模版套模版

<ng-template #text let-data="data">
  <!-- <div class="grid-cell">
    <div class="text-column">
      <span class="d-block">{{ data.value }}</span>
    </div>
  </div> -->
  <ng-template [ngTemplateOutlet]="text2" [ngTemplateOutletContext]="{ data }"></ng-template>
</ng-template>


<ng-template #text2 let-data="data">
  <div class="grid-cell 22">
    <div class="text-column">
      <span class="d-block">{{ data.value }}</span>
    </div>
  </div>
</ng-template>

组件

<!-- 使用组件 -->
<v-table-text
[value]="data.value"
></v-table-text>
<!-- 内部模版 -->
<!-- <v-table-text2 value="{{value()}}"></v-table-text2> -->
<span class="d-block">{{ value() }}</span>

组件套组件

<!-- 使用组件 -->
<v-table-text
[value]="data.value"
></v-table-text>
<!-- 内部模版 -->
<v-table-text2 value="{{value()}}"></v-table-text2>
<!-- <span class="d-block">{{ value() }}</span> -->