Hướng dẫn which is faster id or css selector? - id hay css selector nhanh hơn?

Đối với câu hỏi này, tôi chỉ so sánh tốc độ của trình duyệt trong việc hiển thị CSS trên 2 yếu tố chỉ khác nhau ở chỗ một lớp có lớp và một lớp có ID.

(Điều này không liên quan gì đến nhận dạng JS, sử dụng neo, v.v.)

classed element
ided element

Có ai có số về điều này không? Tôi đã đọc rằng ID CSS là 'nhanh hơn', nhưng bằng bao nhiêu? Tôi sẽ đoán rằng nó không đáng kể, nhưng sẽ rất thú vị khi biết.

Đã hỏi ngày 24 tháng 6 năm 2015 lúc 12:42Jun 24, 2015 at 12:42

2

http://oli.jp/2011/ids/

ID nhanh hơn trong một số trường hợp, nhưng không phải tất cả

Nó có một niềm tin phổ biến rằng các bộ chọn ID là nhanh nhất, nhưng điều này đi kèm với một cảnh báo lớn: IDS là bộ chọn CSS nhanh nhất chỉ khi họ là bộ chọn chính. Cái gì mà đó? Chà, trong khi bạn có thể đọc các bộ chọn từ trái sang phải, các trình duyệt đọc chúng từ phải sang trái.

Cũng có một bài kiểm tra hiệu suất ở đây cho yêu cầu số của bạn: http://oli.jp/2011/ids/#table1

Sự kết luận

ID được sử dụng chính xác là nhanh hơn, nhưng với sự khác biệt tối thiểu so với các lớp - nó không đáng để xem xét.

Dường như với tôi rằng không có lý do thuyết phục nào để sử dụng ID trong các bộ chọn để tạo kiểu CSS, vì các lớp CSS có thể làm mọi thứ ID có thể. Hy vọng rằng bạn sẽ đồng ý rằng có một số lý do chính đáng. Hãy suy nghĩ về nó vào lần tới khi bạn bắt đầu một dự án cá nhân hoặc thiết kế lại trang web của riêng bạn và thử thêm một lớp (hoặc vai trò mang tính bước ngoặt của ARIA) để tạo kiểu. Lưu id cho số nhận dạng phân đoạn hoặc móc javascript

Đã trả lời ngày 24 tháng 6 năm 2015 lúc 12:53Jun 24, 2015 at 12:53

NovocainenovocaineNovocaine

4.4874 Huy hiệu vàng42 Huy hiệu bạc64 Huy hiệu đồng4 gold badges42 silver badges64 bronze badges

1

Trong kịch bản điển hình của ngày hôm nay, trong đó trang web trung bình vận chuyển 500kB JavaScript Gzipped và 1,5 MB hình ảnh, chạy trên thiết bị Android tầm trung thông qua 3G với thời gian chuyến đi vòng 400ms, hiệu suất chọn CSS là ít vấn đề nhất của chúng tôi.

Tuy nhiên, có một cái gì đó để nói về chủ đề này, đặc biệt là loại bỏ một số huyền thoại và truyền thuyết xung quanh họ. Vì vậy, hãy để Lặn lặn ngay vào.

Những điều cơ bản của phân tích CSS

Đầu tiên, để có được trên cùng một trang - bài viết này không phải là về hiệu suất của các thuộc tính và giá trị CSS. Những gì chúng tôi bao gồm ở đây là chi phí hiệu suất của chính các bộ chọn. Tôi sẽ tập trung vào công cụ kết xuất chớp mắt, cụ thể là Chrome 62.

Các bộ chọn có thể được chia thành một vài nhóm và (gần như) được sắp xếp từ ít nhất đến đắt nhất:

Điều này có nghĩa là bạn chỉ nên sử dụng ID và lớp học? Vâng, không thực sự. Nó phụ thuộc. Đầu tiên, hãy để bao gồm cách các trình duyệt diễn giải các bộ chọn CSS.

