Tôi đang cố gắng tìm một số chỉnh sửa hiệu suất phía máy khách đơn giản trong trang nhận hàng triệu lần xem trang hàng tháng. Một mối quan tâm mà tôi có là việc sử dụng bộ chọn CSS phổ quát (*).Tác động hiệu suất của bộ chọn phổ quát là gì?
Như một ví dụ, hãy xem xét một tài liệu HTML rất đơn giản như sau:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Bộ chọn chung sẽ áp dụng việc kê khai ở trên để các body, h1 và p yếu tố, bởi vì đó là những người duy nhất trong tài liệu.
Nói chung, tôi sẽ thấy hiệu suất tốt hơn từ một quy tắc như:
body, h1, p {
margin: 0;
padding: 0;
}
Hoặc này sẽ có chính xác ảnh hưởng thực giống nhau không?
Trình chọn phổ dụng có thực hiện được nhiều công việc mà tôi có thể không biết?
Tôi nhận thấy rằng tác động hiệu suất trong ví dụ này có thể rất nhỏ, nhưng tôi hy vọng tìm hiểu điều gì đó có thể dẫn đến cải thiện hiệu suất đáng kể hơn trong các tình huống thực tế.
Tôi không có ý định ghi đè các kiểu trong quy tắc chọn chung với các kiểu khác sau trong tài liệu - tức là, sử dụng kiểu đó làm biểu định kiểu đặt lại nhanh và dơ. Tôi thực sự đang cố gắng sử dụng công cụ chọn phổ quát chính xác như tôi nghĩ - để áp dụng quy tắc được đặt cho tất cả các phần tử trong tài liệu, một lần và cho tất cả.
Cuối cùng, tôi hy vọng sẽ xác định xem có điều gì đó chậm chạp về bộ chọn chung hay không, hoặc nếu nó chỉ có một đoạn rap xấu do lạm dụng tràn lan. Nếu * { margin: 0; } nghĩa đen là tương đương với body, h1, p { margin: 0; }, thì điều đó sẽ trả lời câu hỏi của tôi và tôi sẽ biết đi với câu hỏi trước vì nó ngắn gọn hơn. Nếu không, tôi muốn hiểu tại sao bộ chọn phổ hoạt động chậm hơn.
Từ quan điểm hiệu suất, khi nào thì _ever_ tốt hơn để vô hiệu hóa toàn cục (hoặc bật) một đặc tính cho _everything_ chỉ để cuối cùng thiết lập lại nó? Mặc định trình duyệt mặc định sẽ không mất nhiều thời gian - bạn có thể nhận được gợi ý từ các tệp CSS "đặt lại", nhưng tôi sẽ không đi xa đến mức thực sự sử dụng nó. Các trình duyệt nguồn mở có các giá trị mặc định CSS nguồn mở mà bạn có thể xem. – reisio
Tôi không chắc rằng bạn đã hiểu câu hỏi của tôi. Tôi không tìm cách thiết lập lại và sau đó áp dụng lại phong cách ở đây, nhưng thay vì áp dụng một quy tắc cho mọi phần tử trên trang. Câu hỏi của tôi là liệu về mặt kỹ thuật có giống nhau không khi sử dụng công cụ chọn chung vì nó chọn từng phần tử riêng lẻ hoặc nếu xảy ra một hình phạt hiệu suất vì bất kỳ lý do gì. – Bungle
'*' không phải là nghĩa đen tương đương với 'body, h1, p' vì những lý do hiển nhiên. Lý do * duy nhất * tại sao nó thực hiện chậm hơn là vì bạn áp dụng kiểu cho mọi thứ, trong khi bất kỳ bộ chọn nào khác giới hạn bạn với một tập hợp con các phần tử cụ thể trong DOM. Nhưng câu hỏi thực sự là, có chậm hơn nhiều khi trình duyệt sẽ không phản hồi khi áp dụng quá nhiều kiểu không? Tôi rât nghi ngơ điêu đo. Xem thêm: [* {box-sizing: border-box} FTW] (http://paulirish.com/2012/box-sizing-border-box-ftw) – BoltClock