Ma phase de mise en page du chargement initial de la page prend plus de 2 secondes

Même si mon événement DOMContentLoaded est déclenché à ~ 500ms, la première peinture se produit autour de 3,5s en raison d'une très longue phase de mise en page.Ma phase de mise en page du chargement initial de la page prend plus de 2 secondes

Quelqu'un peut-il me conseiller pour expliquer pourquoi cela pourrait se produire, et comment je peux résoudre ce problème? Actuellement, la page contient environ 350 nœuds, mais j'ai vu d'autres sites avec des nœuds similaires et une phase de mise en page de 50 à 100 ms.

Qu'est-ce que je fais mal?

P.S. Ceci est une application universelle React et j'utilise Heroku Standard 1x et Fastly CDN pour le servir.

Source

2016-03-29 Seungchan Lee

Il doit être réplicable avec un exemple de code réel si vous souhaitez que les utilisateurs diagnostiquent le problème. – Emissary

Je suis nouveau à SO - Je ne suis pas certain de la façon dont je peux inclure du code pertinent étant donné la nature du problème. Je peux pointer vers le site https://zensacream.com afin que vous puissiez jeter un oeil sur le code HTML. De quoi d'autre auriez-vous besoin pour diagnostiquer ceci? –

Utilisez les étapes suivantes pour réduire le nombre de noeuds qui nécessitent une mise en:

Utilisez des contenants relativement positionnés avec des enfants absolument positionnés pour gérer serre-livres et la mise en page de centrage besoins:

position absolue les éléments sont entièrement supprimés du flux de documents. Cela signifie qu'ils n'ont aucun effet sur leur élément parent ou sur les éléments qui se produisent après eux dans le code source. Un élément positionné de manière absolue chevauchera donc un autre contenu à moins que vous ne preniez des mesures pour l'empêcher. Parfois, bien sûr, ce chevauchement est exactement ce que vous désirez, mais vous devez en être conscient, pour vous assurer que vous obtenez la mise en page que vous voulez!

Éviter animation sur la base du positionnement d'un élément:

Le gestionnaire calcule la propriété gauche de chaque image sur la base de la valeur de offsetTop de l'image. Cela force le navigateur à effectuer une nouvelle mise en page immédiatement pour s'assurer qu'il fournit la valeur correcte. Forcer une mise en page pendant chaque image d'animation est la cause des animations janky sur la page.

calculs Évitez qui dépendent des valeurs calculées des éléments DOM:

En règle générale, si vous demandez une valeur géométrique retour du DOM avant une trame est complète , vous allez vous retrouver avec des "mises en page synchrones forcées", qui peuvent être un gros goulot d'étranglement des performances si elles sont répétées fréquemment ou effectuées pour un grand arbre DOM.

Remplacer float avec inline-block si possible:

Tout contenu dans la ligne courante avant une boîte flottaient est refondu dans la première ligne disponible de l'autre côté du flotteur.

Utilisation display: flex au lieu de display: table ou la mise en page en fonction JavaScript si possible:

Le nouveau code de FlexBox a beaucoup moins codepaths plusieurs passes mise en page. Vous pouvez quand même cliquer assez facilement sur les chemins de code multi-passes (par exemple, flex-align: stretch est souvent à 2 passages). En général, il devrait être beaucoup plus rapide dans le cas courant, mais vous pouvez construire un cas où c'est aussi lent. Cela dit, si vous pouvez vous en sortir, la disposition de blocs régulière (non flottante) sera généralement aussi rapide ou plus rapide que la nouvelle boîte flexible, car elle est toujours à passage unique. Mais la nouvelle flexbox devrait être plus rapide que l'utilisation de tables ou l'écriture de code de mise en page JS-base personnalisé.

Seulement utiliser bottom en tant que valeur pour la vertical-align propriété:

Les boîtes de ligne sont alignés verticalement en fonction de la valeur de la propriété 'vertical-align' pour les éléments en ligne source. Si un élément a les valeurs 'top' ou 'bottom' pour cette propriété, seule la hauteur des boîtes générées affecte le calcul de la hauteur de la ligne de ligne; les boîtes ne peuvent pas être alignées tant que la boîte de ligne n'a pas été entièrement construite. Notez que si toutes les boîtes de la boîte de ligne sont alignées le long de leur fond, la boîte de ligne sera exactement la hauteur de la boîte la plus grande. Si, toutefois, les boîtes sont alignées le long d'une ligne de base commune, le haut et le bas de la boîte de ligne ne peuvent pas toucher le haut et le bas de la boîte la plus grande.

Utilisation inline-block avec une hauteur fixe pour de nombreux éléments en ligne qui doivent être positionnés verticalement:

La hauteur de chaque boîte au niveau de la ligne dans la zone de la ligne est calculée. Pour les éléments remplacés, les éléments de bloc inline et les éléments de table en ligne, il s'agit de la hauteur de leur zone de marge; pour les boîtes en ligne, c'est leur 'hauteur de ligne'.

Utilisez shouldComponentUpdate pour optimiser le rendu:

Dans la pratique, tout compliqué exige probablement shouldComponentUpdate pour des performances acceptables. L'écriture raisonnablement efficace shouldComponentUpdate nécessite à son tour des données sous-jacentes qui peuvent être comparées rapidement, d'où par exemple l'intérêt actuel pour les structures de données immuables qui peuvent être testées pour l'égalité en vérifiant une seule référence. Ainsi, le choix d'utiliser React pour le rendu a des implications sur la manière dont les données sous-jacentes sont également stockées, ce qui sape toute prétention à vraiment séparer la logique de vue de la logique métier.

Références

Source

2017-03-04 04:05:27

Ma phase de mise en page du chargement initial de la page prend plus de 2 secondes

Répondre

Questions connexes