Sự thật về hiệu suất của bộ chọn CSS

Geez, để nó cho Patrick Brosset để nói về hiệu suất CSS theo cách dễ tiếp cận và thiết thực nhất có thể. Không phải CSS luôn luôn cái gì đang tăng tốc, hoặc thậm chí là kết quả treo thấp nhất khi cải thiện hiệu suất.

Nhưng if bạn đang tìm kiếm lợi nhuận từ khía cạnh CSS của mọi thứ, Patrick có một cách hay để tìm ra các bộ chọn đắt tiền nhất của bạn bằng cách sử dụng Edge DevTools:

• Mở DevTools.
• Chuyển đến tab Hiệu suất.
• Đảm bảo rằng bạn đã bật tùy chọn “Bật công cụ kết xuất nâng cao”. Điều này làm tôi vấp ngã trong quá trình này.
• Ghi lại tải trang.
• Mở tab “Từ dưới lên” trong báo cáo.
• Kiểm tra kích thước của các kiểu được tính toán lại của bạn.

Từ đây, hãy nhấp vào một trong các sự kiện Kiểu được tính toán lại trong chế độ xem thác nước Chính và bạn sẽ nhận được tab “Thống kê bộ chọn” mới. Hãy nhìn vào tất cả những điều tốt đẹp đó!

Bây giờ, bạn thấy tất cả các bộ chọn đã được xử lý và chúng có thể được sắp xếp theo thời gian chúng mất bao lâu, số lần khớp, số lần thử khớp và một thứ gọi là "số lần từ chối nhanh". tôi đã học là số phần tử dễ dàng và nhanh chóng bị loại bỏ khỏi kết hợp.

Rất nhiều thông tin chi tiết ở đây nếu CSS thực sự là nút cổ chai cần điều tra. Nhưng hãy đọc toàn bộ bài đăng của Patrick trên Blog Microsoft Edge vì anh ấy đi sâu hơn nhiều vào lý do tại sao và cách thức thực hiện, đồng thời xem qua toàn bộ nghiên cứu điển hình.

Liên kết trực tiếp & rarr;

• Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. Truy cập Tại đây.
• nguồn: https://css-tricks.com/the-truth-about-css-selector-performance/