Xây dựng Mô hình đối tượng

Ilya Grigorik
Ilya Grigorik

Trước khi có thể hiển thị trang, trình duyệt cần xây dựng cây DOM và CSSOM. Do đó, chúng tôi cần đảm bảo phân phối cả HTML và CSS cho trình duyệt nhanh nhất có thể.

Tóm tắt

  • Byte → ký tự → mã thông báo → nút → mô hình đối tượng.
  • Mã đánh dấu HTML sẽ được chuyển đổi thành Mô hình đối tượng tài liệu (DOM); mã đánh dấu CSS sẽ được chuyển đổi thành Mô hình đối tượng CSS (CSSOM).
  • DOM và CSSOM là các cấu trúc dữ liệu độc lập.
  • Bảng điều khiển Hiệu suất Công cụ của Chrome cho nhà phát triển cho phép chúng tôi thu thập và kiểm tra chi phí xây dựng và xử lý của DOM và CSSOM.

Mô hình đối tượng tài liệu (DOM)

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

Thử nào

Hãy bắt đầu với trường hợp đơn giản nhất có thể: một trang HTML thuần tuý có văn bản và một hình ảnh duy nhất. Trình duyệt xử lý trang này như thế nào?

Quy trình xây dựng DOM

  1. Chuyển đổi: Trình duyệt đọc các byte thô của HTML bên ngoài ổ đĩa hoặc mạng, rồi chuyển đổi thành các ký tự riêng lẻ dựa trên phương thức mã hoá đã chỉ định của tệp (ví dụ: UTF-8).
  2. Tokenization (Mã hoá kỹ thuật số): Trình duyệt chuyển đổi các chuỗi ký tự thành các mã thông báo riêng biệt – như được chỉ định theo tiêu chuẩn HTML5 của W3C, chẳng hạn như "<html>", "<body>" và các chuỗi khác trong dấu ngoặc nhọn. Mỗi mã thông báo có một ý nghĩa đặc biệt và bộ quy tắc riêng.
  3. Tìm lỗi mã nguồn: Các mã thông báo đã phát sẽ được chuyển đổi thành "đối tượng", giúp xác định các thuộc tính và quy tắc của chúng.
  4. Xây dựng DOM: Cuối cùng, vì mã đánh dấu HTML xác định mối quan hệ giữa các thẻ (một số thẻ nằm trong các thẻ khác) nên các đối tượng được tạo sẽ được liên kết trong một cấu trúc dữ liệu dạng cây cũng như nắm bắt mối quan hệ mẹ con được xác định trong mã đánh dấu ban đầu: đối tượng HTML là thành phần mẹ của đối tượng body, đối tượng body là đối tượng mẹ của đối tượng paragraph, v.v.

cây DOM

Kết quả cuối cùng của toàn bộ quá trình này là Mô hình đối tượng tài liệu (DOM) trên trang đơn giản của chúng tôi. Trình duyệt sẽ sử dụng mô hình này cho tất cả các quá trình xử lý tiếp theo đối với trang.

Mỗi khi xử lý mã đánh dấu HTML, trình duyệt sẽ trải qua tất cả các bước nêu trên: chuyển đổi byte thành ký tự, xác định mã thông báo, chuyển đổi mã thông báo thành nút và tạo cây DOM. Toàn bộ quá trình này có thể mất một chút thời gian, đặc biệt là nếu chúng tôi có một lượng lớn HTML cần xử lý.

Theo dõi quá trình xây dựng DOM trong Công cụ cho nhà phát triển

Nếu mở Công cụ của Chrome cho nhà phát triển và ghi lại tiến trình trong khi trang được tải, bạn có thể thấy thời gian thực tế cần thiết để thực hiện bước này — trong ví dụ ở trên, chúng tôi mất khoảng 5 mili giây để chuyển đổi một đoạn HTML thành cây DOM. Đối với trang lớn hơn, quá trình này có thể mất nhiều thời gian hơn đáng kể. Khi tạo ảnh động mượt mà, việc này có thể dễ dàng trở thành nút thắt cổ chai nếu trình duyệt phải xử lý một lượng lớn HTML.

Cây DOM ghi lại các thuộc tính và mối quan hệ của mã đánh dấu tài liệu, nhưng không cho chúng ta biết phần tử sẽ trông như thế nào khi được hiển thị. Đó là trách nhiệm của CSSOM.

