Optimize offscreen character table rendering

This commit is contained in:
mARTin-B78 2026-08-19 18:35:10 +02:00
parent 6629e8f017
commit fd8f545d16
4 changed files with 13 additions and 4 deletions

View File

@ -5,6 +5,11 @@ Follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) · versioned wi
--- ---
## [1.20.42] — 2026-08-19
### Changed
- **Large character tables now use browser content virtualization.** Off-screen rows can be skipped during layout and painting while the full DOM and existing interactions remain available.
## [1.20.41] — 2026-08-19 ## [1.20.41] — 2026-08-19
### Changed ### Changed

View File

@ -1 +1 @@
1.20.41 1.20.42

View File

@ -10,7 +10,7 @@
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no">
<meta name="color-scheme" content="light dark"> <meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#2563EB"> <meta name="theme-color" content="#2563EB">
<meta name="app-version" content="1.20.41"> <meta name="app-version" content="1.20.42">
<link rel="manifest" href="/manifest.webmanifest"> <link rel="manifest" href="/manifest.webmanifest">
<link rel="icon" href="/static/icon.svg" type="image/svg+xml"> <link rel="icon" href="/static/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/static/icon.svg"> <link rel="apple-touch-icon" href="/static/icon.svg">
@ -27,7 +27,7 @@
<!-- ── Core styles (local — no CDN dependency for first paint) ────────── --> <!-- ── Core styles (local — no CDN dependency for first paint) ────────── -->
<link rel="stylesheet" href="/static/vendor/mdi/materialdesignicons.min.css"> <link rel="stylesheet" href="/static/vendor/mdi/materialdesignicons.min.css">
<link rel="stylesheet" href="/static/style.css?v=1.20.41"> <link rel="stylesheet" href="/static/style.css?v=1.20.42">
<!-- ── Flag icons — non-blocking (loaded async, icons appear after JS) ── --> <!-- ── Flag icons — non-blocking (loaded async, icons appear after JS) ── -->
@ -378,7 +378,7 @@ window.toggleNavTree = function(treeId, chevronId) {
</script> </script>
<!-- loader.js: fetches sections → loads JS modules → removes skeleton --> <!-- loader.js: fetches sections → loads JS modules → removes skeleton -->
<script src="/static/loader.js?v=1.20.41"></script> <script src="/static/loader.js?v=1.20.42"></script>
</body> </body>
</html> </html>

View File

@ -669,6 +669,10 @@ audio { width: 100%; }
tr.lib-char-card.lib-chars-tbl-row { tr.lib-char-card.lib-chars-tbl-row {
display: table-row; cursor: pointer; display: table-row; cursor: pointer;
background: none; border: 0; border-radius: 0; box-shadow: none; transition: none; background: none; border: 0; border-radius: 0; box-shadow: none; transition: none;
/* Let Chromium skip layout/paint for distant rows while retaining the full
DOM, so sorting, bulk selection, and row event wiring remain unchanged. */
content-visibility: auto;
contain-intrinsic-size: auto 86px;
} }
tr.lib-char-card.lib-chars-tbl-row:hover { transform: none; box-shadow: none; background: var(--panel); } tr.lib-char-card.lib-chars-tbl-row:hover { transform: none; box-shadow: none; background: var(--panel); }
.lib-chars-tbl-row:hover { background:var(--panel); } .lib-chars-tbl-row:hover { background:var(--panel); }