Html5-boilerplate: Ajoutez `white-space: nowrap` à .visuallyhidden pour un rendu plus rapide

Ceci est un regard très intéressant sur la classe visuellement cachée, merci, Tomasz.

J'ai également regardé le stylo de James Curd sur le clip rect déprécié et
remplacement possible par clip-path : inset(0 1px 1px 0)
https://codepen.io/aminimalanimal/pen/wMedpo

Mes résultats de test (testé uniquement dans Chrome)

Test

Le rendu

Le total:

Ligne de base avec clip rect

3912ms

2521m moyenne 3027

2649ms

4.85sec

3,33 s MOYENNE 3,87

3.44sec

Ajouter un espace blanc

2590ms

2207ms AVG 2450

2554ms

3,79 s

2,98 s MOYENNE 3,35

3.29sec

Ajouter un espace blanc, supprimer le clip rect

2820ms

2424 ms AVG 2520

2317ms

4.32sec

3,65 s MOY. 3,83

3,53

Ajouter un espace blanc, supprimer le rect du clip, ajouter un chemin de clip

*besoin du préfixe du fournisseur !

2820ms

1845ms _AVG 2241_

2057ms

4.32sec

3.20sec _MOY 3.63_

3.37sec

Résumé : Il y avait une assez grande variété dans les tests individuels. Les
le quatrième test semblait le meilleur dans Chrome, mais les économies pour une "vraie" production
page qui n'a que quelques éléments cachés peut ne pas valoir le coût de
changer la classe css.

*(J'ai trouvé que clip-path a besoin du préfixe du fournisseur !)

--Scott Davis--

Le mercredi 6 juillet 2016 à 04h20, Tomasz W. [email protected] a écrit :

Avant:

.visuallyhidden {
bordure : 0 ;
clip : rect(0 0 0 0);
hauteur : 1px ;
marge : -1px ;
débordement caché;
remplissage : 0 ;
position : absolue ;
largeur : 1px ;
}

Après:

.visuallyhidden {
bordure : 0 ;
clip : rect(0 0 0 0);
hauteur : 1px ;
marge : -1px ;
débordement caché;
remplissage : 0 ;
position : absolue ;
espace blanc : pas d'enveloppement ;
largeur : 1px ;
}

Codepen : https://codepen.io/tomasz86/pen/pbwQqV
Codepen (débogage) : https://s.codepen.io/tomasz86/debug/pbwQqV

Ajout d'espaces blancs : le no-wrap fait une énorme différence positive dans le rendu
la vitesse.

J'ai testé le code dans IE11, les dernières versions de Firefox et Chrome,
et aussi l'ancien Opera 12 (le seul navigateur avec un profileur CSS approprié).
Le code s'exécute plus rapidement dans chacun d'eux. Il y a une différence notable à la fois
dans IE11 et Firefox. Opera 12 montre une différence de 400 ms entre les deux.
Chrome se bloque en fait lorsque vous essayez de rendre la version sans
espace blanc sur mon PC Windows 7 mais rend l'autre très rapidement.

-
Vous recevez ceci parce que vous êtes abonné à ce fil.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/h5bp/html5-boilerplate/issues/1874 , ou désactiver le
fil
https://github.com/notifications/unsubscribe/ACKY8sYNxXJ6f9HLoTgQIKGkVDcHcnzDks5qS3NOgaJpZM4JF5XK
.

Merci d'avoir effectué des tests supplémentaires :)

Je n'ai pas du tout pensé à clip-path simplement en raison de la grande compatibilité de clip les navigateurs (jusqu'à IE 4 !). Il peut être obsolète mais fonctionne parfaitement dans tous les navigateurs, ce qui n'est pas courant.

Revenons au fait - dans mes tests locaux dans Opera 12, la différence est toujours d'environ 400 ms. En fait, j'ai découvert cela par accident en testant un exemple plus réel avec 400 pseudo-éléments ajoutés de cette façon. Le rendu des pseudo-éléments eux-mêmes est lent en général, donc je me demandais si quelque chose pouvait être fait à ce sujet, et j'ai été agréablement surpris que le simple ajout de white-space: nowrap réduise le temps de rendu de 40 ms. Cela peut ne pas sembler être une énorme différence, mais cela est facilement perceptible lorsque l'ensemble du site est rendu en 360 ms (et 320 ms avec white-space ).

La différence sera probablement insignifiante dans la plupart des cas lorsque seuls quelques éléments sont présents, mais aidera des gens comme moi avec des centaines d'entre eux. Je ne pense pas non plus qu'il y ait d'inconvénients ou de risques à ajouter white-space: nowrap . Si les performances peuvent être améliorées de cette manière sans frais supplémentaires, pourquoi ne pas le faire ?

Je pense que davantage de tests devraient être effectués, à la fois dans différents navigateurs et systèmes d'exploitation.

Je suis favorable à ce changement. voulez faire un PR?

Ce problème est-il clos ?

Oui! fermé via #1900