2009-09-13 40 views
8

Tôi hiểu rằng trong jQuery, sẽ thuận lợi hơn khi sử dụng các bộ chọn để jQuery không phải duyệt toàn bộ DOM để tìm thấy những gì bạn đang tìm kiếm. Ví dụ: $('span.description') tốt hơn chỉ là $('.description') nếu tôi biết rằng lớp description chỉ được áp dụng cho các yếu tố <span>.Có lợi thế nào khi sử dụng bộ chọn rất cụ thể trong CSS không?

Đây có phải là trường hợp với CSS không? Có lợi thế cụ thể nào để tôi sử dụng span.description { } thay vì .description { } không? Tôi đang suy nghĩ về tốc độ, tối ưu hóa, v.v. Tôi có lưu trình duyệt bất kỳ tác phẩm nào bằng cách nói chính xác nơi cần tìm?

Trả lời

7

Điều này đúng trong CSS -

Quy tắc tốt là xuất phát từ ID gần nhất. ID được lập chỉ mục để định vị chúng rất nhanh. Không có lý do gì để sử dụng nhiều hơn một trong bộ chọn của bạn.

Google Code- Optimize browser rendering

này đã trả lời rất nhiều câu hỏi tôi đã về đề tài này bao gồm này one- Tôi hy vọng bạn tìm thấy nó hữu ích.

+1

Tôi sẽ lưu ý rằng tối ưu hóa CSS của bạn có thể sẽ không mang lại cùng mức tăng hiệu suất như tối ưu hóa JS của bạn. Tôi vẫn nghĩ rằng việc giữ những điều này trong tâm trí là một ý tưởng rất hay. –

+0

Cảm ơn thông tin/liên kết và không chỉ cho tôi biết tính đặc hiệu là gì. :) –

+2

"Quy tắc tốt sẽ xuất phát từ ID gần nhất". Một quy tắc thậm chí tốt hơn là không sử dụng bộ chọn con cháu ở tất cả mà thay vào đó hãy sử dụng các lớp. Điều quan trọng là phải hiểu rằng các trình duyệt đánh giá các bộ chọn từ phải sang trái, có nghĩa là ´ # foo img sẽ bắt đầu bằng cách tìm mọi img´in DOM và sau đó đi qua trong cây DOM để xem phần còn lại của bộ chọn có hài lòng hay không. – KaptajnKold

0

Theo như tôi biết, cách chọn cụ thể của bạn sẽ tạo ra sự khác biệt rất ít về hiệu suất.

Hai khu vực có nhiều bộ chọn cụ thể hữu ích nhất là giảm nguy cơ không được áp dụng nơi bạn không muốn và chọn một bộ chọn được ưu tiên hơn một bộ chọn khác.

+0

@ Rich: khu vực. Cảm ơn đã chỉ ra điều đó. – Guffa

1

nó luôn phụ thuộc vào số lượng mã html và cấu trúc của bạn. Nó chắc chắn là một ý tưởng tốt để sử dụng đặc biệt là id và bộ chọn thích hợp. (tức là #nav li thay vì li.nav). Kể từ khi trình duyệt đầu tiên tải html và sau đó áp dụng css bạn đang giúp đỡ rất nhiều.

Điều này nói rằng, khi nói đến css tinh khiết (không jquery) sự khác biệt về tốc độ ngày nay không dễ phân biệt, bởi vì các công cụ dựng hình được tối ưu hóa cao - đặc biệt là khi áp dụng css. Vì vậy, thông thường nó không quan trọng.

-1

Một nguyên tắc cụ thể hơn được ưu tiên hơn một quy tắc ít cụ thể hơn, vì vậy:

span.myclass {} 

có ưu tiên hơn:

.myclass {} 

(không có vấn đề gì thứ tự là trong đó các quy tắc đã được tuyên bố)

+0

Tôi biết điều đó. Điều tôi quan tâm là liệu có một đối số tốc độ ở đây hay không. –

+0

Tôi sẽ rất ngạc nhiên nếu nó có bất kỳ sự khác biệt nào ở tất cả –

2

Đọc thông tin cụ thể về css - đó là lý do quan trọng nhất để ít hoặc cụ thể hơn với css của bạn.

http://www.w3.org/TR/CSS2/cascade.html#specificity

Như hiệu suất trình duyệt là khá nhiều một vấn đề không (trừ trường hợp trong jquery, như bạn đã đề cập), phương châm của tôi là trở thành cụ thể khi bạn đang kiểm soát được ưu tiên, hoặc khi bạn muốn thực hiện một cái gì đó dễ đọc hơn một chút trong css của bạn. Việc xác định rõ hơn có thể làm cho việc sử dụng lại các bộ chọn css trở nên phức tạp và làm cho mọi thứ quá phức tạp.

Sửa

này trông giống như một chút của một trùng lặp:

CSS Performance Question

+0

Tôi biết tất cả về điều này rồi. Điều tôi quan tâm là tốc độ. –

+0

Trong việc đọc của tôi, tốc độ tăng lên rất thấp đến mức không đáng để xem xét. – ScottE

+0

@ScottE Chúng ** không ** cận biên nếu bạn đang xử lý các tài liệu HTML lớn, đặc biệt là trên các thiết bị chậm/cũ hơn. Tối ưu hóa mã luôn được chào đón. – tomasz86

Các vấn đề liên quan