Có cách nào trong Javascript để chỉnh sửa thời gian của trình duyệt không?

Question

Tôi cần có khả năng đánh giá một bản dựng cụ thể của trình duyệt dựa trên webkit và đang đo thời lượng cần thiết để thực hiện các công cụ nhất định như thao tác DOM, giới hạn bộ nhớ, v.v.

Tôi có kiểm tra bên dưới khoảng thời gian cần để tải đồng thời trong 10 đồ họa PNG khá nặng. Trong mã, tôi cần có khả năng thời gian để tải hoàn thành. Tôi đã thử đặt chức năng onLoad trên đối tượng Hình ảnh động để tạo thời gian bằng ms. Tuy nhiên, như được trình bày trong giới hạn dưới đây, việc đọc không chính xác vì đọc nó cho là một lượng nhỏ do nó chỉ ghi phần truyền dữ liệu của tải và sau đó có độ trễ đáng kể (3000 + ms) khi hình ảnh có thể xem được - có màu xanh lam, đây là chu trình khôi phục trình duyệt.

Có một số sự kiện trong webkit mà tôi có thể sử dụng để ghi lại khi trình duyệt đã hoàn thành bản chỉnh sửa để tôi có thể chấm điểm chuẩn này không? Tôi có thể ghi lại thời gian bằng mili giây trong mã vì việc xây dựng webkit mà tôi đang thử nghiệm không có công cụ dành cho nhà phát triển. Tôi có thể quan sát sự khác biệt trong Chrome ok nhưng hiệu suất giữa hai bản dựng khác nhau đáng kể và tôi cần để có thể định lượng chính xác nó để so sánh.

Answer 1

Nếu bạn đang sử dụng jQuery, bạn có thể thử ghi lại thời gian giữa document ready và window load, mà sẽ cung cấp cho bạn một xấp xỉ.

(function(){ 
    var start, end; 

    $(document).ready(function(){ 
     start = new Date()  
    }); 
    $(window).load(function(){ 
     end = new Date(); 
     console.log(end.getTime() - start.getTime()); 
    }); 

}()); 

Edit:

Bạn đã lấy một cái nhìn tại các Browserscope reflow timer? Về cơ bản, nó kiểm tra xem phải mất bao lâu để trình duyệt trả về điều khiển cho công cụ JavaScript sau khi thay đổi thành dom. Theo trang nó sẽ hoạt động trong bất kỳ trình duyệt nào, mặc dù tôi chưa thử nghiệm nó một cách cá nhân. Có lẽ bạn có thể thích ứng với mã chạy trong các bài kiểm tra để thời gian reflow trong trang của bạn.

Answer 2

Ngoài ra, bạn có thể muốn xem xét Kiểm tra căng thẳng CSS. Bookmarklet thực sự tuyệt vời để kiểm tra hiệu suất trang. http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

Cách đặt PNG làm div background-image và chạy kiểm tra căng thẳng, nó phải bật/tắt hình ảnh nhiều lần với thời gian.