Trình duyệt đọc CSS từ phải sang trái. Bộ chọn ngoài cùng bên phải trong bộ chọn hợp chất được gọi là bộ chọn chính. Vì vậy, ví dụ, trong #classID2, bộ chọn chính là #classID3. Trình duyệt đầu tiên phù hợp với tất cả các bộ chọn chính. Trong trường hợp này, nó tìm thấy tất cả các yếu tố trên trang phù hợp với bộ chọn #classID3. Sau đó, nó tìm thấy tất cả các yếu tố #classID5 trên trang và lọc các #classID3 xuống chỉ là các yếu tố là hậu duệ của #classID5 - và cứ thế cho đến khi nó đạt đến bộ chọn ngoài cùng bên trái.key selector. So, for instance, in #classID2, the key selector is #classID3. The browser first matches all key selectors. In this case, it finds all elements on the page that match the #classID3 selector. It then finds all #classID5 elements on the page and filters the #classID3s down to just those elements that are descendants of #classID5s — and so on until it reaches the leftmost selector.

Do đó, bộ chọn càng ngắn thì càng tốt. Nếu có thể, hãy đảm bảo rằng bộ chọn khóa là một lớp hoặc ID để giữ cho nó nhanh và cụ thể.

Đo lường hiệu suất

Ben Frain đã tạo ra một loạt các thử nghiệm để đo lường hiệu suất của bộ chọn trở lại vào năm 2014. Thử nghiệm bao gồm một DOM khổng lồ bao gồm 1000 yếu tố giống hệt nhau và đo tốc độ cần phân tích các bộ chọn khác nhau, từ ID đến một số bộ chọn hợp chất dài và phức tạp. Những gì anh ta tìm thấy là đồng bằng giữa bộ chọn chậm nhất và nhanh nhất là ~ 15ms.

Tuy nhiên, điều đó đã trở lại vào năm 2014. Mọi thứ đã thay đổi rất nhiều kể từ đó, và các quy tắc ghi nhớ là tất cả nhưng vô dụng trong bối cảnh trình duyệt luôn thay đổi. Luôn nhớ làm bài kiểm tra của riêng bạn, đặc biệt là khi hiệu suất có liên quan.

Tôi đã đi làm các bài kiểm tra của riêng mình, và vì điều đó tôi đã sử dụng thử nghiệm Paul Lewis, được đề cập trong bình luận của Paul Ailen, bày tỏ mối quan tâm về các bộ chọn số lượng hữu ích, nhưng đã bị xáo trộn.

Những bộ chọn này là một trong những người chậm nhất có thể. ~ 500 chậm hơn một thứ gì đó hoang dã như div div.box:not(:empty):last-of-type .title. Trang kiểm tra http://jsbin.com/gozula/1/quiet

Bài kiểm tra đã tăng lên một chút, lên 50000 yếu tố và bạn có thể tự mình thử nghiệm. Tôi đã thực hiện trung bình 10 lần chạy trên MacBook Pro 2014 của mình và những gì tôi nhận được là như sau:

Điều này có nghĩa là bạn chỉ nên sử dụng ID và lớp học? Vâng, không thực sự. Nó phụ thuộc. Đầu tiên, hãy để bao gồm cách các trình duyệt diễn giải các bộ chọn CSS.

Trình duyệt đọc CSS từ phải sang trái. Bộ chọn ngoài cùng bên phải trong bộ chọn hợp chất được gọi là bộ chọn chính. Vì vậy, ví dụ, trong #classID2, bộ chọn chính là #classID3. Trình duyệt đầu tiên phù hợp với tất cả các bộ chọn chính. Trong trường hợp này, nó tìm thấy tất cả các yếu tố trên trang phù hợp với bộ chọn #classID3. Sau đó, nó tìm thấy tất cả các yếu tố #classID5 trên trang và lọc các #classID3 xuống chỉ là các yếu tố là hậu duệ của #classID5 - và cứ thế cho đến khi nó đạt đến bộ chọn ngoài cùng bên trái.

Do đó, bộ chọn càng ngắn thì càng tốt. Nếu có thể, hãy đảm bảo rằng bộ chọn khóa là một lớp hoặc ID để giữ cho nó nhanh và cụ thể.

