CSSを使ってクラスをペイントする時間を計算するには？

Question

はノースタイリングと1つのdiv

<div></div> 

は、今私はJS（私はJSに追加どのようにここでは重要ではありません）を使用して、このようにそれにいくつかのクラスを追加しているとします

私はどのように

.cir 
    { 
     position: absolute; 
     width: 150px; 
     height: 150px; 
     background: black; 
     border-radius: 50%; 
    } 

    <div class='cir'></div> 

をCSSがスクリーンにペイントするのにかかる時間を計算しますか？

誰かがJSを使用してクラスを追加した後にsetTimeout(function(){ "It will done" },0);を使用するように提案しましたが、これは正しいアプローチですか？そうでない場合、何ができるのですか？

Answer 1

Use performance.now() function on the start of the tag and end of the tag 

    <div id="MyElement"></div> 
    <label id="timeTaken"></label> 


     .cir { 
     position: absolute; 
     width: 150px; 
     height: 150px; 
     background: black; 
     border-radius: 50%; 
     } 


    var t1 = performance.now(); 
    document.getElementById("MyElement").className += "cir"; 
    var t2 = performance.now(); 
    document.getElementById("timeTaken").innerHTML = t2 - t1;