¿Qué se puede hacer para mejorar el rendimiento de IE8 para grandes conjuntos de datos?

Question

Tengo una página que muestra ~ 300 páginas de datos tabulares. Firefox, Chrome, Safari funcionan bien, pero IE 7, 8 y 8 Compatibilidad ver todos miserables. Se retrasa durante varios segundos cuando trato de desplazarme o presiono el botón de página arriba/página abajo.

La paginación, conjuntos de datos más pequeños y otras sugerencias de usabilidad no funcionarán para esta página. Supongo que no tengo más remedio que mostrar todos estos datos a la vez ... ¿qué puedo hacer para ajustarlo?

Los datos se carga a través de jQuery/Ajax y que parece ser, al menos en parte, sospechoso aquí, porque cuando creé una página de prueba para hacer que los resultados directamente no es bastante tan lento, pero todavía no casi tan ágil como otros navegadores.

He utilizado plugins de jQuery con éxito, como SlickGrid, para abordar problemas similares en el pasado, pero por razones que tardarían mucho tiempo en explicar, no son una opción, incluso con las capacidades de representación de micro plantillas. Me preocupan principalmente los ajustes que puedo hacer para mejorar el rendimiento sin tener que volver a trabajar la página completa ni presentar soluciones de terceros.

¿El DOM simplificado marcará una gran diferencia? ¿O IE no maneja bien los datos introducidos a través de JavaScript/Ajax?

Answer 1

Difícil de ver sin más detalles o un ejemplo ... ¿Cómo construyes el contenido? Hay bastantes capturas pequeñas con el contenido de la tabla de compilación: en particular la configuración innerHTML directamente en <table> no funciona en IE, por lo que jQuery's html() probablemente lo haga de una manera lenta y lenta si eso es lo que está usando.

Pero una punta de propósito general para cualquier cosa con mesas, especialmente las más grandes: establecer el estilo table-layout: fixed en el elemento <table>, el establecimiento de la columna width estilos ya sea en la primera fila de celdas solamente, o en un conjunto de <col> s. (Las columnas sin un width explícito compartirán el ancho restante por igual entre ellos en una situación de diseño líquido).

Dado que no depende de la cantidad de contenido en cada celda, el diseño de la tabla fixed es más rápido y mucho más predecible que predeterminado auto algoritmo de diseño de tabla.

Answer 2

He encontrado que cuando inserta dinámicamente contenido grande y complejo en una página existente, IE es mucho (mucho) más rápido configurando innerHTML que creando de manera programática docenas o cientos de nodos DOM e insertándolos, ya sea que está usando una biblioteca del lado del cliente o no. Si procesa su lado del servidor HTML y lo envía como una cadena en lugar de enviar datos JSON y representar el lado del cliente, está usando más ancho de banda, pero sus usuarios de IE probablemente tendrán una mejor experiencia.

El rendimiento de JavaScript de IE es actualmente bastante terrible, por lo que si desea hacer que su sitio sea más rápido en IE, la minimización de la manipulación de DOM a gran escala es un buen comienzo. No debería ser demasiado difícil hacer un caso de prueba simple para comparar, para ver si dicho cambio beneficiará su situación particular.

Answer 3

usa innerHTML y minimiza la interacción js/dom. Js no es tan lento en IE pero el puente js/dom es muy lento. También evite seleccionar elementos en el html que está a punto de insertar. Si lo haces, jQuery tendrá que recorrer cada elemento y probar con el atributo id o css. Esto es muy lento

En sí mismo, es posible insertar unos pocos miles de elementos en el DOM en IE.pero si comienzas a hacer algunos cambios en este html, es posible que tengas problemas graves de rendimiento.

Más allá de eso, su código es necesario para saber cómo hacerlo más rápido. también una página de prueba que puede ser perfilada sería genial.

FYI, la única herramienta de perfilado de rendimiento disponible para IE es la versión dynatrace ajax. Es gratis y un excelente software de calidad. Úselo!

Answer 4

Tenga cuidado con jQuery .find() en IE8. Si no está escrito con cuidado, podrías estar causando que IE8 haga gimnasia bastante ridícula. Desearía saber más acerca de por qué, etc., pero si comenta su .find() en su jQuery y lo ejecuta, aunque su script se haya interrumpido temporalmente, es posible que vea que la página se está cargando rápidamente.

Solo supongo, pero es fácil de probar.

Answer 5

1. Avoid using script that going to make changes in DOM specially inside a loop. 
     eg. 

for (var i = 0; i < rownodes.length; i++) { 
    curRow = document.createElement("tr"); // this is a direct operation to DOM 
    for(j=0 ;j <colLenth;j==){ 
    cell = document.createElement("td"); 
    } 
} 
// instead use.. 
var table = '<table>'; 
for (var i = 0; i < rownodes.length; i++) { 
    table = table + '<tr>'; // don't use DOM operation if not needed. 
    for(j=0 ;j <colLenth;j==){ 
     table = table + '<td> my text </td>'; 
    } 
} 
table = table + '</table>';// simple string operations will be much faster 
('#myDiv').append($(table));// at the end you can add it to the DOM. 

[Building High Performance HTML Pages][1] 

    [1]: http://msdn.microsoft.com/en-us/library/ms533002%28v=vs.85%29.aspx 

Answer 6

1. también puede mejorar su prestación de mesa mediante la mejora de su presentación. al agregar colgroup, la representación de la tabla se vuelve rápida (puede ver la diferencia cuando se trabaja con tablas grandes) ya que el motor del navegador no tiene que buscar el ancho de cada columna.

<table style="table-layout: fixed" width="600"> 
    <colgroup> 
     <col width="100"><col width="300"><col width="200"> 
    </colgroup> 
    <tr height="20"> 
     <td>ss</td> 
     <td>ss</td> 
     <td>ss</td> 
    </tr> 
    <tr></tr> 
    .... 
    ... 
</table> 

see the below link for detailed discription 

http://msdn.microsoft.com/en-us/library/ie/ms533002(v=vs.85).aspx