lodash
UI becomes unresponsive while searching docs
Description
When searching the docs, while typing in the search field, UI becomes unresponsive. The issue seems to be caused due to the fact that the whole page is repainted on every keystroke and the event handler responsible to perform the search does not seem to be debounced. As a side note, if you switch to the docs of version 2.4.2, the issue still exists but is less obvious as the length of the page is much smaller than when in version 4.17.15 (latest at the time of writing).
Enabling "Paint flashing" in Chromium developer tools might be helpful for debugging.
Steps to reproduce
- Navigate to the latest version of the documentation page (https://lodash.com/docs/4.17.15 in my case).
- Try to type something in search field, eg "compact".
Expected result
UI should be responsive while user types in search field.
Actual result
Searching causes the whole page (which is long) to repaint on every keystroke resulting in UI being unresponsive.
Device details
Chromium: 87.0.4280.67 (Official Build) (x86_64)
Additional information
Issue seems to be more obvious in Chromium browsers (tested in both MacOS and Linux). Tested in Firefox 83.0 and Safari 14.0 and they don't seem to suffer that much.
I recorded this in chrome dev tools and it is something to do with 3x 120ms layout for each keystroke, totalling to just under 400ms per keystroke.
It is generating a lot of react elements per keystroke https://github.com/lodash/lodash.com/blob/master/assets/js/docs.js#L253
Don't know if this is the cause. However, if you notice in the perf chart above each keypress gets shorter. This is likely due having less react elements to rebuild as the list gets shorter.
The actual search library seems fast enough by itself https://fusejs.io/
I think a really simple fix would just to debounce search for 200ms. This will likely allow the user to type in several characters and narrow the results to be a short list which renders quickly.
But the root cause is the long layout time.
This is sus https://github.com/lodash/lodash.com/blob/c8d41c62b446f08905fd94802db4da8da05d3e92/assets/js/docs.js#L347
getComputedStyle can be slow, but is it here?
