Quy tắc rất không hiệu quả trong css

Question

Tôi đã chạy thử nghiệm tốc độ trên Google và tôi có một số điểm tốt và điểm kém cho CSS của mình. Điểm kém là do CSS không hiệu quả. Đó là gì? Và làm thế nào tôi có thể khắc phục nó?

Very inefficient rules (good to fix on any page): 
#menu ul ul li:first-child a:after Tag key with 4 descendant selectors 
#menu ul ul li:first-child a:hover:after Tag key with 4 descendant selectors 

Answer 1

Trình duyệt phân tích CSS-Bộ chọn từ phải sang trái. Vì vậy, CSS được phân tích cú pháp nhanh hơn, nếu bạn có ít bộ chọn con cháu hơn.

selectors Hậu duệ là không hiệu quả bởi vì, đối với mỗi yếu tố đó phù hợp với chìa khóa, trình duyệt cũng phải đi qua lên cây DOM, đánh giá mọi phần tử tổ tiên cho đến khi nó tìm thấy một trận đấu hay đạt phần tử gốc. Khóa ít cụ thể hơn, số lượng các nút càng lớn cần được đánh giá.

Use efficient CSS selectors

---

liên quan:

Optimize css vs Google page speed is messing with me

Why do browsers match CSS selectors from right to left?