web-dev-qa-db-fra.com

Pourquoi les iframes sont-ils si lents?

J'ai une question un peu plus longue pour vous - mais espérons que la réponse sera très simple :)

Disons que j'ai une page très simple avec un lien et iframe (juste pour exemple simple).

<body>
    <a href="test.html" target="mframe">open link></a>
    <iframe name="mframe" [params] />
</body>

Ainsi, lorsque vous cliquez sur le lien, le fichier test.html sera chargé dans le cadre.

Maintenant, je vais changer l'iframe avec div et ajax call.

<body>
    <a href="doAjaxCall('test.html')">open link</a>
    <div id="main-content"></div>
</body>

DoAjaxCall utilisera simplement GET ajax requset pour obtenir une réponse complète, l’analyser (avec JavaScript), saisir le contenu dans la balise <body> et le placer dans main-content.innerHTML.

test.html contient beaucoup de html, ainsi que des styles css (mais identiques à ceux de la page parente - je n'en ai donc pas besoin lorsque j'utilise une solution ajax).

Question:

Pourquoi cette solution ajax SO est-elle plus rapide? Je télécharge toujours la même quantité de données (téléchargement de test.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?

javascripthtmlcssajaxiframe
23
palig

Vous êtes plutôt sur la bonne voie. Les iframes vont être plus lents car il y a une surcharge supplémentaire pour le navigateur (le rendu, le maintien de son instance et ses références).

L'appel ajax va être un peu plus rapide parce que vous recevez les données et vous les injectez ou faites ce que vous voulez. L'iframe devra créer une "page" entièrement nouvelle dans la mémoire du navigateur, puis la placer dans la page.

24
Dave Morgan

Steve Souders a publié un message Utiliser Iframes avec parcimonie sur son blog de sites Web haute performance, qui pourrait fournir des informations supplémentaires.

15
Simon Lieschke

Bien que les navigateurs se soient améliorés depuis 2009, le fait que celui-ci ait besoin d'accéder à des serveurs supplémentaires (en supposant que les iframes sont destinés à un contenu tiers) ou au serveur local (en supposant que les iframes soient destinés à un contenu local) aura néanmoins un impact. performance 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éliorera le chargement initial de la page. Cependant, je pense que cela aurait une incidence sur les performances des pages pendant que l’iframe charge le contenu supplémentaire.

0
Webreality