Cây CSSOM và DOM được kết hợp thành một cây hiển thị, sau đó được dùng để tính toán bố cục của từng phần tử hiển thị và đóng vai trò là dữ liệu đầu vào cho quá trình vẽ hiển thị các pixel trên màn hình. Việc tối ưu hoá từng bước này rất quan trọng để đạt được hiệu suất kết xuất tối ưu.
Trong phần trước về cách xây dựng mô hình đối tượng, chúng tôi đã xây dựng các cây DOM và CSSOM dựa trên dữ liệu đầu vào HTML và CSS. Tuy nhiên, cả hai đều là đối tượng độc lập ghi lại nhiều khía cạnh của tài liệu: một đối tượng mô tả nội dung còn đối tượng còn lại mô tả các quy tắc định kiểu cần được áp dụng cho tài liệu. Làm cách nào để chúng ta hợp nhất cả hai và để trình duyệt hiển thị các pixel trên màn hình?
Tóm tắt
- Cây DOM và CSSOM kết hợp để tạo thành cây hiển thị.
- Cây hiển thị chỉ chứa các nút cần thiết để kết xuất trang.
- Bố cục tính toán vị trí và kích thước chính xác của từng đối tượng.
- Bước cuối cùng là vẽ, sử dụng cây kết xuất cuối cùng và hiển thị các pixel lên màn hình.
Trước tiên, trình duyệt kết hợp DOM và CSSOM vào "cây hiển thị", ghi lại tất cả nội dung DOM hiển thị trên trang và tất cả thông tin kiểu CSSOM cho mỗi nút.
Để tạo cây hiển thị, trình duyệt sẽ thực hiện gần như các bước sau:
Bắt đầu từ gốc của cây DOM, truyền tải từng nút hiển thị.
- Một số nút không hiển thị (ví dụ: thẻ tập lệnh, thẻ meta, v.v.) và bị bỏ qua vì không được phản ánh trong kết quả được hiển thị.
- Một số nút bị ẩn qua CSS và cũng bị bỏ qua khỏi cây kết xuất; ví dụ: nút span bị thiếu trong cây hiển thị vì chúng ta có một quy tắc rõ ràng đặt thuộc tính "display: none" trên đó.
Đối với mỗi nút hiển thị, hãy tìm các quy tắc CSSOM phù hợp và áp dụng chúng.
Phát ra các nút hiển thị có nội dung và kiểu đã tính toán của chúng.
Kết quả đầu ra cuối cùng là cây hiển thị chứa cả thông tin về nội dung và kiểu của mọi nội dung hiển thị trên màn hình. Khi có cây hiển thị, chúng ta có thể chuyển sang giai đoạn "bố cục".
Cho đến thời điểm này, chúng tôi đã tính toán nút nào sẽ hiển thị và các kiểu được tính toán của chúng, nhưng chúng tôi chưa tính chính xác vị trí và kích thước của chúng trong khung nhìn của thiết bị---đó là giai đoạn "bố cục" còn được gọi là "chỉnh lại dòng".
Để tìm ra kích thước và vị trí chính xác của từng đối tượng trên trang, trình duyệt sẽ bắt đầu tại gốc của cây hiển thị và chuyển qua đối tượng đó. Hãy cùng xem xét một ví dụ thực tế đơn giản:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
Phần thân của trang trên chứa hai div lồng nhau: div đầu tiên (mẹ) đặt kích thước hiển thị của nút là 50% chiều rộng khung nhìn, và div thứ hai---Chứa bởi cha----đặt chiều rộng của nó là 50% mẹ; tức là 25% chiều rộng khung nhìn.
Đầu ra của quy trình bố cục là một "mô hình hộp", ghi lại chính xác vị trí và kích thước của từng phần tử trong khung nhìn: tất cả số đo tương đối được chuyển đổi thành pixel tuyệt đối trên màn hình.
Cuối cùng, giờ đây khi đã biết nút nào là hiển thị, cũng như kiểu và hình dạng được tính toán của chúng, chúng ta có thể chuyển thông tin này đến giai đoạn cuối cùng, giai đoạn này sẽ chuyển đổi từng nút trong cây kết xuất thành pixel thực tế trên màn hình. Bước này thường được gọi là "vẽ" hoặc "tạo điểm ảnh".
Quá trình này có thể mất chút thời gian vì trình duyệt phải thực hiện khá nhiều việc. Tuy nhiên, Công cụ của Chrome cho nhà phát triển có thể cung cấp một số thông tin chi tiết về cả ba giai đoạn được mô tả ở trên. Hãy cùng tìm hiểu giai đoạn bố cục cho ví dụ ban đầu của chúng ta về "hello world":
- Sự kiện "Bố cục" ghi lại quá trình tính toán kích thước, vị trí và cấu trúc cây hiển thị trong Dòng thời gian.
- Khi bố cục hoàn tất, trình duyệt sẽ đưa ra các sự kiện "Paint Setup" (Thiết lập phương thức vẽ) và "Paint" (Paint), những sự kiện này sẽ chuyển đổi cây kết xuất thành pixel trên màn hình.
Thời gian cần thiết để thực hiện việc xây dựng cây kết xuất, bố cục và màu vẽ thay đổi dựa trên kích thước tài liệu, kiểu được áp dụng và thiết bị đang chạy: tài liệu càng lớn, trình duyệt càng phải xử lý nhiều; kiểu càng phức tạp, thì càng mất nhiều thời gian để vẽ (ví dụ: màu đồng nhất là "rẻ" để vẽ, trong khi bóng đổ "đắt" để tính toán và kết xuất).
Cuối cùng, trang sẽ hiển thị trong khung nhìn:
Dưới đây là phần tóm tắt nhanh về các bước của trình duyệt:
- Xử lý mã đánh dấu HTML và tạo cây DOM.
- Xử lý mã đánh dấu CSS và tạo cây CSSOM.
- Kết hợp DOM và CSSOM vào cây hiển thị.
- Chạy bố cục trên cây kết xuất để tính toán hình học của mỗi nút.
- Hiển thị các nút riêng lẻ lên màn hình.
Trang minh hoạ của chúng ta trông có thể đơn giản nhưng đòi hỏi khá nhiều công sức. Nếu DOM hoặc CSSOM đã được sửa đổi, bạn sẽ phải lặp lại quá trình để tìm ra pixel nào cần được kết xuất lại trên màn hình.
Tối ưu hoá đường dẫn hiển thị quan trọng là quá trình giảm thiểu tổng thời gian thực hiện các bước từ 1 đến 5 theo trình tự trên. Làm như vậy sẽ kết xuất nội dung lên màn hình nhanh nhất có thể và cũng giúp giảm khoảng thời gian giữa các lần cập nhật màn hình sau lần kết xuất đầu tiên; nghĩa là đạt được tốc độ làm mới cao hơn cho nội dung tương tác.