Tại sao bộ chọn chẳng hạn như [title = "home"] chậm hơn so với sử dụng lớp?

Question

Tôi đã đọc rất nhiều bài viết về hiệu suất CSS, chẳng hạn như;

• Efficiently Rendering CSS
• Writing efficient CSS selectors
• Writing efficient CSS

tôi nhận được lý do tại sao selectors như thế này là xấu

#social a { 
} 

Là trình duyệt sẽ đọc một đầu tiên, sau đó bị buộc phải lặp qua tất cả các <a> thẻ trong trang.

Nhưng tại sao bộ chọn chẳng hạn như a [title = "home"] chậm hơn sử dụng lớp?

Tôi giả định rằng trình duyệt tạo một số loại chỉ mục để có thể tìm ra yếu tố nào có một lớp nhất định (đúng?).

Nhưng không nên trình duyệt cũng đã lập chỉ mục những yếu tố nào có thuộc tính nhất định? (chẳng hạn như tiêu đề)?

Câu hỏi của tôi là; tại sao CSS/phần tử tra cứu chậm hơn khi sử dụng các bộ chọn như a [title = "home"] so với sử dụng một lớp ? Trình duyệt sẽ hành động như thế nào để kết quả chậm hơn nhiều?

Answer 1

Trình tối ưu hóa trình duyệt tối ưu hóa các trường hợp phổ biến nhất. Vì các lớp được sử dụng rất thường xuyên để phù hợp với các kiểu, chúng phải thực hiện điều này một cách hiệu quả nhất có thể. Khi họ tải trong CSS, họ lập chỉ mục các lớp để làm điều này có thể.

Vì bộ chọn ngẫu nhiên như title="home" không được sử dụng thường xuyên, chúng có thể lấy đi bằng cách thực hiện chúng bằng cách sử dụng tìm kiếm đơn giản hơn. Nó sẽ không có tác động nhiều đến hiệu suất, bởi vì nó hiếm khi được sử dụng.

Các lớp học cũng yêu cầu xử lý đặc biệt trong trình duyệt, bởi vì một phần tử có thể có nhiều lớp, ví dụ: class="foo bar baz". Khi phân tích cú pháp tài liệu, trình duyệt cần chia nhỏ tài liệu này để nó có thể khớp với bất kỳ trình duyệt nào trong số đó đối với bộ chọn CSS.

Answer 2

Benchmark

Kết luận

Trong selector thuộc tính hầu hết trường hợp' với thuộc tính không rõ, ví dụ [a = "b"] 'và' công cụ chọn thuộc tính có thuộc tính đã biết, ví dụ: [title = "a"] 'xuất hiện trong danh mục' 3 tệ nhất '. Thật an toàn khi nói rằng bạn nên tránh những bộ chọn đó.