Tuy nhiên, bạn nên sử dụng các lớp bất cứ khi nào có thể và áp dụng một số quy ước đặt tên như BEM, SMACSS hoặc OOCSS, vì nó sẽ không chỉ giúp trang web của bạn hiệu suất mà còn giúp đỡ rất nhiều về khả năng duy trì mã. Các bộ chọn hợp chất quá mức, đặc biệt là khi được sử dụng với thẻ và bộ chọn phổ quát - chẳng hạn như div4 - cực kỳ giòn và là nguồn của nhiều lỗi không lường trước được. Chúng cũng là một cơn ác mộng để duy trì, đặc biệt nếu bạn thừa hưởng mã từ người khác.

Chất lượng hơn số lượng

Một vấn đề lớn hơn là chỉ đơn giản là có các bộ chọn đắt tiền là có rất nhiều trong số chúng. Điều này được biết đến như là phong cách của người Viking, và bạn có thể đã thấy vấn đề rất nhiều. Các ví dụ điển hình là các trang web nhập toàn bộ các khung CSS như bootstrap hoặc nền tảng, trong khi sử dụng ít hơn 10% CSS được chuyển. Một ví dụ khác được nhìn thấy trong các dự án cũ, không bao giờ được tái bản mà CSS đã biến thành , bây giờ trông giống như một khu vườn trồng trọt đầy cỏ dại.

Không chỉ một tệp CSS lớn mất nhiều thời gian hơn để chuyển, và mạng là nút cổ chai lớn nhất trong hiệu suất trang web), chúng còn mất nhiều thời gian hơn để phân tích. Cũng như xây dựng DOM từ HTML của bạn, trình duyệt cần xây dựng CSSOM (mô hình đối tượng CSS) để so sánh nó với DOM và khớp với các bộ chọn.

Vì vậy, hãy giữ phong cách của bạn gọn gàng và khô ráo, don bao gồm tất cả mọi thứ và bồn rửa nhà bếp, tải những gì bạn cần và khi bạn cần, và sử dụng UNCS nếu bạn cần.

Nếu bạn muốn tìm hiểu thêm về cách các trình duyệt phân tích CSS, hãy xem bài đăng của Nicole Sullivan trên trên Webkit, bài viết của Ilya Grigorik, về cách Blink làm, hoặc bài viết của Lin Clark về động cơ CSS mới của Mozilla.

Con voi trong phòng: Phong cách vô hiệu

Những gì chúng tôi đã đề cập cho đến nay là tốt, nhưng chúng tôi chỉ thảo luận về một đường chuyền kết xuất duy nhất. Ngày nay, các trang web không còn là tài liệu tĩnh, nhưng giống với các ứng dụng có nội dung động người dùng có thể tương tác.

Điều này làm phức tạp mọi thứ, vì phân tích CSS chỉ là một bước duy nhất trong đường ống kết xuất trình duyệt. Ở đây, một chế độ xem hướng kết xuất về cách trình duyệt hiển thị một khung hình duy nhất cho màn hình (nguồn: Google):

Chúng tôi đã giành chiến thắng khi tham gia vào hiệu suất và tổng hợp JavaScript, nhưng thay vào đó sẽ tập trung vào phần màu tím - phân tích phong cách và đưa ra các yếu tố.

Sau khi xây dựng DOM và CSSOM, trình duyệt cần kết hợp cả hai thành một cây kết xuất trước khi cuối cùng vẽ nó trên màn hình. Trong bước đó, trình duyệt cần tìm ra các CS được tính toán cho mỗi phần tử khớp. Bạn có thể tự mình thấy điều này trong bảng điều khiển các yếu tố> Kiểu của các công cụ nhà phát triển. Nó lấy tất cả các kiểu phù hợp, các kiểu người dùng cụ thể của Cascade và trình duyệt để xây dựng CSS cuối cùng, được tính toán cho phần tử.Elements > Styles panel of the developer tools. It takes all the matching styles, the cascade, and browser-specific user agent styles to construct the final, computed CSS for the element.

