Ngày xuất bản: 31 tháng 3 năm 2014
Cây CSSOM và DOM được kết hợp thành một cây kết xuất, 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 quy trình vẽ giúp kết xuất các pixel lên màn hình. Việc tối ưu hoá từng bước này là rất quan trọng để đạt được hiệu suất kết xuất tối ưu.
Trong phần trước về việc tạo mô hình đối tượng, chúng ta đã tạo DOM và CSSOM dựa trên dữ liệu đầu vào HTML và CSS. Tuy nhiên, cả hai đều là các đối tượng độc lập ghi lại các khía cạnh khác nhau của tài liệu: một đối tượng mô tả nội dung và đối tượng còn lại mô tả các quy tắc kiểu cần áp dụng cho tài liệu. Làm cách nào để hợp nhất hai lớp này và yêu cầu trình duyệt kết xuất pixel trên màn hình?
Tóm tắt
- Cây DOM và CSSOM kết hợp với nhau để tạo thành cây kết xuất.
- Cây kết xuất 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ẽ, lấy cây kết xuất cuối cùng và kết xuất các pixel lên màn hình.
Trước tiên, trình duyệt kết hợp DOM và CSSOM thành một "cây kết xuất", cây này sẽ thu thập 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 kết xuất, trình duyệt sẽ thực hiện các bước sau:
Bắt đầu từ gốc của cây DOM, hãy di chuyển qua 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ả kết xuất.
- Một số nút được ẩn bằng CSS và cũng bị bỏ qua khỏi cây kết xuất; ví dụ: nút span (trong ví dụ ở trên) bị thiếu trong cây kết xuất vì chúng ta có một quy tắc rõ ràng đặt thuộc tính "display: none" trên nút đó.
Đố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 các quy tắc đó.
Phát ra các nút hiển thị có nội dung và kiểu được tính toán.
Kết quả cuối cùng là một cây kết xuất chứa cả nội dung và thông tin kiểu của tất cả nội dung hiển thị trên màn hình. Khi có cây kết xuất, chúng ta có thể chuyển sang giai đoạn "bố cục".
Cho đến thời điểm này, chúng ta đã tính toán những nút nào sẽ hiển thị và kiểu đã tính toán của các nút đó, nhưng chúng ta chưa tính toán vị trí và kích thước chính xác của các nút đó trong khung nhìn của thiết bị. Đó là giai đoạn "bố cục", còn gọi là "lưu lại luồ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 bắt đầu từ gốc của cây kết xuất và di chuyển qua cây đó. Hãy xem xét ví dụ sau:
<!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>
<body> của ví dụ trước chứa hai <div> lồng nhau: <div> đầu tiên (mẹ) đặt kích thước hiển thị của nút thành 50% của chiều rộng khung nhìn và <div> thứ hai – do nút mẹ chứa – đặt width thành 50% của nút mẹ; tức là 25% chiều rộng khung nhìn.
Kết quả của quá trình bố cục là "mô hình hộp", mô hình này 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ả các phép đ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 chúng ta đã biết những nút nào hiển thị, cũng như kiểu và hình học được tính toán của các nút đó, chúng ta có thể truyền thông tin này đến giai đoạn cuối cùng, 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 "dùng đường quét".
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 thao tác. Tuy nhiên, Công cụ dành cho nhà phát triển của Chrome có thể cung cấp một số thông tin chi tiết về cả ba giai đoạn được mô tả trước đó. Hãy kiểm tra giai đoạn bố cục cho ví dụ "xin chào thế giới" ban đầu của chúng ta:
- Sự kiện "Bố cục" ghi lại quá trình tạo cây kết xuất, vị trí và tính toán kích thước trong Dòng thời gian.
- Khi bố cục hoàn tất, trình duyệt sẽ phát hành các sự kiện "Thiết lập sơn" và "Sơn", giúp 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 để tạo cây kết xuất, bố cục và vẽ sẽ khác nhau tuỳ thuộc vào kích thước của 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 thì trình duyệt càng có nhiều việc cần làm; kiểu càng phức tạp thì thời gian vẽ càng lâu (ví dụ: màu đồng nhất "rẻ" để vẽ, trong khi bóng đổ "tốn kém" để 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à bản tóm tắt nhanh 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 thành một cây kết xuất.
- Chạy bố cục trên cây kết xuất để tính toán hình học của từng nút.
- Vẽ từng nút riêng lẻ lên màn hình.
Trang minh hoạ có vẻ cơ bản, nhưng cần phải thực hiện khá nhiều thao tác trên trình duyệt. Nếu DOM hoặc CSSOM đã được sửa đổi, bạn sẽ phải lặp lại quy trình này để xác định những pixel cần kết xuất lại trên màn hình.
Tối ưu hoá đường dẫn kết xuất 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 trong trình tự trên. Việc này giúp hiển thị nội dung trên màn hình nhanh nhất có thể và cũng 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 ban đầu; tức là đạt được tốc độ làm mới cao hơn cho nội dung tương tác.