Chemin de rendu critique
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Optimiser le chemin critique du rendu consiste à prioriser l'affichage du contenu lié à l'action actuelle de l'utilisateur.
Offrir une expérience Web rapide demande beaucoup de travail de la part du navigateur. En tant que développeurs Web, nous n'avons pas accès à la majeure partie de ce travail: nous écrivons le balisage et une belle page s'affiche à l'écran. Mais comment exactement le navigateur passe-t-il de
notre code HTML, CSS et JavaScript à l'affichage des pixels à l'écran ?
L'optimisation des performances consiste à comprendre ce qui se passe dans ces étapes intermédiaires entre la réception des octets HTML, CSS et JavaScript, et le traitement nécessaire pour les transformer en pixels affichés. Il s'agit du chemin critique du rendu.
En optimisant le chemin critique du rendu, nous pouvons considérablement réduire le délai de premier affichage de nos pages. En outre, comprendre le chemin critique du rendu permet également de créer des applications interactives performantes. Le processus de mise à jour interactive est le même, il s'effectue en boucle et idéalement à 60 images par seconde.
Mais tout d'abord, voyons comment le navigateur affiche une page simple.
Ressources supplémentaires
Commentaires
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2014/03/31 (UTC).
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Il n'y a pas l'information dont j'ai besoin"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Trop compliqué/Trop d'étapes"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Obsolète"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problème de traduction"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Mauvais exemple/Erreur de code"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Autre"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Facile à comprendre"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"J'ai pu résoudre mon problème"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Autre"
}]
{"lastModified": "Derni\u00e8re mise \u00e0 jour le 2014/03/31\u00a0(UTC)."}
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2014/03/31 (UTC)."],[],[]]