Hướng dẫn css-in-js performance - hiệu suất css-in-js
|
CSS-in-JS đã chiếm một vị trí vững chắc trong công cụ phía trước, và có vẻ như xu hướng này sẽ tiếp tục trong tương lai gần. Đặc biệt là trong thế giới phản ứng. Ví dụ, trong số 11492 người tham gia khảo sát trạng thái CSS vào năm 2020, chỉ có 14,3% không nghe thấy các thành phần theo kiểu (một thư viện CSS-in-JS thống trị). Và hơn 40% người tham gia đã sử dụng thư viện. Show
Tôi muốn thấy một so sánh hiệu suất chuyên sâu của các thư viện CSS-in-JS như các thành phần kiểu dáng và CSS cũ tốt trong một thời gian dài. Đáng buồn thay, tôi đã không thể tìm thấy một sự so sánh về một dự án trong thế giới thực chứ không phải một số kịch bản thử nghiệm đơn giản. Vì vậy, tôi quyết định tự làm điều đó. Tôi đã di chuyển ứng dụng trong thế giới thực từ các thành phần theo kiểu sang Linaria, sẽ trích xuất CSS theo thời gian xây dựng. Không có thế hệ thời gian chạy của các kiểu trên máy người dùng. Một thông báo ngắn, trước khi chúng tôi bắt đầu. Tôi không phải là một người ghét CSS-in-JS. Tôi thừa nhận họ có DX tuyệt vời, và mô hình sáng tác được thừa hưởng từ React là tuyệt vời. Nó có thể cung cấp cho các nhà phát triển một số lợi thế tốt đẹp như Josh W. Comeau nổi bật trong bài viết của mình The Style-Thành phần Happy Path. Tôi cũng sử dụng các thành phần theo kiểu trên một số dự án hoặc dự án của tôi mà tôi đã làm việc. Nhưng tôi tự hỏi, giá cho DX tuyệt vời này theo quan điểm của người dùng là bao nhiêu. Hãy để xem những gì tôi đã tìm thấy. TLDR: #Don Tiết sử dụng thời gian chạy CSS-in-JS nếu bạn quan tâm đến hiệu suất tải của trang web của bạn. Đơn giản là ít JS = trang web nhanh hơn. Có rất nhiều chúng tôi có thể làm về nó. Nhưng nếu bạn muốn xem một số con số, hãy tiếp tục đọc.Simply less JS = Faster Site. There isn’t much we can do about it. But if you want to see some numbers, continue reading. Những gì tôi đã đo và làm thế nào #Ứng dụng tôi đã sử dụng cho thử nghiệm là một ứng dụng React khá chuẩn. Bootstrapped bằng cách sử dụng Dự án ứng dụng Created React, với Redux và được tạo kiểu bằng cách sử dụng các thành phần kiểu dáng (V5). Đây là một ứng dụng khá lớn với nhiều màn hình, bảng điều khiển có thể tùy chỉnh, theo chủ đề của khách hàng và nhiều hơn nữa. Vì nó được xây dựng với CRA, nó không có kết xuất phía máy chủ, vì vậy mọi thứ đều được hiển thị trên máy khách (vì nó là một ứng dụng B2B, đây không phải là một yêu cầu). Tôi đã sử dụng ứng dụng này và thay thế các thành phần theo kiểu bằng Linaria, dường như có API tương tự. Tôi nghĩ rằng việc chuyển đổi sẽ dễ dàng. Hóa ra nó không dễ dàng. Tôi đã mất hơn hai tháng để di chuyển nó, và thậm chí sau đó, tôi đã di chuyển chỉ một vài trang chứ không phải toàn bộ ứng dụng. Tôi đoán rằng tại sao không có sự so sánh như thế này. Thay thế thư viện kiểu dáng là thay đổi duy nhất. Mọi thứ khác vẫn còn nguyên vẹn. Tôi đã sử dụng các công cụ Chrome Dev để chạy một số thử nghiệm trên hai trang được sử dụng nhiều nhất. Tôi đã luôn chạy các bài kiểm tra ba lần và các số được trình bày là trung bình của 3 lần chạy đó. Đối với tất cả các bài kiểm tra, tôi đã đặt CPU điều chỉnh thành 4 lần và kết nối mạng để làm chậm 3G. Tôi đã sử dụng một cấu hình chrome riêng để kiểm tra hiệu suất mà không cần bất kỳ phần mở rộng nào. Chạy kiểm tra:
So sánh mạng #Chúng tôi sẽ bắt đầu với một mạng. Một trong những lợi thế của CSS-in-JS là không có phong cách không sử dụng, phải không? Không hẳn là chính xác lắm. Mặc dù bạn chỉ hoạt động các kiểu được sử dụng trên trang, bạn vẫn có thể tải xuống các kiểu không cần thiết. Nhưng thay vì có chúng trong một tệp CSS riêng biệt, bạn có chúng trong gói JS của bạn. Dưới đây là so sánh dữ liệu của cùng một bản dựng trang chủ với các thành phần theo kiểu và Linaria. Kích thước trước khi cắt giảm kích thước Gzipped, kích thước không nén là sau nó. So sánh thống kê mạng lưới trang chủ
So sánh số liệu thống kê mạng của trang tìm kiếm 395kb/1,9mb391kb/1,9mb So sánh bảo hiểm - Trang chủ
So sánh bảo hiểm - trang tìm kiếm6,3kb  52,9kb 937kb912kb Kiểm toán hiệu suất của Ngọn hải đăng # Nếu chúng ta đang nói về hiệu suất, sẽ thật xấu hổ khi không sử dụng ngọn hải đăng. Bạn có thể thấy các so sánh trong các biểu đồ dưới đây (trung bình từ 3 LI chạy.). Ngoài sức sống của web, tôi cũng bao gồm công việc chủ đề chính (thời gian để phân tích, biên dịch và thực hiện tài sản, phần lớn nhất trong số này là JS, nhưng nó bao gồm tính toán bố cục và kiểu dáng, vẽ, v.v.) và thời gian thực hiện của JS. Tôi đã bỏ qua sự thay đổi bố cục tích lũy vì nó gần bằng 0, và hầu như không có sự khác biệt giữa Linaria và thành phần kiểu dáng. Như bạn có thể thấy, Linaria tốt hơn trong hầu hết các sức sống của web (bị mất một lần trong CLS). Và đôi khi bằng một biên độ lớn. Ví dụ: LCP nhanh hơn 870ms trên trang chủ và 1,2 trên trang tìm kiếm. Không chỉ kết xuất trang với CSS bình thường nhanh hơn nhiều, mà còn đòi hỏi ít tài nguyên hơn. Chặn thời gian và thời gian cần thiết để thực hiện tất cả các JS nhỏ hơn 300ms và tương ứng khoảng 1,3 giây.Hiệu suất Hồ sơ # Ngọn hải đăng có thể cung cấp cho bạn nhiều hiểu biết về hiệu suất. Nhưng để đi vào chi tiết, tab Hiệu suất trong Công cụ Dev là đặt cược tốt nhất. Trong trường hợp này, tab Hiệu suất xác nhận kết quả của Ngọn hải đăng. Bạn có thể thấy các chi tiết trên các biểu đồ dưới đây.
-477msBức tranh -16ms Tổng thời gian chặn |
