Theo mặc định, CSS được coi là tài nguyên chặn hiển thị, nghĩa là trình duyệt sẽ không hiển thị bất kỳ nội dung đã xử lý nào cho đến khi CSSOM được tạo. Hãy đảm bảo CSS của bạn tinh gọn, phân phối CSS nhanh nhất có thể, đồng thời sử dụng các loại nội dung nghe nhìn và truy vấn để bỏ chặn việc kết xuất.
Trong cách tạo cây hiển thị, chúng ta thấy rằng đường dẫn hiển thị quan trọng yêu cầu cả DOM và CSSOM để tạo cây hiển thị. Điều này tạo ra một ngụ ý hiệu suất quan trọng: cả HTML và CSS đều đang hiển thị tài nguyên chặn. HTML rõ ràng, vì nếu không có DOM chúng tôi sẽ không có bất cứ thứ gì để hiển thị, nhưng yêu cầu CSS có thể ít rõ ràng hơn. Điều gì sẽ xảy ra nếu chúng tôi cố gắng hiển thị một trang thông thường mà không chặn hiển thị trên CSS?
Tóm tắt
- Theo mặc định, CSS được coi là tài nguyên chặn hiển thị.
- Các loại nội dung đa phương tiện và truy vấn đa phương tiện cho phép chúng tôi đánh dấu một số tài nguyên CSS là chặn không hiển thị.
- Trình duyệt sẽ tải tất cả các tài nguyên CSS xuống, bất kể hành vi chặn hay không chặn.
Ví dụ trên cho thấy trang web của NYTimes có và không có CSS, cho thấy lý do tại sao việc hiển thị bị chặn cho đến khi có CSS---nếu không có CSS thì trang sẽ tương đối không sử dụng được. Trải nghiệm ở bên phải thường được gọi là "Đèn flash của nội dung chưa định kiểu" (FOUC). Trình duyệt chặn hiển thị cho đến khi có cả DOM và CSSOM.
CSS là một tài nguyên chặn hiển thị. Hãy chuyển API này cho ứng dụng càng sớm và càng nhanh càng tốt để tối ưu hoá thời gian hiển thị lần đầu.
Tuy nhiên, điều gì sẽ xảy ra nếu chúng tôi có một số kiểu CSS chỉ được sử dụng trong một số điều kiện nhất định, ví dụ: khi trang đang được in hoặc đang chiếu trên một màn hình lớn? Sẽ tốt hơn nếu chúng ta không phải chặn kết xuất trên các tài nguyên này.
"Các loại nội dung đa phương tiện" và "truy vấn đa phương tiện" của CSS cho phép chúng tôi giải quyết các trường hợp sử dụng sau:
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
Cụm từ tìm kiếm nội dung đa phương tiện bao gồm một loại nội dung đa phương tiện và từ 0 biểu thức trở lên kiểm tra các điều kiện của một tính năng nội dung đa phương tiện cụ thể. Ví dụ: phần khai báo biểu định kiểu đầu tiên của chúng ta không cung cấp loại nội dung đa phương tiện hoặc truy vấn, do đó áp dụng trong mọi trường hợp; tức là luôn chặn hiển thị. Mặt khác, khai báo biểu định kiểu thứ hai chỉ áp dụng khi nội dung đang được in---có thể bạn muốn sắp xếp lại bố cục, thay đổi phông chữ, v.v. và do đó khai báo biểu định kiểu này không cần chặn việc hiển thị trang khi trang được tải lần đầu tiên. Cuối cùng, khai báo biểu định kiểu mới nhất cung cấp "truy vấn đa phương tiện" được trình duyệt thực thi: nếu các điều kiện khớp, trình duyệt sẽ chặn hiển thị cho đến khi biểu định kiểu được tải xuống và xử lý.
Bằng cách sử dụng các truy vấn nội dung nghe nhìn, chúng ta có thể điều chỉnh bản trình bày theo các trường hợp sử dụng cụ thể, chẳng hạn như hiển thị so với in, cũng như theo các điều kiện động như thay đổi hướng màn hình, đổi kích thước sự kiện, v.v. Khi khai báo tài sản biểu định kiểu, hãy đặc biệt chú ý đến loại nội dung nghe nhìn và truy vấn vì chúng ảnh hưởng đáng kể đến hiệu suất quan trọng của đường dẫn hiển thị.
Hãy cùng xem xét một số ví dụ thực tế:
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- Nội dung khai báo đầu tiên là chặn hiển thị và so khớp trong mọi điều kiện.
- Nội dung khai báo thứ hai cũng là chế độ chặn hiển thị: "all" là loại mặc định nên nếu bạn không chỉ định bất kỳ loại nào, thì hệ thống sẽ ngầm đặt thành "all" (tất cả). Do đó, nội dung khai báo đầu tiên và thứ hai thực sự tương đương.
- Nội dung khai báo thứ ba có truy vấn nội dung nghe nhìn động, được đánh giá khi trang được tải. Tuỳ thuộc vào hướng của thiết bị trong khi trang đang tải, portrait.css có thể hoặc không chặn hiển thị.
- Nội dung khai báo mới nhất chỉ được áp dụng khi trang đang được in để không chặn hiển thị khi trang được tải lần đầu trong trình duyệt.
Cuối cùng, xin lưu ý rằng "chặn hiển thị" chỉ đề cập đến việc trình duyệt có phải giữ lại lượt kết xuất ban đầu của trang trên tài nguyên đó hay không. Trong cả hai trường hợp, trình duyệt vẫn tải thành phần CSS xuống, mặc dù có mức độ ưu tiên thấp hơn cho các tài nguyên không chặn.