Le Web Incubator Community Group (WICG) a récemment introduit Display Locking, une proposition destinée aux développeurs et aux éditeurs de navigateurs.

Display Locking consiste en un ensemble d'API qui permettent aux développeurs et aux navigateurs de s'adapter facilement à de grandes quantités de contenu et de contrôler le déroulement du rendu d'une page. Plus concrètement, les objectifs sont:

• effectuer du rendu pour du contenu non visible par l'utilisateur, sans casser les fonctionnalités du navigateur, ni les algorithmes de présentation (conception réactive, flexbox, grille, etc.)
• donner au développeur un contrôle sur le pré-chargement et le pré-rendu d'un contenu sans avoir à le restituer entièrement à l'écran

La finalité étant d'accélérer le chargement et l'affichage des pages Web.

Display Locking s'articule autour de trois fonctionnalités

• un attribut rendersubtree qui contrôle si un sous-arbre DOM est rendu. Cet attribut peut être modifié par le navigateur ou par d'autres agents utilisateurs et déclencher un événement MutationObserver afin que les développeurs puissent y réagir.
• un attribut content-size allouant une taille d’espace réservé au contenu marqué comme invisible par rendersubtree.
• une méthobe updateRendering pour les objets Element permettant de pré-afficher le contenu dans un sous-arbre marqué avec rendersubtree positionné comme invisible.

Quelques exemples utilisations :

Tout d'abord un code qui permet de déclencher l'affichage d'un sous-arbre d'abors déclaré invisible, via l'attribut rendersbtree :

<div id=target rendersubtree="invisible skip-activation" style="content-size: 200px 200px">...content...</div>
<script>
target.setAttribute('rendersubtree', ''); // makes #target render
</script>

Ensuite un exemple d'utilisation de la méthode updateRendering :

<div id=target rendersubtree="invisible" style="content-size: 200px 200px">...content...</div>
<script>
target.updateRendering().then(() => console.log(target.firstElementChild.offsetTop)); // fast!
</script>

La proposition Display Locking est sur GitHub. Les commentaires sont bienvenus. Pour cela, il est nécessaire de rejoindre le Web Incubator Community Group.