uBlogger
uBlogger copied to clipboard
uPagge
Table of Contents causes slow performance on longer articles
What logic or plug-in is used to control the Table of Contents while scrolling?
This becomes very slow with relatively short pages already:
- 4100 words
- ~30 headings
- host: any browser on latest-generation apple silicon
The page gets perfectly responsive as soon as toc: false is set in the Frontmatter.
The browser's Developer Tools showed that this is controlled used scroll events -- that would explain the performance issue. A way to solve that is to convert the TOC control to polling.
The TOC itself is generated using Hugo. Further animation is done using JS (src / js / theme.js).
Unfortunately my main development language is Java and I don't have enough JS expertise to refactor theme.js without breaking anything.
Also I didn't quite understand the problem. I have a 6500 word post and there is no problem
https://blog.upagge.ru/posts/guide/2021/investments/how-to-invest-and-where/
I suppose this is an effect of combining scrollspy with several echarts pages. Your post shows that scrollspy with long static content still works. My long page with echarts and without scrollspy works.
I understand the scrollspy logic is not your own, and it's embedded in the monolithic theme.js file which is entangled with other logic as well. If that file is generated from somewhere, and we can find the origin of the scrollspy logic in isolation -- I'm happy to look into it and offer a patch (e.g. sampling, or polling).
Otherwise, I guess we can live it at that and close this issue. It'll be a motivator to stay concise :)
The sources of the theme.js file are here
https://github.com/uPagge/uBlogger/blob/master/src/js/theme.js
I don't know how this file was created((