1,929 lượt đọc

10 mẹo hiệu suất CSS hàng đầu

từ tác giả Nikita Starichenko5m2022/11/14

dài quá đọc không nổi

Chào mọi người! Có rất nhiều mẹo và thủ thuật về tạo kiểu CSS. Nhưng không phải trong bài viết này. Hôm nay tôi muốn nói về cách sử dụng CSS hiệu quả hơn và làm cho

Companies Mentioned

featured image - 10 mẹo hiệu suất CSS hàng đầu

Chào mọi người! Có rất nhiều mẹo và thủ thuật về tạo kiểu CSS. Nhưng không phải trong bài viết này. Hôm nay tôi muốn nói về cách sử dụng CSS hiệu quả hơn và làm cho nền tảng của bạn nhanh hơn!

1. Bộ chọn đơn giản

CSS có một loạt các tùy chọn mã hóa linh hoạt, bạn có thể sử dụng để nhắm mục tiêu các phần tử HTML để tạo kiểu. Trong nhiều năm, các chuyên gia đã khuyên các nhà phát triển nên viết các bộ chọn đơn giản để giảm tải cho trình duyệt và giữ cho mã sạch và đơn giản. Ngay cả những bộ chọn CSS phức tạp nhất cũng mất mili giây để phân tích cú pháp, nhưng việc giảm độ phức tạp sẽ giảm kích thước tệp và hỗ trợ phân tích cú pháp trình duyệt

Đừng:

 main > div.blog-section + article > * { /* Code here */ }

LÀM:

 .hero-image { /* Code here */ }

2. CSS nội tuyến quan trọng

Bạn có thể nội dòng các quy tắc CSS quan trọng. Điều này cải thiện hiệu suất bằng cách:

