C'è un modo in Javascript per temporizzare il reflow del browser?

Question

Devo essere in grado di confrontare una particolare build di un browser basato su webkit e sto misurando il tempo necessario per fare certe cose come manipolazione DOM, limiti di memoria ecc.

Ho una prova sotto la quale registri il tempo necessario per caricare contemporaneamente 10 grafici PNG abbastanza pesanti. Nel codice, ho bisogno di essere in grado di calcolare quanto tempo ci vuole perché il carico finisca. Ho provato a impostare la funzione onLoad sull'oggetto Image dinamico per produrre un tempo in ms. Tuttavia, come mostrato nel cap qui sotto, sta dando una lettura inaccurata perché la lettura che dà è una piccola quantità dovuta alla sola registrazione della parte di trasferimento dati del carico e quindi c'è un ritardo considerevole (3000 + ms) per quando il le immagini sono visualizzabili - in loop in blu, questo è il ciclo di reflow del browser.

C'è qualche evento nel webkit che posso usare per registrare quando il browser ha terminato un reflow in modo da poter effettuare il benchmark? Devo essere in grado di registrare il tempo in millisecondi nel codice perché la build del webkit che sto testando non ha strumenti di sviluppo. Sono in grado di osservare la differenza in Chrome, ma le prestazioni tra le due versioni differiscono drasticamente e devo essere in grado di quantificarle accuratamente per il confronto.

Answer 1

Se si utilizza jQuery, si potrebbe provare a registrare il tempo tra document ready e window load, che darebbe un'approssimazione.

(function(){ 
    var start, end; 

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

}()); 

Edit:

Avete dato un'occhiata al Browserscope reflow timer? Fondamentalmente controlla per quanto tempo ci vuole per il browser per restituire il controllo al motore JavaScript dopo le modifiche al dom. Secondo la pagina dovrebbe funzionare in qualsiasi browser, anche se non l'ho provato personalmente. Forse potresti adattare il codice eseguito durante i test per cronometrare il reflow nella tua pagina.

Answer 2

Inoltre, si potrebbe voler dare un'occhiata al test di stress CSS. Il bookmarklet è davvero eccezionale per il test delle prestazioni della pagina. http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

Come impostare il PNG come div background-image ed eseguire lo stress test, dovrebbe abilitare/disabilitare l'immagine più volte con i tempi.