Mô hình đối tượng CSS (CSSOM)

Trong lúc đang tạo DOM của trang đơn giản, trình duyệt gặp phải một thẻ liên kết trong phần đầu của tài liệu tham chiếu đến một biểu định kiểu CSS bên ngoài: style.css. Dự đoán rằng cần có tài nguyên này để hiển thị trang, công cụ này sẽ ngay lập tức gửi một yêu cầu cho tài nguyên này và yêu cầu này sẽ trả về cùng nội dung sau:

body {
  font-size: 16px;
}
p {
  font-weight: bold;
}
span {
  color: red;
}
p span {
  display: none;
}
img {
  float: right;
}

Chúng tôi có thể đã khai báo các kiểu của mình trực tiếp trong mã đánh dấu HTML (nội tuyến), nhưng việc giữ cho CSS độc lập với HTML cho phép chúng tôi coi nội dung và thiết kế là những mối quan ngại riêng biệt: nhà thiết kế có thể làm việc trên CSS, nhà phát triển có thể tập trung vào HTML, v.v.

Giống như HTML, chúng ta cần chuyển đổi các quy tắc CSS đã nhận thành nội dung mà trình duyệt có thể hiểu và xử lý được. Do đó, chúng tôi lặp lại quy trình HTML, nhưng đối với CSS thay vì HTML:

Các bước xây dựng CSSOM

Các byte CSS được chuyển đổi thành ký tự, sau đó đến mã thông báo, rồi đến nút và cuối cùng, chúng được liên kết thành một cấu trúc cây được gọi là "Mô hình đối tượng CSS" (CSSOM):

Cây CSSOM

Tại sao CSSOM có cấu trúc dạng cây? Khi tính toán tập hợp kiểu cuối cùng cho bất kỳ đối tượng nào trên trang, trình duyệt sẽ bắt đầu bằng quy tắc chung nhất áp dụng cho nút đó (ví dụ: nếu là phần tử con của một phần tử nội dung, thì tất cả các kiểu nội dung sẽ được áp dụng) và sau đó tinh chỉnh đệ quy các kiểu được tính toán bằng cách áp dụng các quy tắc cụ thể hơn; tức là quy tắc "phân tầng".

Để cụ thể hơn, hãy xem xét cây CSSOM ở trên. Mọi văn bản chứa trong thẻ <span> được đặt trong phần tử nội dung, có kích thước phông chữ 16 pixel và có văn bản màu đỏ — lệnh font-size đổ xuống từ body đến span. Tuy nhiên, nếu thẻ span là con của thẻ phân đoạn (p), thì nội dung của thẻ đó sẽ không xuất hiện.

Ngoài ra, xin lưu ý rằng cây trên không phải là cây CSSOM hoàn chỉnh và chỉ hiển thị các kiểu mà chúng tôi quyết định ghi đè trong biểu định kiểu của mình. Mỗi trình duyệt cung cấp một tập hợp kiểu mặc định còn được gọi là "kiểu tác nhân người dùng" – đó là những gì chúng ta thấy khi không cung cấp bất kỳ kiểu nào của mình và các kiểu của chúng ta chỉ ghi đè những kiểu mặc định này.

Để tìm hiểu thời gian xử lý CSS, bạn có thể ghi lại tiến trình trong DevTools và tìm sự kiện "Recalculate Style" (Tính toán lại kiểu): không giống như phân tích cú pháp DOM, dòng thời gian không hiển thị mục "Phân tích cú pháp CSS" riêng biệt mà ghi lại quá trình phân tích cú pháp và tạo cây CSSOM, cộng với việc tính toán đệ quy các kiểu được tính toán trong một sự kiện này.

Theo dõi quá trình tạo CSSOM trong Công cụ cho nhà phát triển

Biểu định kiểu nhỏ của chúng tôi mất khoảng 0, 6 mili giây để xử lý và ảnh hưởng đến 8 phần tử trên trang – không nhiều, nhưng một lần nữa là không miễn phí. Tuy nhiên, 8 phần tử đến từ đâu? CSSOM và DOM là các cấu trúc dữ liệu độc lập! Hoá ra, trình duyệt đang ẩn một bước quan trọng. Tiếp theo, hãy cùng nói về cây kết xuất liên kết DOM và CSSOM với nhau.

Ý kiến phản hồi