Hiệu suất Bộ chọn CSS, Phân tích cú pháp DOM

Question

Câu hỏi của tôi liên quan đến việc phân tích cú pháp DOM được kích hoạt, tôi muốn biết tại sao sử dụng bộ chọn ID CSS nhanh hơn bộ chọn Lớp. Khi nào cây DOM phải được phân tích một lần nữa, và những gì thủ đoạn và cải tiến hiệu suất tôi nên sử dụng ... cũng có, ai đó nói với tôi rằng nếu tôi làm điều gì đó như

var $p = $("p"); 
$p.css("color", "blue"); 
$p.text("Text changed!"); 

thay vì

$("p").css("color", "blue"); 
$("p").text("Text changed!"); 

cải thiện hiệu suất, điều này có đúng cho tất cả các trình duyệt không? Ngoài ra, làm cách nào để biết liệu cây DOM của tôi đã được phân tích lại chưa?

Answer 1

Vâng, bộ chọn #id nhanh hơn bộ chọn lớp vì: (a) chỉ có thể có một phần tử có giá trị id đã cho; (b) trình duyệt có thể giữ bản đồ id -> element, do đó, công cụ chọn #id có thể hoạt động nhanh như một lần tra cứu bản đồ.

Tiếp theo, tùy chọn đầu tiên gợi ý ở trên chắc chắn là nhanh hơn, vì nó tránh được tra cứu thứ hai, do đó làm giảm tổng thời gian tra cứu chọn dựa trên bằng hệ số 2.

cuối, bạn có thể sử dụng Công cụ nhà phát triển Chrome Selector Profiler (trong Profiles panel) để cấu hình thời gian cần một trình duyệt xử lý selectors trong trang của bạn (trận đấu + áp dụng phong cách với các yếu tố phù hợp.)

Answer 2

tôi khuyến khích bạn thực hiện các bài kiểm tra hiệu suất của riêng bạn bất cứ khi nào bạn có một nghi ngờ. Bạn có thể biết thêm thông tin về cách thực hiện điều đó tại đây: How do you performance test JavaScript code?. Khi bạn đã thử nghiệm hiệu suất một mình, bạn sẽ không bao giờ quên kết quả.

Cụ thể, việc thực hiện hàm $() trên bộ chọn jquery đã cho phải có các nút DOM phù hợp. Tôi không chắc chắn chính xác cách thức hoạt động này nhưng tôi đoán đó là sự kết hợp của document.getElementById(), document.getElementsByTagName() và những người khác. Điều này có một chi phí xử lý, không có vấn đề làm thế nào nhỏ nó có thể được, nếu bạn gọi nó chỉ một lần và sau đó tái sử dụng nó, bạn tiết kiệm một số thời gian xử lý.

Answer 3

Bộ chọn ID nhanh hơn bộ chọn lớp vì chỉ có một phần tử có ID nhưng nhiều phần tử có thể chia sẻ một lớp và chúng phải được tìm kiếm.

Đoạn code dưới đây là không cần thiết phân tích cú pháp DOM hai lần, nên dĩ nhiên nó sẽ chậm hơn:

$("p").css("color", "blue"); 
$("p").text("Text changed!");