Hiệu quả của việc sử dụng Javascript theo kiểu chức năng và "thủ tục"

Question

Có ai đã thực hiện đo điểm chuẩn hay có thể liên kết đến một bài viết về chủ đề này không? Đặc biệt quan tâm đến kết quả của IE, vì hiệu năng JS thường không phải là vấn đề trong các trình duyệt khác.

Tôi muốn biết làm thế nào chậm hơn nó là để làm một cái gì đó như:

var numbers = [1, 2, 3, 4, 5, 6, 7]; 
var results = numbers.map(function() { 
    // do some stuff 
}); 

thay vì tiêu biểu:

var numbers = [1, 2, 3, 4, 5, 6, 7]; 
var results = []; 

for (var i = 0; i < numbers.length; i++) { 
    var number = numbers[i]; 
    var result; 
    // do some stuff 
    results.push(result); 
} 

Tôi rõ ràng là thích phong cách chức năng, nhưng tôi giả định thêm trên không kêu gọi một chức năng bổ sung cho mỗi mục có thể làm chậm những thứ xuống với bộ sưu tập lớn.

Cảm ơn!

Answer 1

Không có nội dung thiếu bằng chứng về chủ đề này, tôi đã viết một tiêu chuẩn ngắn. Nó hoàn hảo nhưng tôi nghĩ nó trả lời câu hỏi.

Tôi đã chạy nó trong IE 8/win, và trong khi phương thức chức năng chậm hơn, nó sẽ không bao giờ là nút cổ chai trong mã thực. (Trừ khi bạn đang làm những thứ mà bạn không nên làm trong các khách hàng anyway)

Vì vậy, tôi sẽ sử dụng phương pháp sạch hơn bất cứ khi nào tôi phải chọn (yay)

(Best of 5)
phương pháp chức năng: 453ms
Cũ học cách tiếp cận: 156ms

Array.prototype.map = function(fun) { 
    var len = this.length >>> 0; 
    if (typeof fun != "function") 
    throw new TypeError(); 

    var res = new Array(len); 
    var thisp = arguments[1]; 
    for (var i = 0; i < len; i++) { 
    if (i in this) 
     res[i] = fun.call(thisp, this[i], i, this); 
    } 

    return res; 
}; 

/** 
* 
* 
*/ 

// Initialize test array 
var numbers = []; 
for (var i = 0; i < 100000; i++) numbers.push(i); 

// Benchmark! 
var start = +new Date(); 

// Test 1 
var results1 = numbers.map(function(num) { 
    return num + num; 
}); 

alert('1. Functional map:' + (start - new Date())); 
start = +new Date(); 

// Test 2 
var results2 = []; 
for (var j = 0, l = numbers.length; j < l; j++) { 
    var num = numbers[j]; 
    results2.push(num + num) 
} 

alert('1. Old school approach' + (start - new Date())); 
start = +new Date(); 

Answer 2

Cái này thực sự thú vị:

http://www.slideshare.net/madrobby/extreme-javascript-performance

Tuy nhiên, trong công cụ JS ECMAScript5-ready với mẹ đẻ Array.map(), mọi thứ có thể thay đổi đáng kể.

Answer 3

này rất thú vị quá:

http://documentcloud.github.com/underscore/test/test.html

Kết quả khác nhau từ trình duyệt đến trình duyệt, bởi vì dấu gạch dưới cố gắng sử dụng tùy chọn gốc nếu có.