jquery - poner - ¿Por qué Chrome usa más CPU cuando un gran elemento Knockout está oculto?

monitorevents

Question

Tengo una aplicación web de una sola página que usa Knockout.js 2.2.1 para mostrar la transmisión de información desde un servidor (usando socket.io, aunque no creo que eso importe). Esta aplicación también contiene una gran tabla de datos, que se crea a partir de un objeto JSON usando los enlaces foreach de Knockout. (La tabla es grande, pero no enorme: 20 columnas y 200 filas más o menos).

Como la tabla es grande, el usuario puede abrirla / cerrarla haciendo clic en los botones. Los datos <table> se colocan dentro de un elemento <div> que puedo ocultar / mostrar utilizando los .hide() y .show() jQuery (que funcionan básicamente configurando y borrando la display: none CSS display: none en <div> ).

Toda esta funcionalidad funciona. Sin embargo, me doy cuenta de que después de ''cerrar'' (ocultar) la tabla de Big Data, el uso de la CPU de Chrome salta, hasta el 100% si la tabla generada por Knockout es lo suficientemente grande. Lo que es más interesante es que esto solo ocurre después de que el usuario ha hecho clic en algún lugar dentro del elemento <div> que contiene la tabla cuando se muestra. Cuando la tabla está oculta (y el uso de la CPU es alto), al hacer clic en algún otro lugar de la página el uso de la CPU volverá a ser normal. El proceso se repetirá a voluntad.

Otra nota posiblemente útil: si detengo la transmisión de datos desde el servidor, este problema no ocurre (o no se nota en el uso de la CPU). Hay un único modelo de vista Knockout en esta página, que administra los datos de transmisión del servidor y la creación de esta tabla de datos desde un objeto JSON. Los dos conjuntos de datos están por lo demás completamente separados: ninguno de los datos cambiantes se muestra en la tabla, y la tabla no contiene enlaces de eventos al modelo de vista. Es como si la actualización de datos de transmisión del modelo Knockout estuviese causando trabajo en la tabla de datos a pesar de que ninguno de los datos de transmisión está vinculado a la tabla. ¡Y lo hace solo cuando la tabla no se muestra!

Sumario rápido:

• La aplicación web utiliza Knockout para representar una gran tabla de datos cuando se carga la página.
• Esta tabla está oculta con .hide() al inicio en $(document).ready , pero se muestra usando .show() , luego de hacer clic en un botón, y puede ocultarse nuevamente.
• Si se hace clic en el mouse dentro de la tabla de datos, el uso de la CPU en Chrome saltará al 100% después de que la tabla se oculte nuevamente.
• Al hacer clic en cualquier otra cosa en la página, el uso de la CPU volverá a ser normal.

Otra información relevante:

• El perfil de JavaScript de Chrome muestra el alto uso de CPU, pero se clasifica simplemente como tiempo (de programa).
• Ni IE10 ni Firefox 20 en Windows muestran este problema.

¿Alguna idea de lo que está pasando aquí o sugerencias para la resolución de problemas adicionales?

jsFiddle:

Ejemplo aquí: http://jsfiddle.net/CTYMv/6/

Observe el uso de la CPU después de cargar el violín, debería ser bajo. Haga clic en "Mostrar tabla", luego haga clic en algún lugar dentro de la div que aparece (fondo gris). Luego haga clic en "Ocultar tabla": el uso de la CPU aumentará significativamente. Luego haga clic en cualquier otro lugar (fondo blanco) y la CPU volverá a la normalidad.

Answer 1

Creo que ahora podemos argumentar que esto es un error en el motor de webkit. Este error solo aparece cuando se usa la display:none; propiedades css display:none; . ¿Se debe a cómo la GPU que utiliza webkit representa elementos ocultos? Bueno, todavía no sé ...

VER DEMO

Esta es la solución más simple que puedo pensar, esto no debería interferir con ninguno de tus otros códigos: {eg knockout observable}

CSS: {eventos de puntero agregados según lo sugerido por Brandon}

.hidden{opacity:0;pointer-events:none} //don''t use display:none here

JS:

//don''t use hide/show jq methods as internally it set display none (fadeOut() methods too)
$(''#btn_show'').click(function(){
    $(''#bigdatadiv'').removeClass(''hidden'');
});
$(''#btn_hide'').on(''click'',function(){    
   $(''#bigdatadiv'').addClass(''hidden'')
});

Soy consciente de que esto es solo una solución y que todavía no responden a su pregunta: ¿por qué está sucediendo esto?

Answer 2

Gracias por este hilo; pensarías que el error se habría solucionado dos años después.

window.getSelection (). removeAllRanges () resolvió cosas para mí y fue el más simple de encajar en mi código.

Answer 3

Solo use window.getSelection().removeAllRanges() antes de .hide(); por un gran bloque. Funciona bien para mí Es estúpido, pero es verdad.