Ngày xuất bản: 31 tháng 3 năm 2014
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 nào đã xử lý cho đến khi CSSOM được 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 rất rõ ràng, vì nếu không có DOM, chúng tôi sẽ không có bất kỳ nội dung nào để 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 ta cố gắng hiển thị một trang thông thường mà không chặn việc hiển thị trên CSS?
Tóm tắt
- Theo mặc định, CSS được coi là tài nguyên chặn kết xuất.
- 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 ta đánh dấu một số tài nguyên CSS là không chặn kết xuất.
- 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 of Unstyled Content (FOUC) (Nội dung chưa được định kiểu xuất hiện trong giây lát). 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 gửi URL này đến khách hàng sớm nhất có thể để tối ưu hoá thời gian hiển thị đầu tiên.
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 trên một màn hình lớn? Thật tuyệt nếu chúng ta không phải chặn việc kết xuất trên các tài nguyên này.
"Loại nội dung đa phương tiện" CSS và "truy vấn phương tiện" cho phép chúng tôi xử lý 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 đa phương tiện và không hoặc nhiều biểu thức để kiểm tra điều kiện của các tính năng nội dung đa phương tiện cụ thể. Ví dụ: nội dung khai báo của trang kiểu đầu tiên không cung cấp loại nội dung nghe nhìn hoặc truy vấn, vì vậy, nội dung khai báo này áp dụng trong mọi trường hợp; tức là nội dung khai báo này luôn chặn hiển thị. Mặt khác, phần 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à những yếu tố quan trọng khác cần cân nhắc về thiết kế cho báo 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, khai báo biểu định kiểu cuối cùng cung cấp "truy vấn phương tiện", được thực thi bởi trình duyệt: nếu các điều kiện trùng 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 về 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 về hướng màn hình, thay đổi kích thước sự kiện, 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 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 đó, nội dung khai báo đầu tiên và thứ hai thực sự tương đương nhau. - Khai báo thứ ba có một truy vấn đa phương tiện động và truy vấn này đượ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.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 thành phần CSS xuống, mặc dù có mức độ ưu tiên thấp hơn đối với các tài nguyên không chặn.