Pourquoi iframes si lent?
J'ai une question un peu plus longue pour vous - mais j'espère que la réponse sera très simple:)
Disons que j'ai une page très simple avec link et iframe (juste pour un exemple simple).
<body>
<a href="test.html" target="mframe">open link></a>
<iframe name="mframe" [params] />
</body>
Donc, lorsque vous cliquez sur le lien, il chargera le test.html dans le cadre.
Maintenant, je vais changer l'iframe avec l'appel div et ajax.
<body>
<a href="doAjaxCall('test.html')">open link</a>
<div id="main-content"></div>
</body>
Le doAjaxCall utilisera simplement GET ajax requset pour obtenir une réponse entière, l'analyser (en utilisant JavaScript) et saisir le contenu dans la balise
et le mettre dans principal contenu.innerHTML.Test.html contient beaucoup de html, aussi des styles css (mais les mêmes que sur la page parent - donc je n'en ai pas besoin quand j'utilise la solution ajax).
Question:
Pourquoi cette solution ajax est-elle si rapide? Je télécharge toujours la même quantité de données (Téléchargement de test entier.HTML).
Pourquoi la solution iframe est-elle si lente? Est-ce parce que le navigateur doit analyser à nouveau tous les styles possibles? Ou y a-t-il d'autres frais généraux d'iframes?
3 réponses
Vous êtes à peu près sur la bonne voie. les iframes vont être plus lents car il y a une surcharge supplémentaire pour le navigateur (le rendre, maintenir son instance et ses références).
L'appel ajax va être un peu plus rapide car vous obtenez les données et vous les injectez ensuite, ou faites ce que vous voulez avec. L'iframe devra construire une toute nouvelle "page" dans la mémoire des navigateurs, puis la placer dans la page.
Steve Souders a un poste Utiliser les Iframes avec parcimonie sur son blog de Sites Web de haute Performance qui peut fournir un peu plus de perspicacité.
Bien que les navigateurs se soient améliorés depuis 2009, le fait que le navigateur ait besoin de frapper des serveurs supplémentaires (en supposant que les iframes sont pour le contenu thrid-party), ou de frapper à nouveau le serveur local (en supposant que les iframes sont pour le contenu local), cela aurait toujours un impact sur les performances de la page. En général, les requêtes HTTP supplémentaires auront toujours un impact sur les performances d'une page. S'il est possible de construire l'iframe après le chargement de la page et de rendre le contenu de l'iframe, cela améliorerait le chargement initial de la page. Cependant, je pense que cela aurait un impact sur les performances des pages pendant que l'iframe charge le contenu supplémentaire.