document.getElementById vs jQuery cái nào nhanh hơn
TIL
497
White

Nhan Nguyen viết ngày 06/03/2017

Cái nào nhanh hơn vậy các bạn?

Đi phỏng vấn thấy một câu hỏi vui vui là hai API này cái nào query nhanh hơn. Mình nói là document.getElementById, interviewer thì nói là jQuery có cơ chế cache trong thư viện hay lắm nên lần thứ 2 query sẽ nhanh hơn. Mình nói là anh đã thử làm perf test chưa hay là dựa trên lý luận? Thế là interviewer đành phải đá sang vấn đề khác hehe. Chém gió về performance với mình mà chưa run thử performance test thì mình cãi lại cái là á khẩu ngay á. Vì mình chuyên gia làm mấy cái perf test mà hehe.

Nói xấu interviewer vậy đủ rồi (sếp có vô coi thì nhớ là em nói xấu sếp một cách ẩn danh nhé, có chết cũng ko nhận là em lên kipalog nói xấu sếp đâu). Nói dai nói dài bây giờ tới phần code.

var input = null;
for (var i = 0; i < 20; i++) {
  var input = document.createElement('input');
  input.id = 'test' + i;
  document.body.appendChild(input);
}

// jquery
var start = new Date();
for (var loop = 0; loop < 100000; loop++)
for (var i = 0; i < 20; i++) {
  $('#test' + i);
}
var stop = new Date();
console.log(stop - start);

// document.getElementById
var start = new Date();
for (var loop = 0; loop < 100000; loop++)
for (var i = 0; i < 20; i++) {
  document.getElementById('test' + i);
}
var stop = new Date();
console.log(stop - start);

Thật đáng tiếc cho anh sếp của mình, thực ra đây ko phải là lần đầu tiên sếp chém gió, nhưng là lần đầu tiên bị đưa lên kipalog. Kết quả benchmark trên máy mình core i7, 8GB RAM là document.getElementById nhanh hơn jQuery khá nhiều 174 / 831. Nhanh hơn khoảng 4.7 lần, con số này còn thay đổi theo số lần chạy test nữa, càng nhiều lần chạy thì khoảng cách càng lớn, về cơ bản thì sẽ nhanh hơn khoảng 5 lần.

Tóm cái váy lại là đừng nên chém gió về perf test mà chưa bao giờ làm run thử một cái test nào. Thứ 2 là low level API lúc nào cũng nhanh hơn high level API.

NhanNguyen11 06-03-2017

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Nhan Nguyen

5 bài viết.
26 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
38 25
Giới thiệu về framework HtmlJs Chào các bạn, sau 2 năm nghiên cứu, mình đã viết 1 framework JavaScript. Hôm nay mình xin chia sẻ mong đem lại lợi ...
Nhan Nguyen viết gần 2 năm trước
38 25
White
4 0
Build your own rendering engine We’re not going to reinvent the wheel. We’re going to do simple things that help you have deep understanding of ho...
Nhan Nguyen viết 1 năm trước
4 0
White
2 0
Hôm nay mình sẽ giới thiệu kiến trúc thiết kế web theo OOP, kiến trúc này mình đang dùng trong dự án ở trong công ty. Với kiến trúc này, bạn có thể...
Nhan Nguyen viết hơn 1 năm trước
2 0
Bài viết liên quan
White
18 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết hơn 1 năm trước
18 1
White
1 1
Chào mọi người, hôm nay mình viết một bài TIL nhỏ về cách lấy độ phân giải của màn hình hiện tại đang sử dụng. xdpyinfo | grep dimensions Kết quả...
namtx viết 7 tháng trước
1 1
White
8 0
Lấy fake path của file trong html input Ngữ cảnh: em cần làm một cái nút tải ảnh lên có preview. GIải pháp đầu: Dùng (Link) đọc file ảnh thành ba...
Hoàng Duy viết gần 2 năm trước
8 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
26 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!