Tại sao bộ chọn css nhanh hơn?

Một điều tôi nên nói ngay từ đầu là đối với hầu hết chúng ta, những gì tiếp theo có lẽ sẽ không ảnh hưởng đáng kể đến bất kỳ thứ gì trên trang web của chúng tôi. Tôi sẽ nói thêm về vấn đề này sau trong bài đăng, nhưng xin lưu ý rằng bạn không có khả năng thấy được khoản tiết kiệm lớn về hiệu suất từ ​​việc tối ưu hóa bộ chọn của mình

Trình duyệt đọc bộ chọn như thế nào?

Toàn bộ cuộc thảo luận này dựa trên cách trình duyệt đọc bộ chọn để xác định html nào được tạo kiểu và điều quan trọng là trình duyệt sẽ đọc bộ chọn của bạn từ phải sang trái

{loại mã=css}
div. điều hướng > ul li a[title]
{/code}

Một trình duyệt nhìn thấy bộ chọn ở trên trước tiên sẽ cố khớp một [tiêu đề] trong html, sau đó tiếp tục khớp với li, ul và cuối cùng là div. điều hướng

Phần cuối cùng này của bộ chọn (trong trường hợp này là [tiêu đề]) được gọi là “bộ chọn chính” và cuối cùng nó sẽ quyết định mức độ hiệu quả của bộ chọn của bạn

Các trình duyệt có thể lọc ra sự không phù hợp càng sớm thì càng ít phải kiểm tra và bộ chọn càng hiệu quả. David Hyatt viết về hiệu suất của bộ chọn cho Mozilla cho chúng tôi biết

Đây là chìa khóa để tăng hiệu suất đáng kể. Càng ít quy tắc cần thiết để kiểm tra một phần tử nhất định, độ phân giải kiểu sẽ càng nhanh

Vì một bộ chọn không thành công sẽ hiệu quả hơn nếu cùng một bộ chọn phù hợp, chúng tôi muốn tối ưu hóa các bộ chọn chính không thành công. Bộ chọn khóa càng cụ thể, trình duyệt tìm thấy sự không khớp càng nhanh

Vì vậy, loại bộ chọn nào là hiệu quả nhất và kém hiệu quả nhất?

Hiệu quả của bộ chọn

Dưới đây là thứ tự hiệu quả cho bộ chọn. ID là các lớp giả và hiệu quả nhất và các phần tử giả là kém hiệu quả nhất

