CSSOM = CSS Object Model (Mô hình đối tượng CSS)
Cũng giống như DOM, CSSOM là giao diện (programming interface) để tương tác với CSS styles. CSSOM cùng với DOM được trình duyệt sử dụng cho việc hiển thị các trang web.
CSSOM ánh xạ các rule trong một file stylesheet với các thành phần tương ứng trên trang web mà cần phải style. Có thể coi tập hợp ánh xạ của các node với style tương ứng trên một trang web là một Mô hình đối tượng CSS.
CSSOM là một thành phần không thể thiếu trong quá trình Browser render ra một trang web. Nhưng tin tốt là, bạn không cần phải hiểu rõ cách hoạt động của CSSOM để có thể tối ưu tốc độ load trang. Bạn chỉ cần nhớ vài điều sau đây:
- CSSOM block việc render các thành phần khác.
- CSSOM được build với mỗi lần bạn load một trang mới.
- Có một mối liên hệ giữa CSS và JavaScript được trang web load về.
Chúng ta hãy đi nhanh qua lần lượt các điểm trên…
1. CSSOM block việc render các thành phần khác
Tất cả CSS đều là render blocking (nghĩa là không hiện gì lên trang web cho đến khi đụng đến CSS).
Lý do cho việc này là vì nếu browser hiển thị nội dung trước khi CSS được xử lý thì tất cả các trang bạn duyệt đều không có style, và một lát sau thì nó lại trở thành có style, và điều này gây ra trải nghiệm kém cho người dùng. Trang web sẽ trông thật tệ.
2. CSSOM được build với mỗi lần bạn load một trang mới
Có vẻ điều này không thật hiển nhiên lắm, tuy nhiên nó lại rất quan trọng. Nó cũng có nghĩa là khi CSS được cache thì CSSOM không cần phải build một lần nữa.
3. Có một mối liên hệ giữa CSS và JavaScript được trang web load về
Xử lý JavaScript có thể block việc build ra CSSOM, và bởi vì trang web chưa được hiển thị khi chưa xử lý xong CSS, nên điều đó có thể làm chậm quá trình hiển thị web, người dùng sẽ phải nhìn thấy một trang web trắng tinh lâu hơn họ mong đợi. Để tránh tình trạng này, CSS cần phải đặt trước JavaScript.
Đam mê Code 