Làm thế nào để bạn thực hiện kiểm tra mã JavaScript?

Chu kỳ CPU, Sử dụng bộ nhớ, Thời gian thực hiện, v.v.?

Đã thêm: Có một cách định lượng về hiệu suất thử nghiệm trong JavaScript ngoài nhận thức về việc mã chạy nhanh như thế nào?

Profiler chắc chắn là một cách tốt để có được số, nhưng theo kinh nghiệm của tôi, hiệu suất cảm nhận là tất cả những gì quan trọng đối với người dùng / khách hàng. Ví dụ, chúng tôi đã có một dự án với một hiệp ước Ext mở rộng để hiển thị một số dữ liệu và sau đó một vài lưới Ext được lồng vào nhau. Mọi thứ thực sự được kết xuất khá nhanh, không có thao tác nào mất nhiều thời gian, chỉ có rất nhiều thông tin được hiển thị cùng một lúc, vì vậy nó gây cảm giác chậm cho người dùng.

Chúng tôi đã 'sửa' điều này, không phải bằng cách chuyển sang một thành phần nhanh hơn hoặc tối ưu hóa một số phương thức, mà bằng cách hiển thị dữ liệu trước, sau đó hiển thị các lưới với setTimeout. Vì vậy, thông tin xuất hiện đầu tiên, sau đó các lưới sẽ xuất hiện sau đó một giây. Nhìn chung, phải mất nhiều thời gian xử lý hơn để làm theo cách đó, nhưng với người dùng, hiệu suất nhận thức đã được cải thiện.

Những ngày này, các hồ sơ Chrome và các công cụ khác là phổ biến sẵn và dễ dàng để sử dụng, như là console.time(), console.profile()và performance.now(). Chrome cũng cung cấp cho bạn chế độ xem dòng thời gian có thể cho bạn biết điều gì đang giết chết tốc độ khung hình của bạn, nơi người dùng có thể chờ đợi, v.v.

Tìm tài liệu cho tất cả các công cụ này thực sự dễ dàng, bạn không cần câu trả lời SO cho điều đó. 7 năm sau, tôi vẫn sẽ lặp lại lời khuyên về câu trả lời ban đầu của mình và chỉ ra rằng bạn có thể có mã chậm chạy mãi khi người dùng không chú ý đến nó và mã khá nhanh chạy ở nơi họ làm và họ sẽ phàn nàn về mã khá nhanh không đủ nhanh. Hoặc yêu cầu của bạn đối với API máy chủ của bạn mất 220ms. Hoặc một cái gì đó khác như thế. Vấn đề vẫn là nếu bạn lấy một hồ sơ ra và tìm kiếm công việc để làm, bạn sẽ tìm thấy nó, nhưng nó có thể không phải là công việc mà người dùng của bạn cần.

Tôi đồng ý rằng hiệu suất nhận thức là thực sự quan trọng. Nhưng đôi khi tôi chỉ muốn tìm ra phương pháp nào để làm một cái gì đó nhanh hơn. Đôi khi sự khác biệt là LỚN và đáng để biết.

Bạn chỉ có thể sử dụng bộ định thời javascript. Nhưng tôi thường có được kết quả nhiều nhất quán hơn bằng cách sử dụng Chrome có nguồn gốc (bây giờ cũng trong Firefox và Safari) phương pháp devTool console.time()&console.timeEnd()

Ví dụ về cách tôi sử dụng nó:

var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
    functionOne();
};
console.timeEnd('Function #1')

console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
    functionTwo();
};
console.timeEnd('Function #2')

Cập nhật (4/4/2016):

Chrome canary gần đây đã thêm Cấu hình mức dòng cho tab nguồn công cụ dev cho phép bạn xem chính xác mỗi dòng mất bao lâu để thực thi!

Chúng ta luôn có thể đo thời gian được thực hiện bởi bất kỳ chức năng nào bởi đối tượng ngày đơn giản .

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;

