Catégories
Astuces et Design

Sur les éléments fixes et les arrière-plans

Je pensais que cela allait être une courte note sur le positionnement fixe et le jank, mais comme avec presque tout ce que j'écris, c'est devenu un article de longue haleine sur le contenu des blocs, le rendu et les performances de défilement.

Le point d'origine de l'écriture était de me rappeler que chaque fois que je veux fixer la position de quelque chose sur une page Web, les considérations de performance doivent être en tête. Ce n'était pas comme si je ne l'avais pas fait savoir, Je n'y pensais pas activement.

* Cue look de désapprobation des gens de webperf partout * ಠ_ಠ

Mais ensuite, cela a dégénéré en d'autres choses, donc je déplace les conclusions vers le haut, et si quelqu'un s'intéresse aux pourquoi, vous pouvez continuer à lire.

TL: DR les bits pratiques

Si vous avez un élément fixe sur votre page, ce qui signifie qu'il ne bouge pas lorsque vous faites défiler, vous pouvez vous rendre compte qu'il n'agit plus comme fixe si vous appliquez un filtre CSS à son ancêtre le plus proche.

Allez-y, essayez-le sur le Codepen.

Voir le positionnement fixe du Pen et les filtres CSS de Chen Hui Jing (@huijing)
sur CodePen.

En effet, l'application d'un filter sur le parent immédiat de l'élément fixe fait qu'il devient le bloc conteneur au lieu de la fenêtre. Je l'ai rencontré lorsque j'essayais d'archiver la v1 de mon site Web.

Je voulais que tout reste exactement le même, mais avec un filtre d'échelle de gris appliqué pour qu'il soit, vous savez, archivé. Le site Web a une bascule de mode sombre non performante qui est un enfant immédiat de la body élément.

Il était positionné dans le coin inférieur gauche de la fenêtre avec position: fixed. Je pensais que la solution la plus efficace sur une ligne consistait à appliquer filter: grayscale(1); sur le body élément, mais qui a corrigé ma bascule.

À la fin, j'ai appliqué le filtre à l'en-tête, au principal et au pied de page séparément afin que la bascule ne soit pas affectée par cela. C'est ne pas un bug, c'est une fonctionnalité légitime, lisez la suite si vous voulez en savoir plus.

De plus, si vous prévoyez d'avoir des arrière-plans fixes sur votre site, essayez d'utiliser un pseudo-élément pour héberger l'image au lieu d'utiliser background-attachment: fixed pour de meilleures performances de défilement.

J'avais affaire à une série de messages de blog de procrastination vieux de plus de 3 ans, que j'ai décidé de déménager dans un site à part. Parce qu'un nouveau site signifie une nouvelle mise en page et un nouveau design à construire. Oui, je procrastine toujours la partie d'écriture.

Quoi qu'il en soit, je voulais que certains éléments décoratifs fixes sur le site remplissent l'espace excédentaire de chaque côté du texte pour les grandes largeurs de fenêtre. Si vous êtes tombé sur un souvenir de l'article de Chris Ruppel sur la will-change propriété, cela vous semblera familier.

Au lieu de faire quelque chose comme ça:

main {
  background: url('/some-beautiful-image.png') no-repeat center center;
  background-attachment: fixed;
  background-size: cover;
}

Faites quelque chose comme ça:

main::before {
  content: '';
  position: fixed;
  width: 100%;
  height: 100%;
  background: url('/some-beautiful-image.png') no-repeat center center;
  background-attachment: fixed;
  background-size: cover;
  will-change: transform;
  z-index: -1;
}

Paul Lewis a expliqué dans Utilisation de Chrome DevTools pour profiler le site jsconf.eu (quelque part autour de la marque 2,30) que background-attachment: fixed provoque une opération de peinture chaque fois que vous faites défiler.

La solution place l'image d'arrière-plan en question dans son propre calque. Ainsi, lorsque le contenu principal est en cours de défilement, il n'est pas nécessaire de le repeindre en permanence.

will-change devrait ne pas être utilisé partout sur votre site. Faire référence à Sara SoueidanTout ce que vous devez savoir sur la propriété CSS will-change.

Vous pouvez vous arrêter ici et aller faire quelque chose de plus utile avec votre vie à ce stade. Tout ce qui suit est ma recherche de trous de lapin. Tu étais prévenu.

Le bloc contenant

Oh, tu es toujours là? D'accord, parlons un peu du fonctionnement du positionnement fixe dans le contexte du rendu du navigateur. Les boîtes sont toujours positionnées par rapport à un bloc conteneur. S'il n'y en a pas un explicitement défini, ce bloc contenant est la fenêtre d'affichage.

Comprendre le fonctionnement du bloc conteneur est très utile pour résoudre les problèmes de positionnement CSS. Une ressource recommandée pour cela est Layout et le bloc conteneur sur les documents Web MDN.

Une boîte position La propriété détermine le contenu du bloc. static (qui est la valeur par défaut), relative et sticky utilise la zone de contenu de l'élément ancêtre le plus proche. Cet ancêtre doit être soit un conteneur de blocs, soit avoir établi un contexte de mise en forme.

absolute utilise la zone de remplissage de l'élément ancêtre le plus proche. Cet ancêtre doit avoir un position valeur de tout autre chose que static. Si vous vous êtes déjà demandé pourquoi les gens position: relative sur un élément parent pour «piéger» un élément enfant en lui-même.

Maintenant, nous arrivons à fixed. Une boîte fixe utilise généralement la fenêtre comme bloc conteneur. Les cas d'utilisation courants sont les en-têtes ou les pieds de page collants, où nous giflons habituellement position: fixed sur ces éléments et appelez-le un jour.

