From 2a22bc2209089d531f5ed511c25b014065b9155d Mon Sep 17 00:00:00 2001 From: Kanashimia Date: Wed, 25 Dec 2024 16:16:48 +0200 Subject: [PATCH] Improve HTML rendering performance Couple lines of CSS cut page loading and resize times by 100 times (on my machine). Description of what content-visibility is: https://web.dev/articles/content-visibility Basically browser now doesn't render/layout invisible sections. As a downside it makes scrollbar jump around slightly when you scroll the page, as browser recalculates the layout. Section size was calculated using the following JS code: const getAverage = (arr) => arr.reduce((p, c) => p + c, 0) / arr.length getAverage(Array.from(document.querySelectorAll(".sect1").entries().map(([idx, el]) => el.getBoundingClientRect().height ))) getAverage(Array.from(document.querySelectorAll(".sect2").entries().map(([idx, el]) => el.getBoundingClientRect().height ))) --- config/khronos.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/config/khronos.css b/config/khronos.css index 2530f3d37..6de1ed919 100644 --- a/config/khronos.css +++ b/config/khronos.css @@ -730,3 +730,9 @@ li > p > a[id^="VUID-"].link { color: black; text-decoration: none; } li > p > a[id^="VUID-"].link:hover { color: black; } .vuid { color: #4d4d4d; font-family: monospace; } + +/* Improve page rendering performance */ +/* contain-intrinsic-size is the approximate average height of all sections */ +.sect1 { content-visibility: auto; contain-intrinsic-size: 98000px; } + +.sect2 { content-visibility: auto; contain-intrinsic-size: 13000px; }