Đo thời gian hiển thị thay đổi được bắt đầu bởi Javascript

Question

Tôi muốn đo thời gian cần thiết cho đến khi thay đổi DOM được thực hiện bởi javascript một cách nhẹ nhàng được hiển thị.

Hãy xem xét ví dụ này tập tin 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> 

này hiển thị hai rect s mà hành động như “nút” mà thay đổi màu sắc của một vòng tròn. Các rect s bổ sung và độ mờ và độ mờ là để làm cho nó chậm hơn.

Kịch bản:

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

Bây giờ khi nhấp, một thời gian ít hơn 1 mili giây sẽ được hiển thị, tuy nhiên, nó rõ ràng là mất gần một giây (trên máy tính của tôi) cho đến khi màu sắc đã thay đổi thực sự được hiển thị (nơi , btw., Chrome có vẻ nhanh hơn Firefox).

Làm cách nào để đo thời gian bắt đầu bằng lần nhấp và kết thúc khi kết xuất xong?

Answer 1

1.Open Chrome (Trống)
2.Open DevTools (F12)
3.Move đến tab 'Timeline'
kỷ lục 4.Click.
5.Paste in chrome URL của bạn và nhấp enter.
6. đợi trang tải đầy đủ.
7. Dừng ghi âm.
Tôi nghĩ bạn sẽ tìm thấy câu trả lời ở đó.

đây là một ví dụ về kết quả nguồn của bạn trên timeline chrome của:

EDIT: Để biết thêm chi tiết về thi JavaScript và kết quả số lần hiển thị, bạn có thể sử dụng 'DynaTrace' hoặc 'Speedtracer' (Làm thế nào nó trông giống như sử dụng một trong những công cụ này là HERE)