Hãy thử jsPerf . Đây là một công cụ hiệu suất javascript trực tuyến để đo điểm chuẩn và so sánh các đoạn mã. Tôi sử dụng nó mọi lúc.

Hầu hết các trình duyệt hiện đang thực hiện thời gian độ phân giải cao trong performance.now(). Nó vượt trội hơn so với new Date()thử nghiệm hiệu năng vì nó hoạt động độc lập với đồng hồ hệ thống.

Sử dụng

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

Người giới thiệu

• https://developer.mozilla.org/en-US/docs/Web/API/Performance.now ()
• http://www.w3.org/TR/hr-time/#dom-performance-now

JSLitmus là một công cụ gọn nhẹ để tạo các bài kiểm tra điểm chuẩn JavaScript đặc biệt

Hãy xem xét hiệu suất giữa function expressionvà function constructor:

<script src="JSLitmus.js"></script>
<script>

JSLitmus.test("new Function ... ", function() { 
    return new Function("for(var i=0; i<100; i++) {}"); 
});

JSLitmus.test("function() ...", function() { 
       return (function() { for(var i=0; i<100; i++) {}  });
});

</script>

Những gì tôi đã làm ở trên là tạo ra function expressionvà function constructorthực hiện cùng một hoạt động. Kết quả là như sau:

Kết quả thực hiện FireFox

Kết quả hiệu suất IE

Một số người đang đề xuất các trình cắm và / hoặc trình duyệt cụ thể. Tôi sẽ không vì chúng chỉ thực sự hữu ích cho một nền tảng đó; bản chạy thử trên Firefox sẽ không dịch chính xác sang IE7. Xem xét 99.999999% các trang web có nhiều trình duyệt truy cập chúng, bạn cần kiểm tra hiệu suất trên tất cả các nền tảng phổ biến.

Đề nghị của tôi sẽ là giữ điều này trong JS. Tạo một trang điểm chuẩn với tất cả bài kiểm tra JS của bạn và thời gian thực hiện. Bạn thậm chí có thể yêu cầu AJAX gửi lại kết quả cho bạn để giữ cho nó hoàn toàn tự động.

Sau đó chỉ cần rửa và lặp lại trên các nền tảng khác nhau.

Tôi có một công cụ nhỏ nơi tôi có thể nhanh chóng chạy các trường hợp thử nghiệm nhỏ trong trình duyệt và ngay lập tức nhận được kết quả:

Kiểm tra tốc độ JavaScript

Bạn có thể chơi với mã và tìm ra kỹ thuật nào tốt hơn trong trình duyệt được thử nghiệm.

Tôi nghĩ rằng kiểm tra hiệu suất (thời gian) JavaScript là khá đủ. Tôi tìm thấy một bài viết rất tiện dụng về thử nghiệm hiệu năng JavaScript ở đây .

Đây là một chức năng đơn giản hiển thị thời gian thực hiện của một chức năng được thông qua:

var perf = function(testName, fn) {
    var startTime = new Date().getTime();
    fn();
    var endTime = new Date().getTime();
    console.log(testName + ": " + (endTime - startTime) + "ms");
}

Bạn có thể sử dụng cái này: http://getfireorms.com/js.html . Nó có một hồ sơ cho JavaScript.

Câu trả lời nhanh

Trên jQuery (cụ thể hơn là trên Sizzle), chúng tôi sử dụng điều này (kiểm tra tổng thể và mở speed / index.html trên trình duyệt của bạn), lần lượt sử dụng điểm chuẩn.js . Điều này được sử dụng để kiểm tra hiệu suất thư viện.

Câu trả lời dài

Nếu người đọc không biết sự khác biệt giữa điểm chuẩn, khối lượng công việc và trình biên dịch, trước tiên hãy đọc một số nền tảng kiểm tra hiệu suất trên phần "readme 1st" của spec.org . Đây là để thử nghiệm hệ thống, nhưng hiểu được nền tảng này cũng sẽ giúp thử nghiệm hoàn hảo cho JS. Một số điểm nổi bật:

