5
Tôi biết rằng quy tắc ID nhanh hơn quy tắc lớp, nhanh hơn quy tắc thẻ, nhanh hơn quy tắc chung, như được ghi chú trên MDN. Câu hỏi của tôi liên quan đến hiệu suất CSS liên quan đến thừa kế. Ví dụ, điều nào sau đây hiệu quả hơn?Hiệu suất CSS liên quan đến thừa kế
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
h1 {
font-family: Georgia, serif;
font-size: 36px;
font-weight: 700;
}
hoặc
h1 {
font-family: Georgia, serif;
font-size: 36px;
font-weight: 700;
}
.article-text {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
Trong khi chỉ có một <body> thẻ trong DOM, có thể có hàng trăm p.article-text yếu tố. Vì chỉ có một thẻ <body>, điều đó có nghĩa là kiểu <body> hiệu quả hơn, mặc dù tôi muốn được tạo lại các yếu tố <h1>? Hoặc là hiệu quả hơn để tạo kiểu cho các phần tử .article-text, vì làm như vậy sẽ sử dụng một bộ chọn cụ thể hơn và tôi sẽ không cần phải lo lắng về việc tạo lại các phần tử <h1>?
Luôn tự hỏi điều này. Suy nghĩ?
Làm một điểm chuẩn và tìm hiểu? – cimmanon
Tôi đoán rằng "tầng" của CSS (kế thừa kiểu từ các phần tử gốc) có hiệu quả cao. Điều này không yêu cầu một bộ chọn nào cả. Sự hiểu biết của tôi là "cơ thể" nên được tạo kiểu theo cách bạn muốn phần thân chính của văn bản thuần túy trong tài liệu được tạo kiểu - đó là vùng chứa của nó. –
Trong lược đồ lớn về hiệu suất trang, [nó không đáng lo ngại] (http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/) (hoặc ít nhất không đáng lo ngại cho đến khi bạn giải quyết được nhiều yếu tố khác: nối, rút gọn, v.v.) – steveax