Ngày xuất bản: ngày 31 tháng 3 năm 2014
Theo mặc định, CSS được coi là một tài nguyên chặn hiển thị, có 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 xử lý tạo. Hãy đảm bảo CSS của bạn tinh gọn, phân phối 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 hiển thị.
Trong phần xây dựng cây kết xuất, chúng ta đã thấy rằng đường dẫn kết xuất quan trọng yêu cầu cả DOM và CSSOM để tạo cây kết xuất. Điều này tạo ra một ngụ ý quan trọng về hiệu suất: cả HTML và CSS đều là tài nguyên chặn hiển thị. HTML là điều hiển nhiên, vì nếu không có DOM, chúng ta sẽ không có gì để hiển thị, nhưng yêu cầu về CSS có thể ít rõ ràng hơn. Điều gì sẽ xảy ra nếu chúng ta 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à một 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 nội dung đ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 tải tất cả tài nguyên CSS xuống, bất kể hành vi chặn hay không chặn.
Ví dụ trước, cho thấy trang web của New York Times có và không có CSS, minh hoạ lý do việc kết xuất bị chặn cho đến khi có CSS – nếu không có CSS, trang này tương đối không thể sử dụng được. Trải nghiệm ở bên phải thường được gọi là Flash của nội dung không theo 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ị. Chuyển đến ứng dụng càng sớm và nhanh càng tốt để tối ưu hoá thời gian kết xuất lần đầu.
Tuy nhiên, nếu chúng ta có một số kiểu CSS chỉ được sử dụng trong một số điều kiện nhất định, chẳng hạn như khi trang đang được in hoặc được chiếu lên màn hình lớn thì sao? Thật tuyệt nếu chúng ta không phải chặn hiển thị trên các tài nguyên này.
"Loại nội dung đa phương tiện" và "truy vấn nội dung đa phương tiện" CSS cho phép chúng ta 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)" />
Truy vấn nội dung nghe nhìn bao gồm một loại nội dung nghe nhìn và không có hoặc có nhiều biểu thức để kiểm tra các điều kiện của các tính năng nội dung nghe nhì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 đó, nó sẽ áp dụng trong mọi trường hợp; tức là luôn chặn hiển thị. Mặt khác, nội dung khai báo của trang 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à cân nhắc các yếu tố thiết kế quan trọng khác cho bản in. Do đó, phần khai báo của trang này không cần chặn việc hiển thị trang khi tải lần đầu. Cuối cùng, nội dung khai báo trang kiểu cuối cùng cung cấp một "truy vấn nội dung nghe nhìn" do trình duyệt thực thi: nếu các điều kiện khớp, trình duyệt sẽ chặn quá trình kết xuất cho đến khi tải trang kiểu xuống và xử lý.
Bằng cách sử dụng truy vấn nội dung đa phương tiện, chúng ta có thể điều chỉnh bản trình bày cho phù hợp với 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ư các điều kiện động như thay đổi hướng màn hình, sự kiện đổi kích thước, v.v. Khi khai báo các thành phần của trang kiểu, hãy chú ý đến loại nội dung đa phương tiện và truy vấn; các thành phần này ảnh hưởng rất lớn đến hiệu suất của đường dẫn kết xuất quan trọng.
Hãy xem xét các ví dụ sau:
<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 kết xuất và khớp trong mọi điều kiện.
- Khai báo thứ hai cũng áp dụng cho tính năng chặn hiển thị:
"all"là loại mặc định, vì vậy, nếu bạn không chỉ định một loại, thì hệ thống sẽ ngầm đặt thành"all". Do đó, khai báo đầu tiên và khai báo 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 tải. Tuỳ thuộc vào hướng của thiết bị trong khi trang đang tải,
portrait.csscó thể có hoặc không chặn hiển thị. - Phần khai báo gần nhất chỉ được áp dụng khi trang đang được in (
"print") để không chặn lượt 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 kết xuất" chỉ đề cập đến việc trình duyệt có phải giữ lại quá trình 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 tài sản CSS xuống, mặc dù mức độ ưu tiên thấp hơn đối với các tài nguyên không chặn.