Điểm chuẩn là gì?

Điểm chuẩn là "tiêu chuẩn đo lường hoặc đánh giá" (Từ điển II của Webster). Một điểm chuẩn máy tính thường là một chương trình máy tính thực hiện một tập hợp các thao tác được xác định nghiêm ngặt - một khối lượng công việc - và trả về một số dạng kết quả - một số liệu - mô tả cách thức máy tính được thử nghiệm thực hiện. Số liệu đo điểm chuẩn của máy tính thường đo tốc độ: khối lượng công việc đã hoàn thành nhanh như thế nào; hoặc thông lượng: có bao nhiêu đơn vị khối lượng công việc trên mỗi đơn vị thời gian đã được hoàn thành. Chạy cùng một chuẩn máy tính trên nhiều máy tính cho phép thực hiện so sánh.

Tôi có nên điểm chuẩn cho ứng dụng của riêng mình?

Lý tưởng nhất, thử nghiệm so sánh tốt nhất cho các hệ thống sẽ là ứng dụng của riêng bạn với khối lượng công việc của riêng bạn. Thật không may, thường không thực tế khi có được một số lượng lớn các phép đo đáng tin cậy, có thể lặp lại và có thể so sánh cho các hệ thống khác nhau bằng cách sử dụng ứng dụng của riêng bạn với khối lượng công việc của riêng bạn. Các vấn đề có thể bao gồm tạo ra một trường hợp thử nghiệm tốt, mối quan tâm bảo mật, khó khăn trong việc đảm bảo các điều kiện tương đương, thời gian, tiền bạc hoặc các ràng buộc khác.

Nếu không phải là ứng dụng của riêng tôi thì sao?

Bạn có thể cân nhắc sử dụng điểm chuẩn được chuẩn hóa làm điểm tham chiếu. Lý tưởng nhất, một điểm chuẩn được chuẩn hóa sẽ có thể mang theo được và có thể đã được chạy trên các nền tảng mà bạn quan tâm. Tuy nhiên, trước khi xem xét kết quả, bạn cần chắc chắn rằng bạn hiểu mối tương quan giữa nhu cầu ứng dụng / máy tính của bạn và những gì điểm chuẩn đang đo. Các điểm chuẩn có giống với các loại ứng dụng bạn chạy không? Khối lượng công việc có đặc điểm tương tự? Dựa trên câu trả lời của bạn cho những câu hỏi này, bạn có thể bắt đầu xem điểm chuẩn có thể gần đúng với thực tế của bạn như thế nào.

Lưu ý: Một điểm chuẩn được tiêu chuẩn hóa có thể đóng vai trò là điểm tham chiếu. Tuy nhiên, khi bạn đang thực hiện lựa chọn nhà cung cấp hoặc sản phẩm, SPEC không cho rằng bất kỳ điểm chuẩn nào có thể thay thế điểm chuẩn cho ứng dụng thực tế của chính bạn.

Kiểm tra hiệu năng JS

Lý tưởng nhất, thử nghiệm hoàn hảo tốt nhất sẽ là sử dụng ứng dụng của riêng bạn với khối lượng công việc của riêng bạn chuyển đổi những gì bạn cần kiểm tra: các thư viện, máy móc khác nhau, v.v.

Nếu điều này là không khả thi (và thường thì không). Bước quan trọng đầu tiên: xác định khối lượng công việc của bạn. Nó sẽ phản ánh khối lượng công việc của ứng dụng của bạn. Trong buổi nói chuyện này , Vyacheslav Egorov nói về khối lượng công việc tồi tệ mà bạn nên tránh.

