¿Hay alguna forma en Javascript para programar el reflujo de un navegador?

Question

tengo que ser capaz de referencia una construcción particular de un navegador basado en WebKit y estoy midiendo la cantidad de tiempo que se necesita para hacer ciertas cosas como la manipulación DOM, límites de memoria, etc.

tengo una prueba que registra más adelante el tiempo que lleva cargar simultáneamente 10 gráficos PNG bastante pesados. En el código, necesito poder medir el tiempo que demora la carga. He intentado configurar la función onLoad en el objeto dinámico Imagen para producir un tiempo en ms. Sin embargo, como se muestra en el siguiente recuadro, proporciona una lectura inexacta porque la lectura que proporciona es muy pequeña debido a que solo registra la parte de transferencia de datos de la carga y luego hay un retraso considerable (3000 + ms) para cuando las imágenes son visibles - en bucle en azul, este es el ciclo de reflujo del navegador.

¿Hay algún evento en el webkit que pueda usar para registrar cuándo el navegador ha terminado un reflujo para poder compararlo? Tengo que poder registrar el tiempo en milisegundos en el código porque la compilación de webkit que estoy probando no tiene herramientas de desarrollador. Puedo observar la diferencia en Chrome, pero el rendimiento entre las dos versiones difiere drásticamente y necesito poder cuantificarlo con precisión para poder compararlo.

Answer 1

Si está utilizando jQuery, podría intentar registrar el tiempo entre document ready y window load, que le daría una aproximación.

(function(){ 
    var start, end; 

    $(document).ready(function(){ 
     start = new Date()  
    }); 
    $(window).load(function(){ 
     end = new Date(); 
     console.log(end.getTime() - start.getTime()); 
    }); 

}()); 

Editar:

¿Ha echado un vistazo a la Browserscope reflow timer? Básicamente, verifica cuánto tarda el navegador para devolver el control al motor de JavaScript después de los cambios en el dom. De acuerdo con la página debería funcionar en cualquier navegador, aunque no lo he probado personalmente. Tal vez podría adaptar el código ejecutado durante las pruebas para sincronizar el reflujo en su página.

Answer 2

Además, es posible que desee echar un vistazo a CSS Stress Test. El bookmarklet es realmente genial para las pruebas de rendimiento de la página. http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

¿Qué hay de la configuración de PNG como un div background-image y la ejecución de la prueba de estrés, se debe activar/desactivar la imagen varias veces con los tiempos.