Nếu bạn cần lấy thời gian thực hiện chức năng trên máy phát triển cục bộ của mình , bạn có thể sử dụng các công cụ định hình của trình duyệt hoặc các lệnh điều khiển như console.time()
và console.timeEnd()
.
Tất cả các trình duyệt hiện đại đều có trình biên dịch JavaScript tích hợp. Các trình biên dịch này sẽ đưa ra phép đo chính xác nhất vì bạn không phải sửa đổi mã hiện tại của mình, điều này có thể ảnh hưởng đến thời gian thực hiện của hàm.
Để hồ sơ JavaScript của bạn:
- Trong Chrome , nhấn F12 và chọn tab Cấu hình , sau đó Thu thập hồ sơ CPU JavaScript .
- Trong Firefox , cài đặt / mở Fireorms và nhấp vào nút Hồ sơ .
- Trong IE 9+ , nhấn F12 , nhấp vào Script hoặc Profiler (tùy thuộc vào phiên bản IE của bạn).
Ngoài ra, trên máy phát triển của bạn , bạn có thể thêm thiết bị vào mã của mình bằng console.time()
và console.timeEnd()
. Các chức năng này, được hỗ trợ trong Firefox11 +, Chrome2 + và IE11 +, báo cáo về bộ hẹn giờ mà bạn bắt đầu / dừng qua console.time()
. time()
lấy tên bộ định thời do người dùng định nghĩa làm đối số và timeEnd()
sau đó báo cáo về thời gian thực hiện kể từ khi bộ định thời bắt đầu:
function a() {
console.time("mytimer");
... do stuff ...
var dur = console.timeEnd("myTimer"); // NOTE: dur only works in FF
}
Lưu ý rằng chỉ Firefox trả về thời gian đã trôi qua trong timeEnd()
cuộc gọi. Các trình duyệt khác chỉ cần báo cáo kết quả cho bảng điều khiển dành cho nhà phát triển: giá trị trả về của timeEnd()
không xác định.
Nếu bạn muốn có được thời gian thực hiện chức năng trong tự nhiên , bạn sẽ phải sử dụng mã của mình. Bạn có một vài lựa chọn. Bạn chỉ có thể lưu thời gian bắt đầu và kết thúc bằng cách truy vấn new Date().getTime()
:
function a() {
var start = new Date().getTime();
... do stuff ...
var end = new Date().getTime();
var dur = end - start;
}
Tuy nhiên, Date
đối tượng chỉ có độ phân giải mili giây và sẽ bị ảnh hưởng bởi bất kỳ thay đổi đồng hồ hệ thống nào của HĐH. Trong các trình duyệt hiện đại, có một lựa chọn tốt hơn.
Tùy chọn tốt hơn là sử dụng Thời gian phân giải cao , aka window.performance.now()
. now()
tốt hơn truyền thống Date.getTime()
theo hai cách quan trọng:
now()
là gấp đôi với độ phân giải dưới giây, đại diện cho số mili giây kể từ khi bắt đầu điều hướng của trang. Nó trả về số lượng micro giây trong phân số (ví dụ: giá trị 1000.123 là 1 giây và 123 micro giây).
now()
đang tăng đơn điệu. Điều này rất quan trọng vì Date.getTime()
có thể có thể nhảy về phía trước hoặc thậm chí lùi lại trong các cuộc gọi tiếp theo. Đáng chú ý, nếu thời gian hệ thống của HĐH được cập nhật (ví dụ: đồng bộ hóa đồng hồ nguyên tử), Date.getTime()
cũng được cập nhật. now()
được đảm bảo luôn luôn tăng đơn điệu, do đó nó không bị ảnh hưởng bởi thời gian hệ thống của HĐH - nó sẽ luôn luôn là đồng hồ treo tường (giả sử đồng hồ treo tường của bạn không phải là nguyên tử ...).
now()
có thể được sử dụng ở hầu hết mọi nơi new Date().getTime()
, + new Date
andt Date.now()
. Ngoại lệ là Date
và now()
thời gian không trộn lẫn, Date
dựa trên unix-epoch (số mili giây kể từ năm 1970), trong khi đó now()
là số mili giây kể từ khi điều hướng trang của bạn bắt đầu (vì vậy nó sẽ nhỏ hơn nhiều Date
).
Đây là một ví dụ về cách sử dụng now()
:
function a() {
var start = window.performance.now();
... do stuff ...
var end = window.performance.now();
var dur = end - start;
}
now()
được hỗ trợ trong Chrome ổn định, Firefox 15+ và IE10. Ngoài ra còn có một số polyfill có sẵn.
Một tùy chọn khác để đo thời gian thực hiện trong tự nhiên là UserTiming . UserTiming hoạt động tương tự console.time()
và console.timeEnd()
, nhưng nó sử dụng cùng Dấu thời gian Độ phân giải cao now()
sử dụng (để bạn có được đồng hồ tăng thêm một phần nghìn giây) và lưu dấu thời gian và thời lượng cho PerformanceTimeline .
UserTiming có các khái niệm về nhãn hiệu (dấu thời gian) và các biện pháp (thời lượng). Bạn có thể xác định bao nhiêu tùy ý và chúng được hiển thị trên PerformanceTimeline .
Để lưu dấu thời gian, bạn gọi mark(startMarkName)
. Để có được thời lượng kể từ lần đánh dấu đầu tiên của bạn, bạn chỉ cần gọi measure(measurename, startMarkname)
. Thời lượng sau đó được lưu trong PerformanceTimeline cùng với điểm của bạn.
function a() {
window.performance.mark("start");
... do stuff ...
window.performance.measure("myfunctionduration", "start");
}
// duration is window.performance.getEntriesByName("myfunctionduration", "measure")[0];
UserTiming khả dụng trong IE10 + và Chrome25 +. Ngoài ra còn có một polyfill có sẵn (mà tôi đã viết).