Ngày xuất bản: 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ị, tức 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. Đảm bảo CSS của bạn gọn nhẹ, phân phối nhanh nhất có thể và sử dụng các loại và truy vấn phương tiện để bỏ chặn quá trình kết xuất.
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 để xây dựng cây kết xuất. Điều này tạo ra một tác động quan trọng đến 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 quá trình 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 phương tiện và truy vấn về phương tiện cho phép chúng tôi đánh dấu một số tài nguyên CSS là không chặn hiển thị.
- Trình duyệt tải xuống tất cả tài nguyên CSS, 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 khiến quá trình kết xuất bị chặn cho đến khi có CSS – nếu không có CSS, trang này sẽ tương đối vô dụng. 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 tạo kiểu xuất hiện chớp nhoáng). Trình duyệt sẽ chặn quá trình kết xuất cho đến khi có cả DOM và CSSOM.
CSS là một tài nguyên chặn hiển thị. Gửi đến ứng dụng càng sớm càng tốt để tối ưu hoá thời gian hiển thị đầu tiên.
Tuy nhiên, điều gì sẽ xảy ra 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ột màn hình lớn? Sẽ rất tốt nếu chúng ta không phải chặn quá trình hiển thị trên những tài nguyên này.
"Loại phương tiện" và "truy vấn phương tiện" CSS cho phép chúng ta giải quyết những trường hợp sử dụng này:
<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 hoặ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ụ: khai báo biểu định kiểu đầu tiên của chúng ta không cung cấp loại hoặc truy vấn nội dung nghe nhìn, nên nó áp dụng trong mọi trường hợp; tức là nó 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à các yếu tố quan trọng khác về thiết kế khi in. Do đó, phần khai báo biểu định kiểu này không cần chặn quá trình hiển thị trang khi trang được tải lần đầu. Cuối cùng, khai báo biểu định 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 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 cho 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 linh hoạt như thay đổi hướng màn hình, sự kiện đổi kích thước và nhiều điều kiện khác. Khi khai báo các thành phần biểu định kiểu, hãy chú ý đến loại và truy vấn nội dung nghe nhìn; chúng ảnh hưởng rất lớn đến hiệu suất của đường dẫn hiển thị quan trọng.
Hãy xem xét những 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" />
- Khai báo đầu tiên là chặn hiển thị và khớp trong mọi điều kiện.
- Khai báo thứ hai cũ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ì loại này sẽ được đặt ngầm thành"all". Do đó, nội dung khai báo thứ nhất và thứ hai thực sự tương đương nhau. - Khai báo thứ ba có một 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.csscó thể chặn hoặc không chặn quá trình hiển thị. - Tuyên bố cuối cùng chỉ được áp dụng khi trang đang được in (
"print"), vì vậy, tuyên bố này không chặn quá trình kết xuất 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ữ quá trình hiển thị 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ù có mức độ ưu tiên thấp hơn đối với các tài nguyên không chặn.