perf(ui): defer off-screen layout/paint on entry and feed list rows
Miniflux' default user.EntriesPerPage value is 100, so people with a lot of feeds/feed items might have 100 items displayed by default, which is a ton of DOM elements: multiple inline SVG icons, two <button>, optional <time>, optional reading-time chip, category tag, … the browser had to lay out and paint all of it on initial render even though there are only a handful of rows visible at once. Setting content-visibility: auto on .entry-item and .feed-item lets the browser skip layout, paint, and accessibility-tree work for rows that fall outside the viewport, doing it lazily as the user scrolls. contain-intrinsic-size: auto reserves a placeholder using each row's last rendered size so the scrollbar and anchor scrolling stay consistent after first measurement. The value 100px was picked as on my machine/screen/…, a feed-item is a bit less than 100px, and an entry-item is a bit more than 80px. This doesn't introduced any regressions in keyboard shortcuts, both from miniflux and from the browser. The two CSS properties are supported in current modern browsers, and are simply ignored in those that don't. Sources used: - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/contain-intrinsic-size
This commit is contained in:
@@ -828,6 +828,12 @@ dialog {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.entry-item,
|
||||
.feed-item {
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 100px;
|
||||
}
|
||||
|
||||
.item.current-item {
|
||||
border: var(--current-item-border-width) solid var(--current-item-border-color);
|
||||
padding: 3px;
|
||||
|
||||
Reference in New Issue
Block a user