Lọc so với hiệu suất JavaScript của vòng lặp

Tôi đọc bài viết dưới đây gợi ý sử dụng các hàm mảng có sẵn trong JavaScript. Tôi luôn nghe nói rằng những phương pháp đó chậm hơn đáng kể so với vòng lặp for tích hợp, nhưng tôi chưa bao giờ thực sự tự mình đo lường nó

Đơn giản hóa JavaScript của bạn — Sử dụng. bản đồ(),. giảm () và. lọc()

Nếu bạn chưa nghe nói về. bản đồ(),. giảm () và. filter() trong JavaScript, bạn có thể muốn học cách sử dụng nó

trung bình. com

Vì vậy, tôi nghĩ rằng bây giờ là một thời điểm tốt như bất kỳ. Vì vậy, chúng ta hãy chạy một số bài kiểm tra

đường cơ sở

Máy tôi đang chạy mã là MacBook Pro có 2. Bộ xử lý Intel Core i7 Quad-Core 5GHz và bộ nhớ DDR3 16GB 1600 MHz. Phiên bản nút của tôi là 12. 14. 0

Mặc dù độ dài mảng tối đa là 2³², nhưng máy tính của tôi thực sự không thể tạo mảng có độ dài đó mà không gặp lỗi JavaScript heap out of memory. Dựa trên thử nghiệm cục bộ, mảng chiều dài 50 triệu là cao nhất tôi có thể đi

Tiêu chuẩn

Các chức năng này sẽ được đánh giá theo hai cách

  • mức sử dụng bộ nhớ — được đo bằng cách sử dụng process.memoryUsage().heapUsed
  • tốc độ thực hiện — được đo bằng đối tượng Date và toán cấp một

Kịch bản

Tập lệnh tạo 500 mảng với gia số 100K, đo thời gian thực thi của mỗi mã và xuất ra tệp CSV

Các thí sinh là ai?

  • filter
  • for
  • forEach
  • for / in
  • ________số 8_______
  • map

Bây giờ, hãy xem mỗi chức năng thực hiện như thế nào. Ai vui mừng về kết quả?

Ảnh của Camylla Battani trên Bapt. Cô ấy chắc chắn là

Lọc

Tốc độ tăng tuyến tính

Biểu đồ bộ nhớ cho thấy khoảng cách giữa mỗi đỉnh rút ngắn đáng kể sau 33M chiều dài. (Điều này rất thú vị, nhưng tôi vẫn chưa hiểu tại sao điều này lại xảy ra. )

Tốc độ duy trì dưới 20ms cho đến 33. 9M. Sau đó, nó nhảy lên tới 510ms và tăng dần lên 782ms ở 50M

Bộ nhớ cho thấy một mô hình tương tự, với các đỉnh được siết chặt cũng vào khoảng 33M

Cho mỗi

Tốc độ tăng tuyến tính

Trí nhớ tuân theo một khuôn mẫu tương tự (bạn sẽ nghe tôi nói điều này một vài lần nữa)

Tại

Tốc độ tăng tuyến tính nhưng ồn hơn so với các chức năng khác

Trí nhớ không theo khuôn mẫu. Thực sự có sự sụt giảm trong việc sử dụng bộ nhớ vào khoảng 43M

cho của

Tốc độ tuân theo một mô hình tương tự như vòng lặp for. Sự tăng đột biến xảy ra ở 33. 6M. Trước khi tăng đột biến, tốc độ duy trì dưới 50 mili giây

Bộ nhớ theo mô hình bình thường

Bản đồ

Tốc độ tăng tuyến tính với mức tăng đột biến (bạn đoán nó. ) 33. 4M

Bộ nhớ theo các mẫu trước đó như trước

Kết quả tốc độ

Hãy so sánh tốc độ cho từng chức năng

Cho đến nay, JavaScript heap out of memory1 và map thực hiện tệ hơn. Hãy loại bỏ cả hai cái đó để có cái nhìn rõ ràng hơn về bốn cái còn lại

