Hướng dẫn cho người mới bắt đầu về 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êngiao hàng cuối cùng của một trang web. Việc truyền dữ liệu và đường dẫn kết xuất của trình duyệt đòi hỏi 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 không quá quan trọng, nhưng đó là một chủ đề có giá trị để nghiên cứu nếu bạn muốn tìm hiểu thêm về cách trình duyệt hiển thị mã vào một trang web đang hoạt động.

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

Xem xét mức độ ưu tiên kiểu CSS

Xem xét mức độ ưu tiên kiểu CSS

Tôi nghĩ rằng Cascading Style Sheet (CSS) là ngôn ngữ đơn giản nhất so với các ngôn ngữ liên quan đến web khác, vì vậy … Đọc thêm

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. Các kiểu này có thể là các phần tử gốc hoặc có các phần tử con lồng nhau.

CSSOM rất giống với DOM trong HTML, là viết tắt của Document Object Model. 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 để hiển thị đúng một trang web. Tất cả những 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 để hiển thị đú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áy tính rằng tất cả các đoạn văn trong .main-content div phải có thêm chiều cao dòng.

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

CSSOM giúp trình duyệt dễ dàng hơn hiển thị các kiểu trên trang. Toàn bộ mọi thứ đều rất kỹ thuật nhưng bạn cần 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 để diễn giải và hiển thị các trang web. Sơ đồ dưới đây là từ hướng dẫn Cơ bản về web dành cho nhà phát triển của Google và giải thích cách DOM được hiển thị trong trình duyệt web.

Kết xuất mô hình đối tượng tài liệu

Trong cả DOM & CSSOM, tất cả thông tin đều chuyển đổi từ byte thành bản đồ kỹ thuật số hiển thị mọi phần tử trong tài liệu web. Quy 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ể chạm vào một phần tử liên kết tham chiếu đến một biểu định kiểu bên ngoài.
  3. Sau đó, bảng định kiểu CSS này là phân tích thành một bản đồ bằng cách sử dụng thông số kỹ thuật của Mô hình đối tượng CSS.
  4. Mã kết quả sau đó có thể là áp dụng cho các phần tử trong DOM.

Tất cả những điều này xảy ra rất nhanh chóng và xảy ra với mọi yêu cầu trang đơn. Sơ đồ khác dưới đây giới thiệu một cấu trúc cây mẫu của CSSOM.

Hiển thị mô hình đối tượng CSS

Lưu ý cách một số thuộc tính trong sơ đồ có màu chữ xám nhạt hơn. Các thuộc tính này là thừa kế từ cha mẹ. Vì phần nội dung có kích thước phông chữ cụ thể, tất cả các phần tử bên trong phần nội dung cũng nhận đượ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 sau đó có thể là được hiểu là các nút bằng 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 toàn bộ trang nên được xây dựng.

CSSOM và DOM hoàn toàn các mô hình dữ liệu riêng biệt, do đó họ phân tích cú pháp riêng 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: tạo cho trình duyệt một cấu trúc để hiển thị và xác định các phần 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ả kết xuất xảy ra trên chương trình phụ trợ, bạn thực sự không cần phải lo lắng nhiều về CSSOM tree. Nhưng nó có thể hữu ích để hiểu cách 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 phần tử trên trang sẽ trông như thế nào. Nếu trang được tải trước CSSOM, trước tiên nó sẽ xuất hiện dưới dạng HTML thuần túy, sau đó là các kiểu vài giây sau đó.

Các trình duyệt đặc biệt tránh điều đó vì nó sẽ gây nhầm lẫn cho người dùng cuối. Và điều đáng chú ý là CSSOM không thể lưu vào bộ nhớ đệm; 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 vào bộ nhớ đệm để tải nội dung 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 thực sự khuyên bạn nên đọc bài viết này để tìm hiểu thêm về các 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 thác tự nhiên tài nguyên mà được tải song song.

Có thể thao tác CSSOM bằng JavaScript vì nó là một API JS về mặt kỹ thuật. 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à để tự tìm hiểu thêm về cách các trang web thực sự hoạt động.

Có rất nhiều điều chúng tôi coi là đương nhiên để giữ cho Internet hoạt động trơn tru. Khi bạn hiểu thêm một chút về toàn bộ quy 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 đạt được một 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 như thế nào đến các trang web. Ở đó không phải thao tác nhiều trong CSSOM, vì vậy nó khác với DOM một chút.

Tuy nhiên, nó 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 nó hoạt động. Nếu bạn đang muốn tìm hiểu thêm, đây là một số bài đăng tôi đề xuất:


Bạn đang xem : Hướng dẫn cho người mới bắt đầu về mô hình đối tượng CSS (CSSOM)

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *