Công cụ để đo Thời gian hiển thị

Question

Có công cụ nào để đo thời gian hiển thị thực tế của (các) thành phần trên một trang không? Tôi không có nghĩa là tải về thời gian của các nguồn lực, nhưng thời gian thực tế trình duyệt đã để render cái gì đó. Tôi biết rằng thời gian này sẽ thay đổi dựa trên các yếu tố trên máy khách, nhưng vẫn sẽ rất tiện dụng khi biết công cụ hiển thị mất một thời gian để tải. Tôi sẽ tưởng tượng điều này nên là một tiện ích hữu ích kể từ khi các ứng dụng web đang trở thành khách hàng khá nặng bây giờ. Có suy nghĩ gì không?

Answer 1

Tôi đã sử dụng kịch bản này để phân tích thời gian render của một số trang:

<script language="JavaScript"> 
<? 

    $output = str_replace('=', 'A', base64_encode(file_get_contents('data.txt'))); 

    echo "\tCode = \"" . substr($output, 0, 512) . "\""; 
    $size = strlen($output); 
    for ($i = 512; $i < $size; $i += 512) 
     echo "\n\t  + \"" . substr($output, $i, 512) . "\""; 
    echo ";\n"; 

?> 
    Data = ""; 
    Dict = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/"; 

    j = Code.length -3; 
    for (i = 0; i < j; i += 4) { 
     Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i )) << 2) | (Dict.indexOf(Code.charAt(i + 1)) >> 4)) & 0xff); 
     Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i + 1)) << 4) | (Dict.indexOf(Code.charAt(i + 2)) >> 2)) & 0xff); 
     Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i + 2)) << 6) | (Dict.indexOf(Code.charAt(i + 3)) )) & 0xff); 
    } 

    time_start = (new Date).valueOf()/1000; 
    document.write(Data); 
    time_elapsed = (new Date).valueOf()/1000 - time_start; 

    alert(time_elapsed); 

</script>

Phần PHP, phần JavaScript. data.txt là tệp chứa HTML để phân tích. Đã kiểm tra trên IE và FF.

Answer 2

Bạn có thể xem YSlow.

Chỉnh sửa: Dường như với tôi rằng firebug hiển thị thời gian hiển thị bằng dòng màu xanh lam và đỏ trong bảng điều khiển mạng.

Answer 3

Tôi sẽ đề xuất YSlow.

Nó không chỉ đo lường thời gian thực hiện của các yếu tố trong trang của bạn mà còn phân tích thiết kế trang của bạn để đề xuất cách bạn có thể cải thiện hiệu suất. Đây là một trong những công cụ mà họ đã sử dụng trong quá trình phát triển Stack Overflow.

Yahoo! YSlow

YSlow phân tích trang web và gợi ý cách để cải thiện hiệu suất của họ dựa trên một bộ quy tắc cho cao trang web hiệu suất. YSlow là một tiện ích bổ sung cho Firefox được tích hợp với công cụ phát triển web Firebug . YSlow trang web cấp dựa trên một trong ba quy tắc được xác định trước hoặc quy tắc do người dùng xác định. Nó cung cấp đề xuất để cải thiện hiệu suất của trang , tóm tắt các thành phần của trang, hiển thị thống kê về trang, và cung cấp các công cụ để phân tích hiệu suất , bao gồm Smush.it ™ và JSLint.

Answer 4

Firebug cho Firefox có tích hợp trong "Net" -Tab.

nhu cầu Firefox (tôi đã làm nó với phiên bản 12.0) cấu hình sửa đổi, loại about:config trong thanh địa chỉ và sau đó tìm kiếm dom.send_after_paint_to_content

Đặt dom.send_after_paint_to_content là true.

MozAfterPaint sau đó được vẽ thành các đường thẳng đứng màu xanh lá cây nhỏ trong thời gian tải mạng ngoài các dòng màu xanh (DOMContentLoaded) và màu đỏ (tải).