Hướng dẫn is css selector faster than id? - bộ chọn css có nhanh hơn id không?
|
Đố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. Show (Điều này không liên quan gì đến nhận dạng JS, sử dụng neo, v.v.) 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 https://web.archive.org/web/20190901050026/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ả
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: https://web.archive.org/web/20190901050026/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.
Đã trả lời ngày 24 tháng 6 năm 2015 lúc 12:53Jun 24, 2015 at 12:53
NovocainenovocaineNovocaine 4.5154 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 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ấtBen 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.
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:
Các kết quả tất nhiên sẽ khác nhau tùy thuộc vào việc bạn sử dụng Ngay cả trong một trường hợp cực đoan như vậy, với 50000 phần tử phù hợp và sử dụng một số bộ chọn thực sự điên rồ như cái cuối cùng, chúng tôi thấy rằng cái chậm nhất là ~ 20ms, trong khi nhanh nhất là lớp đơn giản ở mức ~ 3,5ms. Không thực sự nhiều sự khác biệt. Trong một thực tế, nhiều hơn nữa Tame Tame Dom, với khoảng 1000 nút5000, bạn có thể mong đợi những kết quả đó sẽ giảm theo hệ số 10, đưa chúng đến tốc độ phân tích cú pháp phụ. Những gì chúng ta có thể thấy từ thử nghiệm này là nó không thực sự đáng để lo lắng về hiệu suất chọn CSS. Chỉ cần don quá mức với các bộ chọn giả và bộ chọn thực sự dài. Chúng ta cũng có thể thấy Blink cải thiện như thế nào trong hai năm qua. Thay vì sự chậm lại ~ 500X đã nêu đối với bộ chọn số lượng của người dùng ( 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ư Chất lượng hơn số lượngMộ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ệuNhữ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ử 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 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ậnTó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. Bộ chọn ID hoặc CSS nhanh hơn?Bộ chọn CSS là tùy chọn tốt nhất nếu phần tử web không có ID và tên. CSS nhanh hơn XPath. CSS dễ đọc hơn XPath.CSS is faster than XPath. CSS is more readable than XPath.
Bộ chọn ID hoặc bộ chọn lớp nhanh hơn?Như bạn đã nói, ID là tra cứu nhanh hơn, nhưng cái nào bạn chọn có liên quan nhiều hơn đến những gì bạn muốn làm.Hãy nghĩ về một lớp như một danh mục, hoặc phân loại cho các mục khác nhau có khía cạnh phổ biến hoặc chia sẻ với họ, trong khi một ID ngược lại, có một số thuộc tính duy nhất là một trong những loại.the ID is the faster lookup, but which one you chose has more to do with what you want to do. Think of a class like a category, or classification for different items that have a common or shared aspect to them, while an ID in contrast, has some unique property it is one of a kind.
Tại sao bộ chọn CSS nhanh hơn?Bộ chọn CSS hoạt động tốt hơn nhiều so với XPath và nó được ghi nhận rõ ràng trong cộng đồng Selenium.Dưới đây là một số lý do, động cơ XPath khác nhau trong mỗi trình duyệt, do đó làm cho chúng không nhất quán.IE không có động cơ XPath gốc, do đó Selen đã tiêm động cơ XPath của riêng mình để tương thích API của nó.
Bộ chọn CSS hay XPath nhanh hơn?Ưu điểm và nhược điểm của hiệu suất của bộ chọn CSS là giống nhau hoặc nhanh hơn so với XPath.Dễ học hơn XPath, dễ sử dụng hơn.Bộ chọn CSS chỉ cho phép lưu lượng đơn hướng.Sử dụng bộ chọn CSS, chúng ta chỉ có thể đi từ cha mẹ sang con nhưng không phải từ trẻ đến cha mẹ, điều này có thể xảy ra với XPath.Performance is the same or faster compared to XPath. Easier to learn than XPath, easier to use. CSS Selector only allows unidirectional flow. Using a CSS Selector, we can only traverse from parent to child but not from the child to parent, which is possible with XPath. |
