Sử dụng CSS nội tuyến có tốt không?
|
Khi bạn lần đầu tiên bắt đầu xây dựng một trang web hoặc ứng dụng, tệp Show
Có, bạn có thể thiết lập bộ nhớ đệm, HTTP/2 và các tối ưu hóa phía máy chủ khác, nhưng cuối cùng, bạn sẽ cung cấp một tệp Tất cả thay đổi này có thể dẫn đến “nghìn lần cắt giảm” cho hiệu suất trang web của bạn. Các trang bắt đầu tải chậm hơn, có cảm giác bị lag và mức độ tương tác của người dùng của bạn giảm xuống. Bạn cần tìm một số cách để lấy lại hiệu suất linh hoạt mà bạn từng có, nhưng bằng cách nào? Một trong những cách bạn có thể cải thiện hiệu suất trang web của mình là nội tuyến CSS. Bài viết này giải thích “cái gì” và “cách thức” của CSS nội tuyến bằng cách hỏi và trả lời một loạt câu hỏi CSS có thể ảnh hưởng đến hiệu suất như thế nào?Trước khi chúng ta tìm hiểu ý nghĩa của CSS nội tuyến và cách thực hiện, điều quan trọng trước tiên là phải hiểu CSS có thể ảnh hưởng đến hiệu suất như thế nào. Mặc dù JavaScript và hình ảnh thường đóng một vai trò lớn hơn nhiều trong việc tác động tiêu cực đến các chỉ số hiệu suất, nhưng CSS cũng có thể đóng một vai trò quan trọng Khi trình duyệt truy cập một URL, thứ đầu tiên nó nhận được từ máy chủ là tệp HTML. Sau đó, nó bắt đầu phân tích cú pháp tệp này, dừng lại để yêu cầu bất kỳ phụ thuộc được liên kết nào mà nó tìm thấy trên đường đi. Nó kiểm tra CSS được coi là tài nguyên chặn kết xuất — nghĩa là, nếu bạn bao gồm bất kỳ dạng ...0 nào trong tài liệu Mặc dù các nhà cung cấp internet, cơ sở hạ tầng và máy chủ của chúng tôi đều đang trở nên nhanh hơn mỗi năm, nhưng không có gì gọi là bữa trưa miễn phí. Mọi yêu cầu mạng đến máy chủ đều có chi phí thời gian và các yêu cầu cần hoàn thành trước khi trình duyệt bắt đầu hiển thị trang là tốn kém nhất Ở dạng đơn giản nhất, CSS nội tuyến là một cách tiếp cận để tránh hoặc trì hoãn yêu cầu mạng thứ hai (hoặc nhiều hơn) này trước khi người dùng có thể bắt đầu nhìn thấy mọi thứ trên trang một cách trực quan Bạn nên làm gì trước khi giải quyết hiệu suất?Trước khi cố gắng cải thiện bất kỳ điều gì liên quan đến hiệu suất trên trang web của bạn, điều quan trọng trước tiên là đo lường hiệu suất hiện tại. Chọn một số số liệu để đo lường (có một số ý tưởng hay về những gì ở đây) và nhận thông tin cơ bản về cách trang web của bạn đang hoạt động Mặc dù tất cả nội dung trong bài viết này và những nội dung khác đều đúng về mặt lý thuyết, nhưng mọi thứ luôn hoạt động khác đi trong thực tế. Vì vậy, hãy đo trước, thử một số thứ, đo lại và nếu nó không mang lại cho bạn kết quả như mong đợi, thì hãy hoàn nguyên. Nếu bạn đo lường được kết quả tích cực sau khi thực hiện một số thay đổi, thì bạn có một câu chuyện thành công tốt đẹp để chia sẻ với nhóm hoặc người quản lý của mình Nội tuyến là gì?Nội tuyến là thực hành tích hợp một phần mã trực tiếp vào nơi nó sẽ được sử dụng, loại bỏ nhu cầu máy tính thực hiện lệnh gọi hàm hoặc một số loại tra cứu khác. Điều này làm cho mã nhanh hơn Mặc dù thuật ngữ nội tuyến ban đầu xuất phát từ ngôn ngữ lập trình C, nhưng khái niệm và tên này đã tìm ra cách phát triển web. Trong trường hợp CSS, hiệu suất đạt được đến từ các kiểu nội tuyến trực tiếp vào tài liệu HTML, loại bỏ nhu cầu trình duyệt thực hiện yêu cầu mạng trước khi nhận các kiểu chặn hiển thị Bạn nên tránh loại nội tuyến nào?Nếu bạn tiến hành bất kỳ nghiên cứu nào về CSS nội tuyến, bạn có thể tìm thấy một số gợi ý cho các kiểu nội tuyến theo cách này
Điều này thực sự đúng với nội tuyến, vì không cần yêu cầu mạng tìm nạp biểu định kiểu bên ngoài hoặc thậm chí trình duyệt không cần áp dụng tên lớp CSS cho phần tử. Tuy nhiên, bạn hầu như không bao giờ nên nội tuyến CSS theo cách này vì trớ trêu thay, nó gây ra một số tổn thất hiệu suất nhất định khi khả năng đáp ứng thời gian chạy là đơn vị đo lường Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơnDưới đây là một số lý do mà bạn nên tránh nội tuyến CSS theo cách này Thời gian tải chặn kết xuấtĐiều này quay trở lại khái niệm CSS là tài nguyên chặn hiển thị. Mặc dù điều này thường được xem xét trong bối cảnh yêu cầu mạng, nhưng nó cũng có thể là lượng thời gian trình duyệt cần để phân tích cú pháp và hiểu tất cả CSS Giả sử bạn muốn tránh tải biểu định kiểu CSS bên ngoài và do đó, nội tuyến từng phần tử trong DOM riêng lẻ. Bạn có thể kết thúc với nhiều kiểu trùng lặp có thể là tên lớp CSS nguyên tử hoặc tên lớp thông thường cho một loại phần tử nhất định. Như điểm chuẩn của một nhà phát triển đã chỉ ra, việc tạo kiểu nội tuyến cho mọi thành phần HTML ảnh hưởng đáng kể đến thời gian vẽ nội dung đầu tiên Sao chép phong cáchViệc đánh trống lảng “đừng lặp lại chính mình” không cần thiết và cũng không hữu ích trong mọi trường hợp, nhưng đối với CSS nội tuyến, bạn sẽ đỡ phải đau đầu hơn nếu mọi thành phần không được tạo kiểu riêng lẻ. Vâng, có nhiều cách bạn có thể xác định kiểu như một đối tượng có thể tái sử dụng và truyền các kiểu đó vào từng phần tử, nhưng tại một số điểm, việc mỗi phần tử được tạo kiểu riêng lẻ sẽ khiến việc tái cấu trúc trong tương lai trở nên khó khăn hơn mức cần thiết Tính đặc thù của phong cáchNếu việc trùng lặp các kiểu không đủ cảnh báo để "quay lại ngay bây giờ", thì đây là thời điểm tốt để nhớ rằng các kiểu nội tuyến có và do đó chỉ có thể được ghi đè bằng cách sử dụng khai báo ...0 Để vẽ một bức tranh hoàn chỉnh, CSS nội tuyến theo cách này không phải lúc nào cũng có hại cho hiệu suất hoặc khả năng bảo trì Hãy tưởng tượng một số JavaScript đang tự động thêm hoặc xóa các phần tử khỏi DOM khi người dùng tương tác với trang web. Trong trường hợp này, trình duyệt đã hoàn thành các tác vụ tải xuống, phân tích cú pháp và kết xuất và hiệu suất (hầu hết) không còn là vấn đề nữa. Nhưng trong trường hợp CSS nội tuyến sẽ xuất hiện trong DOM khi trình duyệt tải trang, nên tránh nội tuyến theo cách này Bạn nên xem xét loại nội tuyến nào?Mặc dù phần trước không khuyến khích một dạng CSS nội tuyến, nhưng có một phương pháp nội tuyến khác hiệu quả hơn nhiều về khả năng đáp ứng thời gian chạy. Thay vì liên kết với một tệp CSS bên ngoài như thế này ... Bạn có thể trực tiếp đưa các kiểu (hoặc một phần của chúng) vào phần đầu tài liệu như thế này ... Điều này giải quyết vấn đề yêu cầu trình duyệt gửi các yêu cầu mạng bổ sung trước khi có thể hiển thị trang và cũng giải quyết vấn đề cố gắng tạo kiểu nội tuyến cho từng thành phần riêng lẻ. Bây giờ chúng ta có thể tạo kiểu cho tất cả các liên kết trong trang bằng cách chỉ cần đặt cho phần tử một lớp liên kết ...1 như bạn có thể thường làm Thành công. Giờ đây, chúng tôi có thể giảm số lượng yêu cầu mạng trong khi cung cấp cho DOM các kiểu cần thiết để hiển thị nhanh nhất có thể. Tất cả đều tốt, phải không? Gần như Các bài viết hay khác từ LogRocket
Phát triển phần mềm là tất cả về sự đánh đổi. Để theo đuổi hiệu suất tốt hơn, chúng tôi cần xác định xem chúng tôi sẵn sàng đánh đổi những gì. Chúng tôi đã loại bỏ một yêu cầu mạng (tốt) nhưng chúng tôi chỉ chuyển các kilobyte đó sang tệp HTML và tải xuống lớn hơn (xấu) Không có gì gọi là bữa trưa miễn phí. Có một số cân bằng được thực hiện khi chấp nhận chi phí hoạt động của tệp HTML lớn hơn để loại bỏ yêu cầu mạng đồng bộ, nhưng tại một số điểm, nếu bạn đặt quá nhiều kiểu vào đầu, số liệu hiệu suất của bạn sẽ thực sự bị ảnh hưởng Quan sát cần thực hiện ở đây là CSS nội tuyến làm cho mọi thứ hiệu quả hơn đối với các số liệu, chẳng hạn như lần đầu tiên vẽ nội dung khi chúng tôi chỉ CSS quan trọng nội tuyến trong phần đầu tài liệu (với từ khóa là quan trọng). Biểu định kiểu của trang web của bạn có thể chứa rất nhiều kiểu khác mà người dùng sẽ thấy khi họ tải trang của bạn lần đầu tiên Ví dụ: các kiểu cho chân trang của bạn sẽ không cần thiết khi trình duyệt vẽ trang web lần đầu tiên. Có lẽ chỉ cần tiêu đề, anh hùng và một số kiểu nội dung cho lần sơn đầu tiên đó. Những gì được hiển thị trong chế độ xem của trình duyệt khi tải lần đầu là những gì có thể được coi là “quan trọng” Quay trở lại cuộc thảo luận về sự đánh đổi, loại bỏ các yêu cầu mạng và đảm bảo rằng tệp HTML không quá lớn, điều đáng nói là có một số lời khuyên xung quanh ý tưởng về giới hạn kích thước là 14KB cho tất cả các tài nguyên quan trọng cho . Ba liên kết sau đây rất hữu ích trong trường hợp bạn muốn tìm hiểu sâu hơn về ý tưởng này
Cuối cùng, điều quan trọng về hiệu suất và CSS nội tuyến là bạn không đổ tất cả CSS cho trang web của mình vào đầu. Nếu bạn nội tuyến quá nhiều, tác động về hiệu suất sẽ kém hơn so với những gì bạn đã bắt đầu Vậy những phong cách còn lại thì sao?Vì vậy, giờ đây chúng ta đã thấy rằng CSS quan trọng nội tuyến có thể có tác động tích cực đến hiệu suất cho trang web của chúng ta. Chúng tôi đã xóa liên kết đến biểu định kiểu bên ngoài khỏi phần đầu tài liệu, tìm ra CSS “quan trọng” của chúng tôi là gì và đưa nó vào làm kiểu nội tuyến trong phần đầu, nhưng phần còn lại của trang vẫn cần các kiểu. Làm thế nào chúng ta có thể tạo kiểu cho phần còn lại của trang? Chúng tôi có thể lưu phần còn lại của các kiểu (không quan trọng) cho trang trong biểu định kiểu bên ngoài và trì hoãn tải xuống cho đến khi trình duyệt kết thúc công việc chặn hiển thị, như thế này ... Lưu ý rằng cũng có thể yêu cầu biểu định kiểu bên ngoài bằng JavaScript và thêm nó vào DOM. Tuy nhiên, bằng cách sử dụng một liên kết truyền thống, trình duyệt có thể lưu trữ phản hồi trong bộ nhớ cache của nó, đây là điều mà giải pháp JavaScript khó đạt được hơn. Nếu loại phương tiện in trong liên kết có nội dung lạ đối với bạn, thì tôi khuyến khích bạn đọc bài viết này, bài viết này giải thích cách thức hoạt động của phương tiện này và cách tiếp cận này thậm chí còn phù hợp hơn so với sử dụng tìm nạp trước liên kết Cùng với đó, giờ đây chúng ta có tất cả các kiểu cần thiết cho toàn bộ trang nhưng với các kiểu quan trọng được đặt bên trong và các kiểu không quan trọng được tải không đồng bộ ngay sau đó. Sự khác biệt duy nhất mà người dùng của bạn có thể nhận thấy là trang dường như tải nhanh hơn Những công cụ nào có sẵn?Hãy Trung thực. ý tưởng nội tuyến CSS quan trọng và tải trước phần còn lại có vẻ khá đơn giản nếu dự án của bạn bao gồm một hoặc hai trang. Chỉ cần thực hiện một chút điều tra để xem lớp nào hiển thị đầu tiên trên các tỷ lệ khung hình thiết bị khác nhau, nội tuyến các lớp đó và tải trước phần còn lại Nhưng thêm hàng trăm trang khác nhau và toàn bộ nhóm các nhà phát triển làm việc trên các phần khác nhau và bạn có thể nhanh chóng thấy việc theo dõi các phong cách quan trọng và không quan trọng có thể phức tạp như thế nào, nếu không muốn nói là không thể. Chúng tôi sẽ được giúp đỡ rất nhiều bởi một số công cụ ở đây Bạn có biết rằng Chrome có một công cụ để tìm mã JavaScript và CSS không được sử dụng không? Có một dự án tên là Penthouse tạo CSS quan trọng cho các trang web của bạn. Tác giả của công cụ này cũng chạy một dịch vụ trả phí trên Penthouse với tính năng tự động hóa và các tính năng khác Addy Osmani có một công cụ có tên là Critical giúp trích xuất và thêm dòng CSS đường dẫn quan trọng từ HTML. Anh ấy cũng duy trì một danh sách các công cụ khác dành cho CSS quan trọng, rất đáng để đi sâu vào Cuối cùng, công cụ cho một nhiệm vụ như vậy thực sự phụ thuộc vào khung, quy trình xây dựng và các thư viện khác mà bạn đang sử dụng để phát triển trang web của mình. Tôi khuyến khích bạn xem qua danh sách các công cụ của Addy và xem liệu có công cụ nào trong số chúng có thể hoạt động trong ngăn xếp của bạn không Giao diện người dùng của bạn có ngốn CPU của người dùng không?Khi giao diện người dùng web ngày càng phức tạp, các tính năng ngốn tài nguyên ngày càng đòi hỏi nhiều hơn từ trình duyệt. Nếu bạn quan tâm đến việc giám sát và theo dõi mức sử dụng CPU phía máy khách, mức sử dụng bộ nhớ, v.v. cho tất cả người dùng của bạn trong sản xuất, hãy thử LogRocket.LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về các chỉ số hiệu suất chính của giao diện người dùng, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, ghi nhật ký yêu cầu mạng và tự động hiển thị tất cả các lỗi |
