Hướng dẫn cho người mới bắt đầu mô hình đối tượng CSS (CSSOM)

Rất nhiều điều xảy ra giữa yêu cầu HTTP đầu tiên và giao hàng cuối cùng của một trang web. Truyền dữ liệu và đường truyền kết xuất của trình duyệt yêu cầu rất nhiều công nghệ khác nhau, một trong số đó là Mô hình đối tượng CSS, hoặc là CSSOM.

Mô hình đối tượng CSS lấy mã CSS và hiển thị mọi bộ chọn thành một cấu trúc cây để phân tích cú pháp dễ dàng hơn. Có lẽ việc các nhà phát triển hiểu đầy đủ về khái niệm này là không quan trọng, nhưng đây là một chủ đề đáng để nghiên cứu nếu bạn muốn tìm hiểu thêm về làm thế nào trình duyệt kết xuất mã vào một trang web làm việc.

Trong bài đăng này, tôi sẽ trình bày những điều cơ bản của Mô hình Đối tượng CSS và cho bạn thấy cách thức hoạt động của nó.

CSSOM là gì?

Thuật ngữ Mô hình đối tượng CSS mô tả một bản đồ của tất cả các bộ chọn CSS và các thuộc tính có liên quan cho mỗi bộ chọn. Những phong cách này có thể là các yếu tố gốc hoặc có con lồng nhau.

CSSOM rất giống với DOM trong HTML, viết tắt của Mô hình Đối tượng Tài liệu. Cả hai đều là một phần của đường dẫn kết xuất quan trọng đó là một loạt các bước phải xảy ra kết xuất đúng một trang web. Tất cả các quá trình này xảy ra tự động, đằng sau hậu trường.

Vậy tại sao CSSOM lại quan trọng? Đó là bản đồ được trình duyệt sử dụng để kết xuất đúng kiểu CSS trên một trang web. Không có cách nào dễ dàng để nói với một máy tính rằng tất cả các đoạn trong một .Nội dung chính div phải có thêm chiều cao dòng.

Giải pháp là Mô hình đối tượng CSS vạch ra tất cả các yếu tố và tính chất từ mã CSS của bạn.

CSSOM giúp trình duyệt dễ dàng hơn kết xuất kiểu trên trang. Toàn bộ điều này rất kỹ thuật nhưng đáng để hiểu một chút về quy trình, đặc biệt nếu bạn xây dựng trang web.

Làm thế nào nó hoạt động

Cả DOM và CSSOM đều được sử dụng rộng rãi bởi tất cả các trình duyệt web để giải thích và kết xuất các trang web. Sơ đồ bên dưới là từ hướng dẫn Cơ bản về Web của Google Developers và giải thích cách DOM được hiển thị trong trình duyệt web.

Trong cả DOM & CSSOM, tất cả thông tin là chuyển đổi từ byte thành bản đồ số mà kết xuất mọi yếu tố trong một tài liệu web. Quá trình hoạt động như sau:

1. Trình duyệt tải xuống HTML cho một trang web.
2. Trong khi xử lý HTML, trình phân tích cú pháp có thể va vào một phần tử liên kết tham khảo biểu định kiểu bên ngoài.
3. Biểu định kiểu CSS này là phân tích thành bản đồ sử dụng thông số kỹ thuật mô hình đối tượng CSS.
4. Mã kết quả sau đó có thể là áp dụng cho các thành phần trong DOM.

Tất cả điều này xảy ra rất nhanh, và xảy ra với mỗi yêu cầu trang. Sơ đồ khác dưới đây giới thiệu một cấu trúc cây ví dụ của CSSOM.

Lưu ý cách một số thuộc tính trong sơ đồ có màu phông chữ màu xám nhạt hơn. Những tính chất này là được thừa hưởng từ cha mẹ. Vì cơ thể có kích thước phông chữ cụ thể, tất cả các yếu tố trong cơ thể cũng có kích thước phông chữ đó trừ khi nó bị ghi đè.