Sau đó, nó có thể tiến hành bố cục (còn được gọi là bước refres), trong đó nó tính toán hình học và xây dựng mô hình hộp của trang, đặt mỗi phần tử trên vị trí tương ứng của nó trên chế độ xem. Bố cục là phần chuyên sâu nhất của quá trình này.

Cuối cùng, trình duyệt chuyển đổi từng nút trong cây kết xuất thành các pixel thực tế trên màn hình trong giai đoạn sơn.

Bây giờ, điều gì xảy ra khi chúng ta đột biến DOM bằng cách thay đổi một số lớp trên trang, thêm hoặc xóa một số nút, sửa đổi một số thuộc tính hoặc bằng bất kỳ cách nào gây rối với HTML (hoặc bản thân các kiểu dáng)?

Chúng tôi vô hiệu hóa các kiểu được tính toán và trình duyệt cần làm mất hiệu lực mọi thứ xuống cây của các bộ chọn phù hợp. Mặc dù các trình duyệt ngày nay thông minh hơn nhiều, nhưng trước đây, nếu bạn thay đổi một lớp trên phần tử div5, tất cả các yếu tố hậu duệ cần thiết để các kiểu được tính toán của chúng được tính toán lại.

Một cách để tránh vấn đề này là giảm độ phức tạp của bộ chọn của bạn. Thay vì viết div6, hãy sử dụng một bộ chọn duy nhất, như div7. Bằng cách đó, bạn giảm phạm vi vô hiệu hóa kiểu, vì nếu bạn sửa đổi bất cứ thứ gì bên trong div8, bạn đã giành được sự tính toán lại kích hoạt cho toàn bộ nút.

Một cách khác là giảm phạm vi - chẳng hạn như số lượng các yếu tố không hợp lệ. Hãy cụ thể với CSS của bạn. Hãy ghi nhớ điều này đặc biệt là trong các hoạt hình, nơi trình duyệt chỉ có ~ 10ms để thực hiện tất cả các công việc cần thiết.

Nếu bạn muốn đi xuống các chi tiết khó khăn của phong cách không hợp lệ, tôi khuyên bạn nên đọc phong cách vô hiệu hóa trong chớp mắt.

Sự kết luận

Tóm lại, bạn không nên lo lắng về hiệu suất chọn, trừ khi bạn thực sự quá nhiệt tình. Trong khi chủ đề là tất cả các cơn thịnh nộ trong năm 2012, các trình duyệt đã nhanh hơn và thông minh hơn rất nhiều kể từ đó. Ngay cả Google cũng không lo lắng về điều đó nữa. Nếu bạn kiểm tra trang hiểu biết về tốc độ trang Google Google, bạn đã giành được quy tắc sử dụng các bộ chọn CSS hiệu quả, đã bị xóa vào năm 2013.

Thay vào đó, tập trung vào việc làm cho CSS của bạn duy trì và có thể đọc được. Đồng nghiệp của bạn và bản thân tương lai của bạn sẽ cảm ơn bạn vì điều đó. Cố gắng tối ưu hóa việc phân phối CSS bằng cách chỉ bao gồm các kiểu đã sử dụng. Và sau đó, làm quen với đường ống kết xuất. Không giống như các bộ chọn, bản thân các kiểu có thể tốn kém và sự khác biệt giữa một trang web vui nhộn và một trang web trơn tru thường có thể được tìm thấy trong cách thực hiện CSS.

Và như một lưu ý cuối cùng: Luôn luôn làm bài kiểm tra của riêng bạn.

Don Tiết chỉ tin những gì ai đó đã viết trên internet vài năm trước. Cảnh quan đang thay đổi mạnh mẽ và với một tốc độ đáng kinh ngạc. Những gì có liên quan ngày hôm nay có thể trở nên lỗi thời sớm hơn bạn biết.

ID hoặc CSS nào nhanh hơn?

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

Mà có ID hoặc lớp ưu tiên hơn trong CSS?

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