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

本文主要是介绍多维表格/业务库表格大数据量性能瓶颈，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

1. 壳子组件（grid-cell）500ms
2. 使用模版（ng-template）100ms
3. 直接绑定 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> -->

模版套模版性能损甚至比组件套组件损耗大

这篇关于多维表格/业务库表格大数据量性能瓶颈的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---