Project

General

Profile

Actions

Feature proposal #8867

closed

Improve infinite scroll browser performance

Added by krileon about 2 years ago. Updated 8 months ago.

Status:
Closed
Priority:
Normal
Assignee:
Target version:
Start date:
18 February 2022
Due date:
% Done:

100%

Estimated time:

Description

Implement the usage of the following CSS rules to shut off the rendering processing entirely for activity entries that are offscreen.

content-visibility: hidden;
contain-intrinsic-size: 0 500px;

Use contain-intrinsic-size to set the size. Best way to do this is probably set an inline style var then use the var in a CSS rule. When something is offscreen we just then need to apply the offscreen class and set the var style height based off the content height.

This is available in all major versions and it's non-breaking so if a browser doesn't support it it's fine and that browser will just have some less performance.

Actions #1

Updated by krileon about 2 years ago

Also need to set content-visibility: auto; for below-the-fold rendering performance benefits. This allows the renderer to skip activity entries that aren't even visible. It will be important to set contain-intrinsic-size though, which means determining some kind of minimum height.

Actions #2

Updated by krileon about 2 years ago

Only JS needed will be setting the height more specifically from the generic value. content-visibility: auto; itself will handle the visibility checks.

Actions #3

Updated by krileon 9 months ago

  • Status changed from Assigned to Resolved
  • % Done changed from 0 to 100
Actions #4

Updated by krileon 8 months ago

  • Status changed from Resolved to Closed
Actions

Also available in: Atom PDF