Hiệu suất sử dụng JS querySelector

Question

Khi sử dụng JavaScript trong trình duyệt web là có bất kỳ sự khác biệt về hiệu năng giữa như sau:

hiện getElementById

document.getElementById("elem"); 

Query Selector sử dụng #ID

document.querySelector("#elem"); 

Query Selector sử dụng [id = elem]

document.querySelector("[id=elem]"); 

Tôi giả định giá trị đầu tiên sẽ nhanh nhất (chỉ phải tra cứu các phần tử có ID). Ngoài ra, cuối cùng trông giống như thực hành xấu. Tôi thích thứ hai như sử dụng querySelector cho tất cả mọi thứ làm cho mã dễ đọc.

Mọi đề xuất?

Answer 1

Thứ nhất,

document.querySelector("#elem"); 

Có một lợi thế trong thực tế là, không giống như document.getElementId, nó có thể trở lại lớp học. Tuy nhiên, tính hữu ích của điều này bị giảm đi rất nhiều bởi thực tế là nó chỉ trả về đối tượng đầu tiên với tên lớp đó, vì vậy bạn cũng có thể sử dụng id nếu bạn không tìm kiếm đối tượng đầu tiên với tên lớp đó. nếu bạn sử dụng,

document.querySelectorAll 

Tuy nhiên, tôi tin rằng (Tôi có thể sai), nó sẽ trả về tất cả các mục có classname đó như là một mảng, nơi querySelector thường là tương đương với querySelectorAll [0]. Một lợi thế nữa, đó là bạn có thể chạy các truy vấn css3 thông qua nó, điều này có thể khá hữu ích.

Thứ hai,

document.getElementById("elem"); 

Có một lợi thế rất tốt trên querySelector theo nghĩa là nó gần như là 5 lần nhanh hơn, vì vậy nếu bạn đang ngồi đó với vài ngàn dòng mã và bạn muốn tối ưu hóa mã cho biết, sau đó getElementById là con đường để đi.

Cuối cùng,

document.querySelector("[id=elem]"); 

tôi, cá nhân tôi, không thấy nhu cầu sử dụng này trong mọi tình huống. Nếu bạn cần một querySelector, tại sao không chỉ sử dụng một #? Điều này là chính xác tương đương với ví dụ đầu tiên của querySelector của bạn, tuy nhiên nó có rất nhiều charaters vô dụng.

Chỉnh sửa: Chỉ cần rõ ràng, tóm lại, bạn có thể nên sử dụng document.getElementById tốt hơn.

Answer 2

You can test it yourself. getElementById là một phương pháp nhanh nhất

Answer 3

có bất kỳ khác biệt hiệu suất

Có lẽ, vì chúng là các chức năng khác nhau. querySelector ít nhất là cần phải phân tích cú pháp bộ chọn trước khi phát hiện rằng nó bằng getElementById. Và tôi nghi ngờ tối ưu hóa này diễn ra đối với bộ chọn thuộc tính, không ai sử dụng nó. Vì vậy, tôi chia sẻ các giả định của bạn; và tests confirm them (nhờ @Silver_Clash).

Cá nhân tôi không thích cái thứ hai, vì nó mơ hồ và khủng khiếp hơn để sử dụng với các giá trị id động. Sử dụng rõ ràng getElementById chỉ ngắn gọn hơn.