Xác định các kiểu thiết yếu được sử dụng bởi các phần tử trong màn hình đầu tiên (những kiểu hiển thị khi tải trang)
Nội tuyến CSS quan trọng đó vào <style> trong <head> của bạn
Đang tải không đồng bộ CSS còn lại để tránh bị chặn hiển thị. Điều này có thể được thực hiện bằng cách tải biểu định kiểu theo kiểu “in” mà trình duyệt ưu tiên thấp hơn. Sau đó, JavaScript chuyển nó sang kiểu phương tiện “tất cả” khi trang đã tải xong.

 <style> /* critical styles */ body { font-family: sans-serif; color: #111; } </style> <!-- load remaining styles --> <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> <noscript> <link rel="stylesheet" href="/css/main.css"> </noscript>

3. Tránh `@import`

@import at-rule cho phép bao gồm bất kỳ tệp CSS nào trong tệp khác. Điều này xuất hiện một cách hợp lý để tải các thành phần và phông chữ nhỏ hơn. Nhưng nó không phải như vậy.

Quy tắc @import có thể được lồng vào nhau để trình duyệt phải tải và phân tích cú pháp từng tệp theo chuỗi.

Nhiều <link> trong HTML sẽ tải các tệp CSS song song, điều này hiệu quả hơn đáng kể - đặc biệt là khi sử dụng HTTP / 2.

Đừng:

 /* main.css */ @import url("style1.css"); @import url("style2.css"); @import url("style3.css");

LÀM:

 <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css">

4. Tải trước các tệp CSS

Thẻ <link> cung cấp thuộc tính tải trước tùy chọn có thể bắt đầu tải xuống ngay lập tức thay vì đợi tham chiếu thực trong HTML.

 <!-- preload styles --> <link rel="preload" href="/css/main.css" as="style" /> <!-- some code --> <!-- load preloaded styles --> <link rel="stylesheet" href="/css/main.css" />

5. Kết xuất lũy tiến

Thay vì sử dụng một tệp CSS trên toàn trang web, kết xuất lũy tiến là một kỹ thuật xác định các biểu định kiểu riêng lẻ cho các thành phần riêng biệt. Mỗi thành phần được tải ngay lập tức trước khi một thành phần được tham chiếu trong HTML.

Mỗi <link> vẫn chặn hiển thị, nhưng trong thời gian ngắn hơn, vì tệp nhỏ hơn. Trang có thể sử dụng sớm hơn, vì mỗi thành phần hiển thị theo trình tự; đầu trang có thể được xem trong khi tải nội dung còn lại.

 <head> <!-- core styles used across components --> <link rel='stylesheet' href='base.css' /> </head> <body> <!-- header component --> <link rel='stylesheet' href='header.css' /> <header>...</header> <!-- primary content --> <link rel='stylesheet' href='content.css' /> <main> <!-- form styling --> <link rel='stylesheet' href='form.css' /> <form>...</form> </main> <!-- header component --> <link rel='stylesheet' href='footer.css' /> <footer>...</footer> </body>

6. Sử dụng kết xuất truy vấn phương tiện

Một kết hợp và rút gọn duy nhất sẽ mang lại lợi ích cho hầu hết các trang web, nhưng các trang web yêu cầu số lượng đáng kể kiểu màn hình lớn hơn có thể chia nhỏ các tệp CSS và tải bằng truy vấn phương tiện.

 <!-- core styles loaded on all devices --> <link rel="stylesheet" href="core.css"> <!-- served to screens at least 40em wide --> <link rel="stylesheet" media="(min-width: 40em)" href="40em.css"> <!-- served to screens at least 80em wide --> <link rel="stylesheet" media="(min-width: 80em)" href="80em.css">

7. Thông qua hình ảnh SVG

Đồ họa vectơ có thể mở rộng (SVG) thường được sử dụng cho biểu trưng, biểu đồ, biểu tượng và sơ đồ đơn giản hơn. Thay vì xác định màu của từng pixel như ảnh bitmap JPG và PNG, SVG xác định các hình dạng như đường thẳng, hình chữ nhật và hình tròn trong XML.

Các SVG đơn giản hơn nhỏ hơn các bitmap tương đương và có thể chia tỷ lệ vô hạn mà không làm mất độ nét. SVG có thể được nội tuyến trực tiếp trong mã CSS làm hình nền. Điều này có thể lý tưởng cho các biểu tượng nhỏ hơn, có thể tái sử dụng và tránh các yêu cầu HTTP bổ sung.

Ví dụ SVG:

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /> <svg>

Ví dụ sử dụng SVG:

 .mysvgbackground { background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat; }

8. Tạo kiểu SVG với CSS

SVG có thể được nhúng trực tiếp trong tài liệu HTML. Điều này thêm các nút SVG trực tiếp vào DOM. Do đó, tất cả các thuộc tính kiểu SVG có thể được áp dụng bằng cách sử dụng CSS.

SVG trong DOM:

 <body> <svg class="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" /> <svg> </body>

Kiểu SVG:

 circle { stroke-width: 1em; } .mysvg { stroke-width: 5px; stroke: #f00; fill: #ff0; }

Khối lượng mã SVG nhúng được giảm xuống và các kiểu CSS có thể được sử dụng lại hoặc làm động nếu cần.

Lưu ý rằng việc sử dụng SVG trong <img> hoặc làm hình nền CSS có nghĩa là chúng được tách khỏi DOM và kiểu CSS sẽ không có hiệu lực.

9. Tránh mã hóa Base64

Bạn có thể mã hóa hình ảnh thành chuỗi base64, mà bạn có thể sử dụng làm URI dữ liệu trong thẻ <img> HTML và nền CSS.

Điều này làm giảm số lượng yêu cầu HTTP, nhưng nó gây hại cho hiệu suất CSS:

chuỗi base64 có thể lớn hơn 30% so với chuỗi nhị phân tương đương của chúng.
trình duyệt phải giải mã chuỗi trước khi có thể sử dụng hình ảnh và
việc thay đổi một pixel hình ảnh sẽ làm mất hiệu lực của toàn bộ tệp CSS.

Chỉ xem xét mã hóa base64 nếu bạn đang sử dụng hình ảnh rất nhỏ, không thường xuyên thay đổi trong đó chuỗi kết quả không dài hơn đáng kể so với URL.

Đừng:

 .background { background-image: url('data:image/jpg;base64,ABC123...'); }

LÀM:

 .svgbackground { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>'); }

10. Mẹo ngắn

Thay thế Hình ảnh bằng Hiệu ứng CSS - xác định “hình ảnh” bằng mã CSS sử dụng băng thông ít hơn đáng kể và dễ dàng sửa đổi hoặc tạo hoạt ảnh hơn sau này.
Sử dụng các kỹ thuật bố cục hiện đại - Flexbox và Grid .
Sử dụng CSS Animations - chuyển tiếp và hoạt ảnh sẽ luôn nhanh hơn JavaScript.
Tránh thuộc tính đắt tiền - một số CSS yêu cầu xử lý nhiều hơn các CSS khác.
1. border-radius
2. box-shadow
3. text-shadow
4. opacity
5. transform
6. filter
7. position: fixed
8. backdrop-filter
9. background-blend-mode