Improve the performance of the script delivering the permissions search filter functionality in admin/people/permissions.

Created on 5 September 2024, 7 months ago
Updated 16 September 2024, 7 months ago

Problem/Motivation

Script user.permissions.js, located in /core/modules/user, is currently using jQuery to perform the operations of showing and hiding table rows that match (or not) the text being typed in real-time in the filter box. It turns out using jQuery has a negative performance impact. The end-user might experience some short 'chokes' when typing a search string, as the Javascript is performing searches across the list of table rows in realtime. Performance can be improved by simply removing jQuery from the equation and using plain simple 'vanilla' Javascript to show or hide table rows.

Also, there are some opportunities to improve the script structure to make it more performant.

Steps to reproduce

Enter the Permissions admin page in /admin/people/permissions and type a string that might find some occurrences, like 'Content' or 'Access'.

In order to test the performance enhancement I am mentioning on this issue, I suggest people add console.time('performanceTest') and console.timeEnd('performanceTest') into strategic portions of the code, both in the previous version (branch 11.x) and the new one (branch 3472217-improve-permission-search-filter). The opening console message (console.time) should be placed right after the opening of the filterPermissionList(e) function. The closing console message (console.timeEnd) should come as the last line of code within that same function.

One detail worth mentioning: the new code is interrupting code execution when the search string is equivalent to the previous search string. The use case for this is when users use arrow keys that count as a keystroke, that do not affect the search text; we don't need to waste time analyzing this particular situation, and the code will interrupt execution/analysis early in the cycle. But that line of code will cause the timer to throw a warning on the console because it won't be properly closed. When running performance tests, replace this line...

if (rawQuery === queryTransitional) return;

... with something like this:

if (rawQuery === queryTransitional) {
  console.timeEnd('performanceTest');
  return;
}

Proposed resolution

Remove any jQuery code within behavior tableFilterByText; establish a mechanism to improve the search performance as users type within the filter input field.

Remaining tasks

A proposed solution is already available for testing on the associated repository.

User interface changes

An improved user experience in terms of responsiveness when users are typing a search string to filter from the existing permissions.

Introduced terminology

--

API changes

--

Data model changes

--

Release notes snippet

--

πŸ“Œ Task
Status

Closed: duplicate

Version

11.0 πŸ”₯

Component
User systemΒ  β†’

Last updated 6 days ago

Created by

πŸ‡§πŸ‡·Brazil mabho Rio de Janeiro, RJ

Live updates comments and jobs are added and updated live.
  • Performance

    It affects performance. It is often combined with the Needs profiling tag.

  • jQuery

    Affects the version, handling, or usage of the jQuery javascript library.

Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024