for là nhanh nhất cho đến khi chúng ta đạt khoảng 33. Chiều dài 5M, nhưng trở thành người chậm nhất trong quá khứ, trong đó JavaScript heap out of memory4 trở thành người chiến thắng rõ ràng về tốc độ

Cả forJavaScript heap out of memory4 đều đạt một điểm ở đó tốc độ tăng mạnh, trong đó forEachfilter tăng tuyến tính trong toàn bộ bài kiểm tra

Kết quả bộ nhớ

Mặc dù biểu đồ rất nhiễu, nhưng nhìn chung chúng ta có thể thấy rằng for, JavaScript heap out of memory4 và forEach sử dụng ít bộ nhớ hơn so với phần còn lại

Lời phán quyết

Dựa trên dữ liệu tốc độ và bộ nhớ, vòng lặp for xuất hiện hôm nay với tư cách là người chiến thắng. Đây là cách nhanh nhất cho hầu hết các trường hợp sử dụng phổ biến (e. g. mảng có chiều dài dưới 33 triệu) và hiệu quả bộ nhớ hơn so với phần còn lại

Tất nhiên, để sử dụng lập trình hàng ngày, bất kỳ phương pháp nào trong số này sẽ đủ nhanh. Dưới 1 triệu, tất cả trừ mapprocess.memoryUsage().heapUsed4 có thể kết thúc trong khoảng 10 mili giây

Có một vài câu hỏi mở mà tôi hy vọng sẽ đi sâu vào một bài viết trong tương lai. (tất nhiên, tôi hoan nghênh mọi thông tin chi tiết)

  1. Tại sao các vòng lặp forprocess.memoryUsage().heapUsed6 lại chạm đến một điểm quan trọng khiến tốc độ giảm mạnh?
  2. Tại sao biểu đồ trí nhớ lại thay đổi theo _______2_______7 tại cùng điểm tới hạn như #1?
  3. Điều gì làm cho map chậm hơn đáng kể so với vòng lặp for? . (Bài kiểm tra khác cho lần sau. )
  4. Tại sao process.memoryUsage().heapUsed4 hoạt động kém hơn nhiều so với process.memoryUsage().heapUsed6?

Cảm ơn vì đã đọc. Đây là một thử nghiệm cực kỳ thú vị đã đẩy hệ thống làm mát máy tính của tôi đến giới hạn (nó thực sự rất nóng). Hãy thả cho tôi một bình luận

Cái nào nhanh hơn vòng lặp for trong JavaScript?

vòng lặp forEach . Thời gian thực hiện của forEach bị ảnh hưởng đáng kể bởi những gì xảy ra bên trong mỗi lần lặp. Nó nhanh và được thiết kế cho mã chức năng.

Bộ lọc bản đồ có nhanh hơn vòng lặp không?

Trong những trường hợp cụ thể này, nếu bạn cần lợi ích của khoảng nửa giây hiệu suất trên 10.000.000 phần tử trong Chrome thì tốt hơn hết bạn nên sử dụng vòng lặp for ngay bây giờ. Tuy nhiên, trên các nền tảng/môi trường khác hoặc các trường hợp khác, bản đồ vẫn có thể nhanh hơn và trên thực tế, nó có thể nhanh hơn trong tương lai

Vòng lặp for có chậm trong JavaScript không?

Kết luận. Các vòng lặp for , while và do-while đều có các đặc điểm hoạt động tương tự nhau và vì vậy không có loại vòng lặp nào nhanh hơn hoặc chậm hơn đáng kể so với các loại vòng lặp khác .

Giảm có hiệu quả hơn vòng lặp for không?

Sử dụng các vòng lặp for như một đầu cắm của tất cả các giao dịch có xu hướng che khuất hoạt động thực tế mà vòng lặp thực hiện. Vì vậy, từ quan điểm lập trình, reduce có mục đích hùng hồn và rõ ràng hơn