1. id (#myid)
2. lớp (. lớp học của tôi)
3. thẻ (div, h1, p)
4. anh em liền kề (h1 + p)
5. con (ul > li)
6. hậu duệ (li a)
7. phổ cập (*)
8. thuộc tính (a[rel=”bên ngoài”])
9. lớp giả và phần tử giả (a. di chuột, li. đầu tiên)

Nhìn vào danh sách trên, chúng tôi muốn bộ chọn chính của chúng tôi là id hoặc lớp hơn là bộ chọn con hoặc con cháu. Bộ chọn CSS3 như lớp giả và thuộc tính rất hữu ích, nhưng cũng kém hiệu quả nhất

{code type=css}
div #myid
{/code}

sẽ hiệu quả hơn

{code type=css}
#myid div
{/code}

bởi vì bộ chọn khóa của cái thứ nhất hiệu quả hơn bộ chọn khóa của cái thứ hai

Việc thêm thẻ vào trước id và lớp cũng làm chậm mọi thứ và làm cho bộ chọn kém hiệu quả hơn.

{code type=css}
#myid
. lớp của tôi
{/code}

hiệu quả hơn

{code type=css}
p#myid
p. lớp của tôi
{/code}

Hướng dẫn từ Mozilla

Trong bài viết của David, anh ấy đã đưa ra một số hướng dẫn để viết bộ chọn css hiệu quả, mà tôi sẽ trình bày bên dưới

• Tránh các quy tắc chung
• Không đủ điều kiện cho Quy tắc ID có tên hoặc lớp thẻ
• Không đủ điều kiện Quy tắc lớp học với tên thẻ
• Sử dụng danh mục cụ thể nhất có thể
• Tránh bộ chọn hậu duệ
• Quy tắc Danh mục thẻ không bao giờ được chứa bộ chọn con
• Đặt câu hỏi về tất cả các cách sử dụng bộ chọn con
• Dựa vào thừa kế
• Sử dụng biểu định kiểu có phạm vi

Bạn có thể đọc bài viết gốc của mình để biết thêm chi tiết. Đó là một bài đọc nhanh. Nó cũng đã hơn 10 tuổi. Không phải là tuổi của nó làm mất hiệu lực bất kỳ thông tin nào. Rốt cuộc, các trình duyệt vẫn khớp các bộ chọn từ phải sang trái

Tuy nhiên, một số chi tiết như nói bộ chọn con cháu kém hiệu quả nhất nên được cập nhật, vì hiện tại đã tồn tại bộ chọn mới và kém hiệu quả hơn mà không tồn tại khi bài viết được viết

Nó có quan trọng không?

Điều này là tốt và tốt, nhưng có vấn đề gì không?

Chắc là không. Đối với một người, có sự cân bằng giữa viết mã ngữ nghĩa và viết mã để cải thiện hiệu suất. Có những lợi thế cho cả ngữ nghĩa và hiệu suất và chúng ta không nên chọn cái này hoàn toàn hơn cái kia

Hiệu quả và sự kém hiệu quả của bộ chọn thứ hai có lẽ sẽ không ảnh hưởng nhiều đến hầu hết các trang web

Chúng tôi không nói về sự khác biệt trong vài giây từ hiệu quả nhất đến kém hiệu quả nhất. Chúng ta đang nói về mili giây trong trường hợp xấu nhất. Đối với phần lớn các trang web, bạn sẽ không nhận thấy sự khác biệt và nỗ lực có thể vượt xa số tiền tiết kiệm được

Điều đó nói rằng một trang web lớn tạo ra nhiều lưu lượng truy cập có thể sẽ thấy sự khác biệt và rất đáng để nỗ lực tối ưu hóa bộ chọn

Cũng có ý nghĩa để hiểu cách thức hoạt động của nó và nói chung là hiệu quả hơn. Ví dụ: biết rằng

{code type=css}
#myid
{/code}

hiệu quả hơn

{code type=css}
p#myid
{/code}

tại sao bạn lại thêm thẻ ở phía trước?

Tôi sẽ không làm cho html của mình ít ngữ nghĩa hơn hoặc làm lộn xộn nó với mã bổ sung để tiết kiệm vài phần nghìn giây, nhưng tôi sẽ thay đổi

{code type=css}
ul#nav li a
{/code}

đến

{code type=css}
#nav a
{/code}

như một vấn đề thực tế, vì cái thứ hai nhanh hơn và không yêu cầu thay đổi html

Bạn có nhận thấy sự khác biệt trên hầu hết các trang web bạn phát triển không?

Tôi sẽ không lấy thông tin này và bắt đầu mã hóa lại các trang web trực tiếp để làm cho chúng hiệu quả hơn, nhưng tại sao không dành vài phút để tìm hiểu mẫu bộ chọn nào hoạt động tốt hơn và sử dụng mẫu hiệu quả hơn khi bạn có thể chọn sử dụng một số mẫu.

Kiểm tra bộ chọn của bạn

Steve Souders đã tạo một trang nơi bạn có thể kiểm tra các bộ chọn khác nhau để so sánh hiệu quả của chúng. Tôi đã chơi với nó một chút và kết quả phù hợp với những gì tôi đã đăng ở trên

• Người tạo thử nghiệm CSS

Tôi không biết kết quả kiểm tra chính xác đến mức nào, nhưng bạn nên chơi thử để cảm nhận tốc độ của một số bộ chọn so với những bộ chọn khác

Jon Sykes đã thực hiện một số thử nghiệm của riêng mình vài năm trước, chủ yếu để xem xét tác động của bộ chọn con cháu đối với hiệu suất

• Kiểm tra hiệu suất CSS
• Kiểm tra hiệu suất CSS (pt 2)
• Thêm Kiểm tra hiệu suất CSS (pt 3)

Kết luận của anh ấy ở phần cuối của loạt bài

lưu ý rằng bộ chọn con và bộ chọn con có thể ảnh hưởng đến hiệu suất, nhưng đừng lo lắng về chúng nhiều đến mức không sử dụng chúng

Sau khi xem các thử nghiệm ở trên, Steve Souders đã chạy thử nghiệm của riêng mình để đi đến kết luận rằng lợi ích thu được từ việc tối ưu hóa bộ chọn có thể không xứng đáng với chi phí đối với hầu hết các trang web

Trong một bài đăng sau đó, anh ấy đã nhận được một số phản hồi về các trang web nơi bộ chọn không hiệu quả đã tạo ra sự khác biệt đáng chú ý và cuối cùng khuyên bạn nên tối ưu hóa bộ chọn chính của bộ chọn css

Bản tóm tắt

Chắc chắn có một điểm nhấn về hiệu suất khi sử dụng một số mẫu bộ chọn so với các mẫu khác, nhưng hiệu suất đó đạt được có ý nghĩa như thế nào?

Đối với hầu hết các trang web, nó có thể sẽ không tạo ra nhiều sự khác biệt. Bạn không nên lo lắng rằng các bộ chọn bạn đã sử dụng để phát triển trang web cuối cùng của mình hiện cần được xem lại và tối ưu hóa

Tuy nhiên, bạn có thể muốn xem xét hiệu quả của bộ chọn khi phát triển trang web tiếp theo của mình. Ít nhất thì cũng hợp lý để hiểu mô hình nào hiệu quả hơn và kém hơn

Mỗi chút đều giúp ích, vậy tại sao bạn không làm việc hiệu quả hơn ở nơi bạn có thể và nếu bạn tình cờ làm việc trên trang web có lượng người theo dõi lớn đó thì những chút nhỏ đó có thể tiết kiệm đáng kể

Bạn đã dành thời gian để tối ưu hóa bộ chọn css của mình chưa?

Tại sao Bộ chọn CSS nhanh hơn XPath?

Bộ chọn nào nhanh hơn trong CSS?

Bộ chọn CSS có nhanh hơn ID không?

Bộ chọn nào nhanh hơn trong Selenium?