Ejecución lenta de JavaScript en Iframe solo en IE

El problema:

Desarrollé una aplicación web . Está embedded en un sitio con la ayuda de un iFrame.

Si ejecuto la aplicación como independiente (IE9) en, digamos: www.example.com/webapp, se carga en aproximadamente diez segundos (es una aplicación bastante grande). Chrome y FF son mucho más rápidos.

Sin embargo, si está embedded en un iFrame, IE lo pierde por completo con times de ejecución de javascript de hasta 40-60 segundos hasta que la aplicación termine de cargarse. Una vez que se carga la aplicación, sin embargo, no hay problemas y se ejecuta sin problemas.

Recapitulación: independiente: OK, en iFrame: no está bien.

En la aplicación web se cargan algunos xml, específicamente uno muy grande que es de aproximadamente 8mb. Los xml se analizan y el contenido se crea usando KnockoutJS. Sin embargo, esto no es muy relevante, ya que lo he networkingucido al análisis XML que se realiza con jQuery.

Independiente, el análisis tarda unos 10 segundos en IE9. Incrustado es alnetworkingedor de 40-60. He consoledo los loggings de estado y las marcas de time y puedo ver físicamente que el javascript se ejecuta increíblemente lento embedded . Cada trazado tarda de 4 a 6 veces más, lo que corresponde al aumento del time total de carga.

FireFox y Chrome son inmunes y no muestran ralentización o tan poca ralentización que no se notan.

Probé la incrustación de iFrame y Object. Mismos resultados

La pregunta

¿Sabes por qué la simple ejecución de javascript (XML Parsing cuando el xml está cargado y en la memory), tomaría de 4 a 6 veces más cuando está embedded en un iframe que en modo independiente?

Información de bonificación

No estoy hablando de carga de página aquí . Todo carga bien Incluso la página de host. Esta no es otra página que está colgando hasta que el iframe esté listo. el problema es que la ejecución dentro del iframe es lenta. Intenté incrustar en el mismo dominio, dominio externo, interno, externo. Mismo problema en todas partes. Tan pronto como me asome la maldita cosa, el performance de la carga se va al infierno. Una vez que está cargado, todo está bien y todo funciona muy bien.

PD: Espero que la negrita de lo que encuentro sean palabras key esté bien. Se supone que es una ayuda, no ser molesto. Personalmente, tengo problemas para enfocarme en grandes cantidades de text.

**

Monitor de performance mientras se está cargando:

IE9 **

View post on imgur.com

enter image description here

4 Solutions collect form web for “Ejecución lenta de JavaScript en Iframe solo en IE”

Descubrí que establecer el tamaño del elemento con jQuery .height (n) y .width (n) puede ser extremadamente lento, en su lugar puede usar .css ("ancho", x) y .css ("alto", x).

Primero, presione F-12 y confirme que el modo de documento es el mismo en ambas instancias. De lo contrario, cambie el modo de documento del marco externo para que coincida con …

Si ya son lo mismo, intente cargar el script de iFrame dinámicamente después de que se complete la página externa. Las versiones anteriores de IE manejan la asignación de resources de manera extraña y podrían ser parte del problema.

De acuerdo, no es la respuesta a su pregunta, pero llevar 8 MB de XML al cliente es bastante ineficiente. ¿Se puede eliminar algo de esto o procesar completamente el lado del server?

Por último, IE tarda en moverse y agrega elementos DOM (en comparación con Chrome). Su mejor apuesta es agregarlos todos a la vez. Entonces, si está actualizando la UI mientras analiza el XML (en lugar de todo a la vez después del análisis), eso lo ralentizará considerablemente.

Similar a lo que dijo @ ern0, si está manipulando alto y ancho en su secuencia de commands y está experimentando lentitud, cambiar de usar los .height() y .width() jQuery a vanilla JS podría mejorar significativamente el performance.

Getters

Aquí hay una testing de performance para leer la altura actual del elemento. Muestra que la propiedad JS offsetHeight vainilla es significativamente más rápida que las .height() , .css("height") y .style.height .

La diferencia es tan significativa que ni siquiera es una competencia.

Setters

Aquí hay una testing de performance para establecer la altura actual del elemento. Muestra que la propiedad JS de vanilla .style.height es significativamente más rápida * que los .height() y .css("height") .

De nuevo, la diferencia es tan significativa que ni siquiera es una competencia.

Resumen

La propiedad .style.height sobresale en get y establecer por un margen increíble, en comparación con los methods jQuery. La propiedad offsetHeight solo offsetHeight es significativamente más rápida que la propiedad style.height para get, pero (como es de solo lectura) no se puede usar para establecer la altura. Como tal, puede ser más fácil simplemente cambiar el código para usar .style.height , si aún logra el efecto deseado.

Las properties y los methods de alto y ancho deberían ser más o less los mismos. Si desea agregar puntos de reference de performance para ellos también, está bien, pero debe get el mismo resultado, con las properties de ancho y los methods que terminan en el mismo lugar que sus correspondientes contrapartes de altura.

Aparentemente IE tenía un problema serio al get attributes de un nodo xml a través de jQuery en un bucle profundamente nested. Cambiar esto a JS puro networkinguce el time de carga a aproximadamente 15 segundos. Todavía no es genial, pero mucho, mucho mejor!

  • Manejo de errores de Node.js: cómo tratar con valores indefinidos que causan errores
  • Conversión de XML a CSV usando Javascript
  • Analizando XML local o remoto usando angularjs y ionicframework
  • Cómo analizar la estructura XML con javascript JQuery
  • Analizador XML escrito en javascript puro para entornos integrados
  • pasando cadena de image base64 en label xml
  • Análisis de XML a JSON en Amazon Lambda utilizando bibliotecas js externas
  • XML to JSON: se trata de espacios de nombres y alias xml en JavaScript
  • Nodo para analizar xml usando xml2js
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.