Chuỗi HTML và CSS là chuyển đổi thành mã thông báo mà sau đó có thể là được hiểu là các nút bởi trình duyệt. Các nút này giống như các đối tượng trong cấu trúc cây xác định cách xây dựng toàn bộ trang.

CSSOM và DOM hoàn toàn mô hình dữ liệu riêng biệt, do đó, họ phân tách riêng biệt của nhau. Nhưng cả hai đều có cấu trúc cây tương tự, và cả hai đều phục vụ cùng một mục đích: cung cấp cho trình duyệt một cấu trúc để kết xuất và xác định các yếu tố khác nhau trên trang.

Tại sao các nhà phát triển web nên quan tâm

Vì tất cả các kết xuất xảy ra vào cuối, bạn thực sự không cần phải lo lắng nhiều về cây CSSOM. Nhưng nó có thể hữu ích để hiểu làm thế nào nó hoạt động.

Một điều cần nhớ là CSSOM phải được tải đầy đủ trước khi trang web sẽ được hiển thị, vì nó sẽ xác định mọi yếu tố trên trang sẽ trông như thế nào. Nếu trang được tải trước CSSOM, nó sẽ xuất hiện dưới dạng HTML đơn giản, theo sau là các kiểu sau vài giây.

Các trình duyệt đặc biệt tránh điều đó bởi vì nó sẽ gây nhầm lẫn cho người dùng cuối. Và đáng chú ý là CSSOM không thể lưu trữ; nó phải là được tạo lại trên mỗi trang.

Các tệp CSS thực tế có thể được lưu trong bộ nhớ cache để tải tài sản nhanh hơn nhưng hiển thị một trang trong trình duyệt luôn yêu cầu chạy trình phân tích cú pháp CSSOM. Điều này cũng có nghĩa là JavaScript có thể có tác động tiêu cực đến kết xuất và hiệu suất.

Tôi đặc biệt khuyên bạn nên đọc bài viết này để tìm hiểu thêm về tài nguyên CSS / JS bên ngoài và thời gian tải của chúng.

Cách tốt nhất để tối ưu hóa trang web của bạn là tạo ra một thác tự nhiên tài nguyên được tải song song.

Có thể thao tác CSSOM bằng JavaScript vì về mặt kỹ thuật nó là API API. Nhưng nó không phục vụ nhiều mục đích so với thao tác JavaScript DOM.

Lý do lớn hơn để tìm hiểu về CSSOM là để giáo dục thêm về cách các trang web thực sự hoạt động.

Có rất nhiều điều chúng ta coi là giữ cho Internet hoạt động trơn tru. Khi bạn hiểu thêm một chút về toàn bộ quá trình, bạn có thể hình dung toàn bộ mọi thứ kết hợp với nhau như thế nào và hy vọng sẽ đạt được sự đánh giá cao về sự tồn tại của World Wide Web.

Đọc thêm

Tôi hy vọng phần giới thiệu này có thể cung cấp cho bạn một ý tưởng vững chắc về Mô hình Đối tượng CSS là gì và nó ảnh hưởng đến các trang web như thế nào. Ở đó không có nhiều thao tác trong CSSOM, vì vậy nó khác một chút so với DOM.

Tuy nhiên, đây vẫn là một công nghệ quan trọng trong phát triển web và nó sẽ làm rõ các khía cạnh chính của kết xuất trình duyệt.

Có nhiều tài nguyên khác thảo luận về CSSOM và cách thức hoạt động của nó. Nếu bạn đang muốn tìm hiểu thêm, đây là một số bài viết tôi khuyên bạn nên:

• Tổng quan về mô hình đối tượng CSS
• Khám phá CSSOM: Tạo phân tích đối tượng CSS
• Những gì mọi nhà phát triển Frontend nên biết về kết xuất trang web