0
169
ViewsImprove render performance on large html when transforming (HTML/CSS/JS)
I build a time schedule component for a construction company in HTML/JS/CSS.
Working Demo here: https://www.conova24.de/performancetest/index.php
The schedule can be large (the example has 15700 x 7500 pixel). Therefore it has to be interactive so you can zoom in/out and pan. I achieve this with transforming the schedule div with js using a DOMMatrix.
So far so good! When zoomed in (50% - 100%) the rendering runs smooth. The problem is that the rendering in the browser slows down when you zoom out and see the whole schedule. When zoomed out the rendering takes a lot of cpu and is really slow.
Do you have any idea how I can improve the rendering? I also added the "will-change" attribute to the parent div and reduced some unused code in the schedule. Are there any other hacks? I can't imagine that most modern pc's can run 3d games but can't handle a large html document?!
1 answers
Answer question0
I noticed you've added the tag JavaScript to the post. Do you have your JavaScript inline or in a different file? If you have it in a different file, make sure you include it in the HTML right above the </body> tag. So almost all the way down under all the other content. Since JavaScript reads from bottom to top, it will slow your site down if you link it in the <head> tag.
Furthermore, Here are a few tips to optimize your HTML.
Compress HTML server-side
GZIP compression or a similar compression model allows less data to be sent to an end user’s browser to construct the same page. Total compressed page size is about half as large in MB as the uncompressed page size.
If you’re not compressing HTML and other files, your site is likely slower than competitors.
Minification
Minification deletes all unnecessary whitespace and all new line characters, and is not common practice in HTML. While you can minify HTML if you wish to do so, it can make the document more difficult to read, especially if the page changes often.
Caching
Caching is not always used for HTML either, because HTML files tend to change frequently.
That being said, it is possible to cache HTML. Caching rules allow you to dictate where users’ browsers will request the document from – the cache or the server. Use caution, because you don’t want to serve up an old version of a website. Static HTML pages, like blog posts, can usually be cached without adverse effects.