Performance issue in the row template · angular-ui/ui-grid#5350

(1 留言) (0 反應) (0 負責人)JavaScript (5,395 star) (2,496 fork)batch import

good first issueseverity: performance

描述

ui-grid is painfully slow in my setup during filtering.

I did some profiling and introspection and noticed objects with the following properties are compared by angular.equals during filtering:

invisible 19.70499999999265 margin-left,margin-right 15.675000000122964 ui-grid-icon-blank,ui-grid-icon-down-dir,ui-grid-icon-up-dir 185.36999999973705 sortable 165.10500000025786 ui-grid-column-menu-button-last-col 110.17000000022563 ui-grid-filter-cancel-button-hidden 103.93999999956577 overflow-x,overflow-y 13.26500000001397 '' 127.62500000016371 ui-grid-row-header-cell 1719.634999999509 ui-grid-menu-item-active,ui-grid-sr-only 163.0850000001774

(Each row is a different type of object. The number is the cumulated time in ms comparing the objects. The measuring covered a single continuous entry in a filtered field which took about 20s.)

I traced this down to the ui-grid-row template.

Removing the ng-class and role attributes from the template instantly sped up filtering. Input is no longer blocked by JS even though some sluggishness can still be noticed in the result updates.

貢獻者指南

技術棧: javascriptangular
領域: frontendperformance
議題類型: performance
難度: 3
預計時間: 1-3 hours
活動狀態: stale
清晰度: mostly clear
前置要求: AngularJS basicsUnderstanding of ng class and filtering
新手友善度: 60
研究方向: Investigate the ui grid row.html template at src/templates/ui grid/ui grid row.html. The issue suggests removing `ng class` and `role` attributes to improve filtering performance. Verify that these attributes are not essential for other functionality (like accessibility or styling). Profile the grid with and without the change to confirm performance improvement. Also check if the same pattern exists in other row templates.