Sau đó, bạn có thể sử dụng các công cụ như điểm chuẩn.js để hỗ trợ bạn thu thập số liệu, thường là tốc độ hoặc thông lượng. Trên Sizzle, chúng tôi quan tâm đến việc so sánh các bản sửa lỗi hoặc thay đổi ảnh hưởng đến hiệu suất hệ thống của thư viện.

Nếu một cái gì đó đang thực hiện xấu, bước tiếp theo của bạn là tìm kiếm các nút thắt cổ chai.

Làm thế nào để tôi tìm thấy nút cổ chai? Hồ sơ

Cách tốt nhất để hồ sơ thực hiện javascript là gì?

Tôi thấy thời gian thực hiện là biện pháp tốt nhất.

Bạn có thể sử dụng console.profile trong fireorms

Tôi thường chỉ kiểm tra hiệu suất javascript, kịch bản chạy trong bao lâu. jQuery Lover đã đưa ra một liên kết bài viết tốt để kiểm tra hiệu suất mã javascript , nhưng bài viết chỉ cho thấy cách kiểm tra mã javascript của bạn chạy trong bao lâu. Tôi cũng khuyên bạn nên đọc bài viết có tên "5 mẹo để cải thiện mã jQuery của bạn trong khi làm việc với các tập dữ liệu khổng lồ".

Đây là một lớp có thể tái sử dụng cho hiệu suất thời gian. Ví dụ được bao gồm trong mã:

/*
     Help track time lapse - tells you the time difference between each "check()" and since the "start()"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message, 'START:', now - start, 'LAST:', now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output

UX Profiler tiếp cận vấn đề này từ góc độ người dùng. Nó nhóm tất cả các sự kiện trình duyệt, hoạt động mạng, v.v. do một số hành động của người dùng (nhấp chuột) và xem xét tất cả các khía cạnh như độ trễ, thời gian chờ, v.v.

Tôi đã tìm kiếm một cái gì đó tương tự nhưng tìm thấy điều này.

https://jsbench.me/

Nó cho phép so sánh giữa các bên và sau đó bạn cũng có thể chia sẻ kết quả.

Nguyên tắc vàng là KHÔNG theo bất kỳ trường hợp nào khóa trình duyệt người dùng của bạn. Sau đó, tôi thường xem xét thời gian thực hiện, tiếp theo là sử dụng bộ nhớ (trừ khi bạn đang làm điều gì đó điên rồ, trong trường hợp đó có thể là ưu tiên cao hơn).

Kiểm tra hiệu suất đã trở thành một từ thông dụng vào cuối nhưng điều đó không có nghĩa là kiểm tra hiệu suất không phải là một quá trình quan trọng trong QA hoặc ngay cả sau khi sản phẩm đã được xuất xưởng. Và trong khi tôi phát triển ứng dụng, tôi sử dụng nhiều công cụ khác nhau, một số trong số chúng được đề cập ở trên như chrome Profiler, tôi thường nhìn vào SaaS hoặc một thứ gì đó mở ra mà tôi có thể đi và quên nó đi cho đến khi tôi nhận được thông báo rằng có gì đó không ổn .

Có rất nhiều công cụ tuyệt vời sẽ giúp bạn theo dõi hiệu suất mà không cần phải nhảy qua các vòng chỉ để thiết lập một số cảnh báo cơ bản. Dưới đây là một vài điều mà tôi nghĩ là đáng để kiểm tra cho chính mình.

1. Sematext.com
2. Datadog.com
3. Thời gian hoạt động.com
4. Smartbear.com
5. Solarwinds.com

Để thử và vẽ một bức tranh rõ ràng hơn, đây là một hướng dẫn nhỏ về cách thiết lập giám sát cho một ứng dụng phản ứng.

Đây là một cách tốt để thu thập thông tin hiệu suất cho hoạt động cụ thể.

start = new Date().getTime(); 
for (var n = 0; n < maxCount; n++) {
/* perform the operation to be measured *//
}
elapsed = new Date().getTime() - start;
assert(true,"Measured time: " + elapsed);