Facebook Timeline

Début mai, des ingénieurs de Facebook sont venus chez Google faire une présentation intitulée « Timeline timeline« , où comment l’outil de profilage en Timeline de Chrome leur a permis d’optimiser les pages Timeline sur Facebook, et vice-versa. Paul Irish, de chez Google, résumait sur son compte Google+ ses principales notes :

• Quand vous essayez d’améliorer la vitesse de rendu CSS d’un site, vous devez identifier le pourcentage du temps passé à exécuter les sélecteurs (« selector matching« ), au calcul des styles (« style recalculation« ), au reflow et au repaint.
• Vous êtes préoccupés par le paint ? Désactiver le rendu d’un élément avec « visibility:hidden » et voyez ce que ça donne.
• Vous êtes préoccupés par le reflow ? Sortez un élément de l’arbre du rendu avec « display:none ».
• Utilisez requestAnimationFrame pour mesurer le nombre d’images par secondes.
• Des images en background fixes sont très coûteuses en framerate.
• Chrome est assez paresseux pour décoder des images en JPG. Redimensionner une image côté client est très coûteux car Chrome garde à la fois l’image originale décodée et la nouvelle image redimensionnée en mémoire. Cela peut causer l’expulsion d’autres images de la mémoire ce qui demandera un nouveau décodage par la suite. Chrome Task Manager permets de suivre les chiffres de vos images en cache : si la consommation de mémoire est plus ou moins la même alors que vous voyez de nouvelles images, vous expulsez très certainement des anciennes images.
• performance.webkitNow() a été implémenté dans Chrome et permets de faire des mesures très précises (à la nanoseconde et même au delà).