Lags when scrolling on a page with TOC and a large number of headings

[atlz253]

Hi! We use Doxygen Awesome on the userver documentation site. Unfortunately, on pages with a large number of headings, there is a slowdown when scrolling down the page. Similar behavior can be seen on this page.

The slowdown is due to the updating of classes at the TOC headers, I tried to show this in the video. It would be cool to fix this loss of performance.

output.compress-video-online.com.mp4

[iamAyushChamoli]

The update() function in doxygen-awesome-interactive-toc.js is being called on every scroll event. This results in a significant performance delay. We can batch the class change events after exiting the loop if that works, or maybe call the update() function in a scheduled manner (every 50ms or so). I have a potential solution but unsure how to test it. Can I create a pull request for your review?

[atlz253]

@iamAyushChamoli Yes, I can review and test changes. It will be very cool!

[jothepro]

I'd really appreciate if you open a pull request with a suggestion on how to fix this, @iamAyushChamoli. :)

[iamAyushChamoli]

Hi, @jothepro & @atlz253, created a pull request for the same. Introduced throttling of the update() function to enhance UX by reducing function calls. This is my first pull request so let me know if I accidentally messed something up.

[atlz253]

@iamAyushChamoli upload before/after comparison. It became much smoother! Congratulations on your first contribution!

One moment. This line is missing the keyword "this". It should be like: document.getElementById("doc-content")?.addEventListener("scroll", this.throttle(DoxygenAwesomeInteractiveToc.update, 100)). Otherwise, the fix does not work :(

2024-07-05.02-32-44_compressed.mp4

[iamAyushChamoli]

@jothepro I have updated the code and included "this" keyword as you suggested, please review the code and let me know if it works well now!
btw Thanks! this is quite pleasant to have my first pull request accepted :D