2009-07-07 31 views
20

Tengo una pregunta un poco más larga para usted, pero espero que la respuesta sea muy simple :)¿Por qué los iframes son tan lentos?

Digamos que tengo una página muy simple con enlace e iframe (solo por ejemplo).

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

Al hacer clic en el enlace, se cargará test.html en el marco.

Ahora voy a cambiar el iframe con llamadas div y ajax.

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

El doAjaxCall simplemente usará GET ajax requset para obtener la respuesta entera, analizarlo (usando JavaScript) y el contenido de sujeción en el cuerpo < > etiqueta y ponerla en content.innerHTML principal.

test.html contiene una gran cantidad de estilos html, también CSS (pero los mismos que en la página principal, por lo que no los necesito cuando estoy usando una solución jajax).

Pregunta:

¿Por qué es esta solución ajax SO más rápido? Todavía estoy descargando la misma cantidad de datos (descargando todo test.html).

¿Por qué la solución iframe es tan lenta? ¿Es porque el navegador tiene que analizar todos los estilos posibles de nuevo? ¿O hay alguna otra sobrecarga de iframes?

+0

¿Ve el mismo comportamiento en más de un navegador? – ChristianLinnell

+0

En realidad, mi ejemplo fue muy simple. :) En real estaba probando esta solución en un sitio más grande donde estamos usando iframes ahora. Los eliminé y los reemplazo con esa solución de Ajax. Cuando escribí, acabo de reemplazar enlaces con llamadas ajax, pero el tráfico sigue siendo el mismo. Y sí, definitivamente es más rápido en todos los navegadores (IE/FF/CH/SAF). La única razón que puedo ver ahora es que el navegador no necesita cargar estilos una y otra vez simplemente reemplaza innerHTML de div 'main-content'. Gracias! Pavol. – palig

+0

Si su hoja de estilo está en un archivo css dedicado llamado a través de la etiqueta de enlace, entonces el navegador debe aprovechar el almacenamiento en caché y solo cargarlo una vez. Por cierto, me pregunto cuánto más lento es tu iframe, estamos hablando de milisegundos, ¿verdad? – Christophe

Respuesta

22

Estás en la vía correcta. iframes van a ser más lentos porque hay una sobrecarga adicional para el navegador (renderizarlo, mantener su instancia y referencias a él).

La llamada ajax va a ser un poco más rápida porque obtiene los datos y luego los inyecta, o hace lo que quiera con ellos. El iframe necesitará construir una "página" completamente nueva en la memoria de los navegadores y luego colocarla en la página.

+1

Guau, gracias por su respuesta super-sónica-rápida :) Me encanta el SO! Esperaré si hay otras respuestas/opiniones. – palig

+4

6 años después, ¿sigue siendo una evaluación precisa? – donohoe

+1

@donohoe sí, sigue siendo la misma situación, incluso 7 años más tarde – kuzzmi

14

Steve Souders tiene una publicación Using Iframes Sparingly en su blog de sitios web de alto rendimiento que puede brindar más información.

+0

¡Marqué más arriba como 'respuesta' pero esta también es muy útil! Gracias. – palig

0

Aunque los navegadores han mejorado desde 2009, el hecho de que el navegador necesita alcanzar servidores adicionales (suponiendo que los iframes son para contenido de terceros), o golpea el servidor local nuevamente (suponiendo que los iframes son para contenido local), esto aún afectaría el rendimiento de la página. En general, las solicitudes HTTP adicionales siempre tendrán un impacto en el rendimiento de una página. Si es posible construir el iframe después de cargar la página y luego representar el contenido del iframe, esto mejoraría la carga de la página inicial. Sin embargo, creo que esto afectaría el rendimiento de las páginas, mientras que el iframe carga el contenido adicional.

Cuestiones relacionadas