30 boutons "Like" de Facebook sur une page surchargent le navigateur web ?

Question

Sur une page contenant une liste d'une trentaine d'entrées, chacune d'entre elles peut être aimée par Facebook (le code HTML de chaque entrée contient un bouton J'aime), et chacune d'entre elles est affichée ou non (en fonction d'un paramètre de filtre) :

• La page prend plusieurs secondes pour se charger entièrement
• La page utilise beaucoup de mémoire, grâce aux boutons "J'aime".
• La page utilise le CPU même si l'utilisateur n'interagit pas (toutes les 100 ms ou moins, l'un des boutons J'aime déclenche un événement en utilisant le Javascript)
• Si je ne modifie pas l'arbre DOM, mais seulement la visibilité des éléments, les boutons semblent être rechargés de toute façon.

Sur un PC de plus de 1 GHz et 1 Go de mémoire, la page est inutilisable tant elle est lente (navigateur : Chromium). Comment puis-je changer cela, en conservant les boutons "J'aime" ?

Answer 1

1. La faute à "J'aime" de Facebook implémentation
2. Téléchargez Firefox Nightly ou "Aurora" et consultez l'onglet "about:memory" pour vous faire une idée de l'impact des boutons "Like" sur la mémoire. (Firefox a ajouté un rapport sur la mémoire par compartiment à about:memory)

Answer 2

Utiliser le SDK JavaScript

Veillez à inclure les boutons "like" via xfbml et le JavaScript SDK. De cette façon, vous avez plus de contrôle sur eux.

Ne les chargez pas initialement, chargez-les explicitement lorsque vous en avez besoin.

De plus, la documentation recommande par défaut de remplacer immédiatement les balises xfbml par des boutons facebook like dès que la page est chargée. Par conséquent, il a

    xfbml  : true  // parse XFBML

comme option à presque toutes les mentions d'appel de FB.init. Ce n'est pas ce que vous voulez.

Si vous disposez d'un grand nombre de boutons "like", il est fort probable que vous n'ayez pas besoin de les charger tous au départ. Le SDK JavaScript offre une fonction pour analyser et remplacer le fbxml de manière explicite. Vous pouvez l'appeler sur un certain nœud DOM au lieu de la page entière. Voir FB.XFBML.parse . De cette façon, vous pouvez charger les boutons quand vous en avez besoin, vous pourriez même charger paresseusement seulement ceux qui sont actuellement visibles dans le navigateur, à l'instar des techniques de chargement paresseux des images.

Answer 3

Je pense que les performances sont lentes parce que le bouton "J'aime" de Facebook est chargé dans une iframe qui prend beaucoup plus de temps à charger. Je ne suis pas sûr qu'il existe une option de ce type dans l'api graphique, mais envisagez de créer un bouton Like personnalisé en chargeant les informations sur le serveur.

http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/

Answer 4

Je sais que c'est une vieille question, mais socialite.js semble pouvoir faire l'affaire :

Socialite offre un moyen très simple d'implémenter et d'activer une pléthore de boutons de partage social - quand vous le souhaitez. Au chargement du document, au survol de l'article, à n'importe quel événement !

Si vous vendez votre âme, vous pouvez aussi bien le faire de manière asynchrone. Socialite ne bloquera pas le rendu des documents en attendant 50 Ko de médias sociaux.