Misurazione del tempo di modifica del rendering avviato da Javascript

Question

Vorrei misurare il tempo necessario prima che venga visualizzato un cambiamento DOM eseguito da un javascript.

Si consideri l'esempio di file SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="1600" 
    height="1000" 
    version="1.1"> 
    <script xlink:href="clicktest.js" /> 
    <defs> 
    <filter id="filterBlur" x="-0.6" width="2.2" y="-0.6" height="2.2"> 
     <feGaussianBlur stdDeviation="120" /> 
    </filter> 
    </defs> 
    <rect y="50" x="50" height="100" width="200" style="fill:#ff0000" onmousedown="red()" /> 
    <rect y="50" x="300" height="100" width="200" style="fill:#0000ff" onmousedown="blue()" /> 
    <circle cx="800" cy="600" r="300" id="circle" 
      style="fill:#888888;filter:url(#filterBlur)" /> 
    <text id="time" x="1250" y="50" style="font-size:40px">time...</text> 
    <rect x="900" y="300" width="600" height="600" 
     style="fill:#650088;fill-opacity:0.5;filter:url(#filterBlur)" /> 
    <rect x="100" y="400" width="300" height="400" 
     style="fill:#999900;fill-opacity:0.5;filter:url(#filterBlur)" /> 
</svg> 

Questa mostra due rect s che fungono da “pulsanti” che cambiano il colore di un cerchio. Gli ulteriori rect e la sfocatura e l'opacità servono a renderlo più lento.

Lo script:

function blue() 
{ 
    var startTime = performance.now(); 
    document.getElementById('circle').style.fill = '#0000ff'; 
    var endTime = performance.now(); 
    document.getElementById('time').textContent = (endTime - startTime).toString(); 
} 

function red() 
{ 
    var startTime = performance.now(); 
    document.getElementById('circle').style.fill = '#ff0000'; 
    var endTime = performance.now(); 
    document.getElementById('time').textContent = (endTime - startTime).toString(); 
} 

Ora quando si fa clic, un momento sarà visualizzato meno di 1 millisecondo, però, ci vuole, ovviamente, quasi un secondo (sul computer) finché non viene visualizzato in realtà il colore cambiato (dove , btw., Chrome sembra essere più veloce di Firefox).

Come posso misurare il tempo a partire dal clic e dalla fine al termine del rendering?

Answer 1

1.Open Chrome (in bianco)
2.Open DevTools (F12)
3.Spostare alla scheda 'Timeline'
4.Click record.
5. Incolla in chrome l'URL e fai clic su.
6. attendere il caricamento completo della pagina.
7. Interrompere la registrazione.
Penso che troverete la risposta lì.

qui è un esempio dei risultati di origine sulla linea temporale di Chrome:

EDIT: Per maggiori dettagli su di esecuzione di JavaScript e dei risultati di rendering volte che è possibile utilizzare 'dynaTrace' o 'Speedtracer' (Come sembra che l'utilizzo di uno di questi strumenti sia HERE)