Le Hollandais Volant

Je découvre l’existence de l’élément « TEMPLATE ».

C’est ce que ça dit : un élément contenant du HTML, invisible par défaut, qui est emmené à être utilisé de multiple fois dans la génération de la page.

J’utilisais typiquement un <div hidden>…</div>, que je .cloneNode() puis .appendChild(). L’idée ici c’est que c’est fait précisément pour ça. De plus, le rendu est potentiellement un peu plus rapide, vu que l’on utilise ça dans du shadowDom, qui n’est rendu qu’à la fin, quand on l’ajoute à la page.

Dans le cas du template dans un DIV, il faut .removeChild() ce DIV, ce qui peut provoquer un reflow. Ici, TEMPLATE n’est pas affiché. C’est comme l’élément HEAD, ou SCRIPT : ils ne sont pas visibles.

Étant donnée que j’utilise assez massivement ça dans mon lecteur RSS par exemple, ça va pouvoir faire un d’optimisation de ce côté là.
Je préfère utiliser ça à du HTML généré en PHP car je dois, quoi qu’il arrive, passer par dessus en JS pour ajouter des eventListeners sur les boutons "marquer en favoris", "marquer comme lu" ou "lire".

Je pourrais m’en passer totalement en utilisant des DETAILS/SUMMARY pour la lecture, mais la génération en PHP ne sera pas plus rapide, de plus, ça voudrait dire ajouter le contenu HTML des posts RSS dans la page, ce qui alourdirait le chargement et le rendu.
Actuellement, je mets le contenu dans des commentaires (donc aucun rendu). Et quand j’ouvre le post, là je décommente le contenu. Le rendu se fait alors sur un seul post à la fois. On y gagne car on lit rarement tous les posts RSS auquel on est abonné. On fait un filtre mental par titre sur des éléments qu’on ne lira pas d’office. Enfin, moi je travaille comme ça en tout cas.