toutefois, il existe des situations où le bloc conteneur est la zone de remplissage de l'ancêtre le plus proche. Cela se produit uniquement lorsque l'ancêtre remplit l'une des conditions suivantes:

  1. UNE transform ou perspective valeur autre que none
  2. UNE will-change valeur de transform ou perspective
  3. UNE filter valeur autre que none
  4. UNE will-change valeur de filter (uniquement pour Firefox)
  5. UNE contain valeur de paint

Pour mieux comprendre pourquoi, enchaînons-nous sur certains éléments internes du navigateur. Superficiellement. Parce que je suis aussi loin d'être ingénieur navigateur que de vivre sur la lune. 🌓

Rendu du navigateur

Mon explication préférée du fonctionnement d'un moteur CSS est de Lin Clark dans Inside un moteur CSS super rapide: Quantum CSS (alias Stylo), alors vérifiez cela. Généralement, tous les moteurs CSS passent par le processus d'analyse → style → mise en page → peinture → composite et rendu.

Étapes suivies par tous les moteurs CSS

Pour un examen vraiment approfondi du fonctionnement des internes des navigateurs, je recommande le fonctionnement des navigateurs de Tali Garsiel: dans les coulisses des navigateurs Web modernes.

Outre l'arborescence DOM, les navigateurs construisent également une arborescence de rendu, qui représente où les éléments doivent aller sur une page en fonction d'informations telles que la largeur, la hauteur et la position, et à quoi elles doivent ressembler. Chaque valeur de propriété CSS est calculée pour chaque élément du document.

La mise en page implique le calcul de la position et de la taille de toutes les boîtes. Paint rend les boîtes (avec tous leurs styles visuels) en pixels sur votre écran. Cela peut se produire sur plusieurs couches. Le composite rassemble les calques, applique des styles réservés aux compositeurs, puis les restitue à l'écran.

Gardez à l'esprit qu'il s'agit d'une description très simplifiée. Je ne pense pas que "bouillie" soit un terme technique.

Avez-vous déjà entendu des gens dire qu'il y a certaines propriétés CSS qui sont «sûres» à animer, et d'autres qui ne le sont pas? Si ce n'est pas le cas, reportez-vous à la section Animations hautes performances.

Le TL: DR de cet article est que si vous devez animer quelque chose, utilisez soit transform ou opacity la mesure du possible. Ce sont les propriétés du compositeur uniquement. Tout le reste est plus cher. Considérez le diagramme ci-dessus comme ces choses d'anneau d'empilage de jouets pour tout-petits.

Stacking jouet en bois thingy

Le rendu est plus ou moins séquentiel, alors quand je dis cher, pensez à la façon dont vous remplaceriez l'un de ces anneaux. Si le compositing se reproduit, c'est tout ce que le navigateur doit faire. Mais au fur et à mesure que vous avancez dans la séquence, le navigateur doit faire plus de travail.

Effort requis

Donc, des propriétés comme position, display, et même font-size déclenchera la mise en page. Des propriétés comme color ou background-position déclenchera la peinture. Au moment de la rédaction, seulement transformle sable opacity sont entièrement gérés par le compositeur. Vous pouvez consulter la liste complète sur http://goo.gl/lPVJY6.

La gestion du travail par le compositeur améliore les performances car les navigateurs modernes ont deux fils d'exécution, principal et compositeur. La mise en page et la peinture sont effectuées sur le fil principal tandis que la composition et le rendu sont effectués sur le fil du compositeur, par le GPU.

Le thread principal est très occupé. Il a beaucoup de choses à calculer. Mais c'est assez bon pour ça, beaucoup de puissance, tout est calculé. Les GPU ne sont pas excellents pour le calcul rapide, mais ils sont excellents pour dessiner des trucs.

Dessiner des pixels à l'écran? Aucun problème. Dessiner le même bitmap de pixels à l'écran à plusieurs reprises? Part de gâteau. Transformer ce même bitmap de pixels en différentes positions, rotations ou échelles? Légèrement pressé au citron.

À présent, certains d'entre vous pourraient être comme, omg quand est-ce qu'elle va arriver au point ??

Nous-ll … le point a été couvert au début de ce post.

Parlons donc du défilement!

Vous êtes-vous demandé ce qui se passe lorsque vous faites défiler une page? N’a-t-il pas l’impression que des elfes magiques font tourner une longue bande de contenu, comme ces trucs de piano de joueur?

Piano joueur vintage

Comme l'explique Paul Lewis dans Eviter les peintures inutiles, chaque fois que vous faites défiler un navigateur vers le haut ou vers le bas, le contenu doit être repeint avant d'apparaître à l'écran. Et le travail de peinture affectera les performances.

J'ai fait le contraire d'enterrer la lede plus tôt, donc vous auriez compris (si vous aviez lu la première partie) pourquoi background-attachment: fixed est bien pire que si vous aviez déplacé l'image d'arrière-plan sur son propre calque et corrigé cela à la place. Repeinture minimale. C’est ce qu’il fait.

Cela étant dit, je ne sais pas dans quelle mesure le navigateur a depuis amélioré et optimisé le processus de rendu et si cela a rendu certaines de ces techniques obsolètes? J'aimerais penser qu'ils aident toujours, car nous n'avons pas encore vu de changements radicaux dans le processus de rendu.

J'aimerais que quelqu'un m'en dise plus sur les performances de rendu dans les derniers navigateurs d'aujourd'hui. * indice, indice *

Emballer

Je pense que je devrais m'arrêter ici pour l'instant. J'ai déjà lu le document de conception pour la composition accélérée par GPU dans Chrome et j'ai probablement besoin de me dégager de ce trou de lapin. Ne vous inquiétez pas, je trouve le rendu le plus fascinant et je reviendrai certainement sur cela.

Références

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *