レンダリング時間の変更JavaScriptで開始

Question

javascriptによるDOMの変更が実際に表示されるまでの時間を測定したいと思います。これは、円の色を変更する「ボタン」として機能する2つのrect Sを表示

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

：

は、この例のSVGファイルを考えます。追加のrectと、ぼかしと不透明は、それをより遅くするためのものです。

スクリプト：

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

今

クリックしたときに変更された色が実際に表示されるまで、1ミリ秒未満が表示されます時間は、しかし、それは明らかに（自分のコンピュータ上で）ほぼ二とります（ 、btw。、ChromeはFirefoxよりも速いようです）。

レンダリングの終了時にクリックと終了から始まる時間はどのように測定できますか？

Answer 1

1.Openクローム（空白）
2.Openデベロッパーツール（F12）
3.Move 'タイムライン' タブを
4.Clickレコードへ。
5.あなたのURLをchromeで貼り付けて、enterをクリックします。
6.ページが完全に読み込まれるまで待ちます。
7.録音を停止します。
私はそこに答えがあると思います。ここ

はクロムのタイムライン上のソース結果の一例である：

EDIT：JavaScriptの実行と結果の詳細については、回をレンダリングするために、あなたが「dynaTraceでは」または「SpeedTracer」を使用することができます（どのようにこれらのツールの1つを使用するような外観はHEREです）