Des articles pour ceux qui
livrent le stack
Textes sur React, Node.js, TypeScript et AI. Un corps traduit est affiché quand il existe. Sinon vous voyez le texte anglais et une note qui le dit.
Tag : Browser Rendering
Éviter le rendu hors écran grâce à content-visibility et contain-intrinsic-size
Apprenez comment la visibilité du contenu permet de réduire les coûts liés à la mise en page sur les pages longues générées par serveur, pourquoi la propriété contain-intrinsic-size est indispensable, et comment elle se compare à la virtualisation.
12 min de lecturePenser en termes d’invalidation : un modèle pratique de la manière dont les navigateurs affichent les pages
Apprenez à raisonner sur le rendu des navigateurs en vous demandant quelle modification le rend invalide, que ce soit en termes de problèmes de mise en page, de coût de rendu graphique, ou encore de composition, d’hydratation et de streaming.
11 min de lectureDe la feuille de style à l’écran : quel rôle joue CSS dans le pipeline du navigateur
Suivez le CSS de la téléchargement aux pixels : comment le DOM, le CSSOM et l’arbre de rendu sont construits, où s’effectue la cascade des règles, et quels origines de styles concourent pour chaque élément.
8 min de lectureDe 66 % à 185 px : comment les navigateurs résolvent les valeurs CSS avant le rendu
Suivez une valeur CSS à travers les étapes déclarée, en cascade, spécifiée, calculée, utilisée et réelle, et comprenez pourquoi les unités relatives ainsi que la technique de conversion rem se comportent de cette manière.
8 min de lectureComment la cascade choisit un gagnant : importance, spécificité et ordre des sources
Voyez comment les navigateurs résolvent les déclarations CSS concurrentes, comment interpréter la spécificité comme une comparaison en quatre étapes, et pourquoi les règles hover et !important vous surprennent si souvent.
11 min de lectureD’où viennent les valeurs CSS lorsque vous spécifiez « None » : comment fonctionne l’héritage
Apprenez comment les navigateurs déterminent si une propriété est héritée, pourquoi les enfants reçoivent la valeur calculée du parent, et comment les propriétés inherit et initial vous permettent d’avoir un contrôle explicite.
10 min de lectureRéorganisation du flux, redessin, composition : quel est le coût pour le navigateur de chaque modification CSS
Suivez le parcours d’HTML et CSS à travers DOM, CSSOM, l’agencement, le rendu graphique et la composition, et découvrez pourquoi les changements de largeur sont plus coûteux que ceux des couleurs, ainsi que comment éviter les problèmes d’agencement.
16 min de lectureLes collections DOM en temps réel, les problèmes de mise en page et l’explication du manque d’attributs
Le DOM est un arbre en temps réel. Pourquoi les boucles JavaScript sur des collections en temps réel sautent des éléments, comment les lectures et écritures provoquent des recalculs fréquents du rendu, et quand il est nécessaire d’utiliser getAttribute.
6 min de lectureExplication de la rendu React : mises à jour de l’état vers les pixels de l’écran
Comment les phases de rendu, de réconciliation et d’application de React se connectent au rendu du navigateur : mise en page, peinture et composition, d’une mise à jour d’état aux pixels réels de l’écran.
17 min de lecture
À propos de ces articles
Devis en 24 h
Besoin du même stack en couche opérateur ? Envoyez le brief — devis sous 24 h.