Defect #44372
closed
Chrome freezes for several minutes when opening the possible values page of a key/value list custom field with thousands of values
Description
Opening the "Possible values" page of a key/value list custom field with thousands of values freezes Chromium-based browsers for several minutes. This is caused by a known performance regression in jQuery UI sortable. In my environment, the attached patch reduces the sortable initialization time from several hundred seconds to less than one second.
Steps to reproduce:
1. Create a "key/value list" custom field and add several thousand possible values (tested with 4000).
2. Open the "Possible values" page (/custom_fields/:id/enumerations) in Chrome or another Chromium-based browser.
Result:
The page freezes for about 8 minutes in my development environment and Chrome shows a "Page unresponsive" dialog. In the same environment, Firefox opens the page in about 5 seconds.
Cause:
The page initializes jQuery UI sortable on the list of values. jQuery UI 1.12 introduced a performance regression in `_setHandleClassName` that makes sortable initialization quadratic in the number of items. This is a known upstream issue that is still open (jquery/jquery-ui#2062).
The cost is much higher in Chrome than in Firefox. Measured time of the sortable() call alone:
| Values | Chrome | Firefox |
|---|---|---|
| 500 | 0.4 s | 0.1 s |
| 1000 | 4.7 s | 0.3 s |
| 2000 | 56 s | 1.2 s |
| 4000 | 500 s | 4.8 s |
Fix:
The attached patch overrides _setHandleClassName in application-legacy.js to use addClass instead of jQuery UI's slower class handling. This is the workaround suggested in the upstream issue. The behavior skipped by this workaround is not used by Redmine's sortable lists.
With the patch, the sortable() call for 4000 values takes less than 0.1 seconds in Chrome.
The override applies to all 8 places where Redmine uses sortable:
- Possible values of a key/value list custom field
- Administration > Enumerations
- Administration > Custom fields
- Administration > Issue statuses
- Administration > Roles
- Administration > Trackers
- Project settings > Forums tab
- My page block layout
Files
Updated by Go MAEDA 19 days ago
- File 0001-Work-around-jQuery-UI-sortable-performance-regressio.patch 0001-Work-around-jQuery-UI-sortable-performance-regressio.patch added
I have updated the patch.
The previous patch used addClass() directly, bypassing the widget's class tracking. As a result, the "ui-sortable-handle" entry in the classes option was ignored, and destroy() no longer removed the handle class.
The updated patch first collects all handles, then makes a single call to _removeClass() and a single call to _addClass(). This avoids the quadratic behavior while preserving class tracking, so the classes option, refresh(), and cleanup by destroy() work as before.
With 4,000 items, initialization in Chrome takes about 0.3 seconds with the updated patch. Although this is slightly slower than the 0.1 seconds achieved by the previous patch, the difference is not a practical concern given that initialization takes more than 8 minutes without a patch.