Dùng jsperf kiểm tra tốc độ của JavaScript, JQuery

Tại sao tôi cần?
Các ứng web phát triển dựa trên nền tảng của JavaScript và các thư viện, framework xung quanh ngôn ngữ này ngày càng phổ biến. Những thư viện, framework như JQuery, Prototype, AngularJS, Knockout… giúp cho việc phát triển ứng dụng web ngày càng dễ dàng hơn.

Bên cạnh những mặt tích cực đó thì cũng ngày càng nhiều ứng dụng khiến cho trình duyệt chúng ta bị treo ngày càng nhiều ^^. Vì vậy việc kiểm tra performance các đoạn mã mà chúng ta viết là một việc hết sức cần thiết cần thiết

Giả sử bây bây giờ chúng ta có một đóng html với 6 cái div có class là “kiem_tra_toc_do_jquery” như bên dưới. Câu hỏi đặt ra là bây giờ dùng eq(5) nhanh hơn hay là dùng phương thức last() nhanh hơn. Dĩ nhiên trong các dự án thực tế thì chắc hiếm khi mà có vài div có cùng class nhỉ ^^

<divclass="kiem_tra_toc_do_jquery"> Đây là div thứ 1</div>
<divclass="kiem_tra_toc_do_jquery"> Đây là div thứ 2</div>
<divclass="kiem_tra_toc_do_jquery"> Đây là div thứ 3</div>
<divclass="kiem_tra_toc_do_jquery"> Đây là div thứ 4</div>
<divclass="kiem_tra_toc_do_jquery"> Đây là div thư 5</div>
<divclass="kiem_tra_toc_do_jquery"> Đây là div thứ 6</div>

Dùng gì bây giờ
jsPerf.com có thể coi như là công cụ giúp cho chúng ta kiểm tra tốc độ đoạn mã mà chúng ta viết. Bây giờ chúng ta cùng kiểm tra tốc độ cách lấy div cuối cùng là phương thức eq() và phương thứ last()

Chúng ta có đoạn mã lấy thẻ div cuối bằng phương thức eq(5) trong JQuery như sau:

$('.kiem_tra_toc_do_jquery').eq(5).css('border','1px solid red')

Và chúng ta có đoạn mã lấy thẻ div cuối bằng phương thức last() như sau:

$('.kiem_tra_toc_do_jquery').last().css('border','1px solid red')

Kết quả dùng công cụ jsperf để kiểm tra tốc độ của 2 đoạn mã như là hình bên dưới:

Như vậy dựa trên bảng kết quả thì chúng ta thấy rõ rằng dùng eq() để lấy ra thẻ div cuối cùng nhanh hơn khoảng 1% dùng phương thức last(). Ở đây chúng ta chỉ mới dùng số lượng nhỏ 6 thẻ div nên con số không đáng kể nhưng nếu trong các dự án thực tế có hơn hàng trăm thậm chí hàng ngàn thẻ div thì vấn đề sẽ như thế nào.

Ok! Chém gió đến đây đủ rồi. Hy vọng công cụ này giúp ích cho bạn cải thiện các đoạn mã. Code vui ^^