Javascript tarafından başlatılan Değişikliğin Oluşturma Süresini Ölçme

Question

Bir javascript tarafından yapılan bir DOM değişikliği görüntülenene kadar geçen süreyi ölçmek istiyorum.

<?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> 

Bu bir dairenin rengini değiştirmek “düğmeleri” olarak hareket eden iki rect s görüntüler:

bu örnek svg dosyası düşünün. Ek rect s ve bulanıklık ve opaklık daha yavaş yapmak içindir.

senaryo:

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(); 
} 

Şimdi

tıklandığında değişen rengi gerçekte görüntülenene kadar, 1 milisaniyeden az görüntülenecek bir süre, ancak, belli ki (benim bilgisayarda) neredeyse ikinci sürer (, btw., Chrome, Firefox'tan daha hızlı görünüyor).

Oluşturma bittiğinde tıklama ve bitiş ile başlayan süreyi nasıl ölçebilirim?

Answer 1

1.Open Krom 'Zaman çizelgesi' sekmesine
4.Click rekor (Boş)
2.Open DevTools (F12)
3.Move.
5. URL’nizi chrome’a yapıştırın ve enter'a tıklayın.
6. Sayfanın tamamen yüklenmesini bekleyin.
7. Kaydı durdurun.
Bence cevabı orada bulacaksınız.

EDIT: Burada

Chrome'un zaman çizgisi üzerinde kaynak sonuçlarının bir örneğidir daha JavaScript yürütme ile ilgili ayrıntılar ve 'DynaTrace' veya 'Speedtracer kullanabilirsiniz kez render sonuç için (Nasıl Bu araçlardan birinin kullanılmasının benzerini HERE)