search

jothepro / doxygen-awesome-css

Custom CSS theme for doxygen html-documentation with lots of customization parameters.
https://jothepro.github.io/doxygen-awesome-css/
MIT License
1.02k stars 118 forks source link

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

Closed atlz253 closed 2 months ago

atlz253 commented 3 months ago

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.

https://github.com/jothepro/doxygen-awesome-css/assets/29949782/a7817de5-500b-4ce8-a7fc-42f2cb9c6fcb

iamAyushChamoli commented 3 months ago

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 commented 3 months ago

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

jothepro commented 3 months ago

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

iamAyushChamoli commented 3 months ago

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 commented 3 months ago

@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 :(

https://github.com/jothepro/doxygen-awesome-css/assets/29949782/00e9790f-3f8a-4222-99e2-4982b0d7ae88

iamAyushChamoli commented 3 months ago

@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