动态函数绑定在nzSortFn上引起的性能问题

原创已于 2024-03-14 10:02:00 修改 · 440 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #angular.js #javascript

于 2024-03-12 17:41:53 首次发布

文章描述了一个关于前端开发的问题，开发者在弹窗中使用动态排序函数时遇到关闭卡顿。性能分析显示大量时间用于销毁依赖，解决方法是将动态排序改为具体函数，如`totalTaskhourFn`和`gapFn`，从而避免内存占用过大。

问题复现

 <th rowspan="2" [nzSortFn]="fnCompare('totalTaskhour')" [nzAlign]="calendarDetailTableAlign" >{{ "任务总时长" | translate }}</th>
<th rowspan="2" [nzSortFn]="fnCompare('gap')" [nzAlign]="calendarDetailTableAlign" >{{ "Gap" }}</th>

fnCompare = (propertyName) => (a,b) => a[propertyName] - b[propertyName]

该表格在modalService创建出的弹窗中，时间久了之后发现关闭弹窗会卡顿很久，于是开启性能分析

发现大量的时间都用来销毁依赖了

解决

于是经过排查，发现绑定一个动态的排序函数会造成内存越堆越大，改为具体的排序函数就解决了该问题

                <th rowspan="2" [nzSortFn]="totalTaskhourFn" [nzAlign]="calendarDetailTableAlign" >{{ "任务总时长" | translate }}</th>
                <th rowspan="2" [nzSortFn]="gapFn" [nzAlign]="calendarDetailTableAlign" >{{ "Gap" }}</th>

  //  fnCompare = (propertyName) => (a,b) => a[propertyName] - b[propertyName]
  gapFn = (a,b) => a.gap - b.gap
  totalTaskhourFn = (a,b) => a.totalTaskhour - b.totalTaskhour