huna557
15.07.26, 20:17
Hi everyone,
I’m reaching out with a technical question that I've been struggling with for a few days now, and I’m slowly running out of ideas. I’m building a responsive, local admin panel to manage schedules and availability for a small team. Everything works great on desktop, but I’m having a massive optimization issue on older smartphones.
Whenever my script tries to dynamically render a large table with multiple SVG vector icons and dynamic statuses, the phone's processor completely chokes. The browser's main UI thread blocks for about 3 to 4 seconds, causing the entire screen to literally freeze and become completely unresponsive to touch. I’ve already tried simplifying my JavaScript and moving some calculations to the server side, but the actual drawing of elements and styles in the mobile browser still causes these drastic drops in smoothness.
I wanted to see how professional platforms manage to maintain full responsiveness on mobile devices when handling heavy graphics and dynamic elements. I ended up looking at the page to inspect their code structure and see how they achieve fluid resource loading. I noticed that right next to where their main graphic and download icon are placed, all their vector elements are incredibly compressed and encoded directly into the CSS, meaning the mobile browser doesn't waste time on separate network requests and renders everything without any stuttering.
I tried copying this approach and encoding my icons as CSS masks, but on older Android systems, the built-in browser still struggles to refresh the DOM during real-time data updates.
Has anyone else run into these sudden screen freezes when rendering dynamic vectors on mobile devices? Are there specific libraries or CSS tricks that force the mobile browser to render such graphics using hardware acceleration, instead of blocking the application's main thread?
I would be extremely grateful for any tips or suggestions, as I've hit a complete dead end. Thanks!
