先说最终结论: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> -->
模版套模版性能损甚至比组件套组件损耗大