Problem/Motivation

tabledrag.js falls unusable on large menus (e.g. 150+ menu items) on older browsers. (e.g. IEs / Edge, some reported Firefox also).

After a quick debugging, I found that executed a very expensive function on MouseEvent. @see below:

Proposed resolution

tabledrag.js is one of the largest JS lib in Core. It's about 1600 lines. Any huge refactoring seems impossible at the moment. It required a lot of human time to write JSTests and human testing & reviews.

After some thoughts, I decided to add a simple DEBOUNCE function to the MouseEvent. On my testing, it works much better.

Note: It still not perfect. DOM rendering is also slow on older browsers. We could do further improvement on follow-ups

(I suggested to skip JSTests on tabledrag.js of this simple patch.)

Remaining tasks

- Human Testing on different browsers
- Review patches

(Hints: Using Devel module to gen menu items)

User interface changes

- N/A

API changes

- N/A

Data model changes

- N/A

Comments

droplet created an issue. See original summary.

droplet’s picture

Issue summary: View changes
droplet’s picture

Issue summary: View changes
Anybody’s picture

Nasty problem, great solution. Works wonderful. +1 for RTBC!

droplet’s picture

Issue summary: View changes
droplet’s picture

Status: Needs review » Needs work

I made a very simple stupid mistake. It isn't debounced tho.

droplet’s picture

droplet’s picture

Status: Needs work » Active
Issue tags: -Needs manual testing, -Novice

About Edge / IEs,

After #2876224: Make Drupal.tableDrag.restripeTable 10x faster committed, no more significants performance improve can be done from JS side I think. You may squeeze extra 10ms ~ 50ms or reduce the DOM events and memory usages. But dragging still not smoothly.

With 700 menu items, Edge took about 7xx ms execution time on "Style Calculation" on my PC (without any JS)

My conclusion is only design change can sort out this problem perfectly. (Too many DOM nodes, or use React-like lib: https://facebook.github.io/fixed-data-table/)