Ngày xuất bản: 31 tháng 3 năm 2014
Các 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à đầu vào cho quy trình vẽ 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à cây CSSOM dựa trên đầu vào HTML và CSS. Tuy nhiên, cả hai đều là các đối tượng độc lập nắm bắt 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 về kiểu cần được áp dụng cho tài liệu. Làm cách nào để hợp nhất hai thành phần này và khiến 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 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ẽ, bước này sẽ 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.
Đầu tiên, trình duyệt kết hợp DOM và CSSOM thành một "cây kết xuất", trong đó ghi lại tất cả nội dung DOM hiển thị trên trang và tất cả thông tin về kiểu CSSOM cho từng 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 duyệt 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ì chúng không xuất hiện trong đầu ra được kết xuất.
- Một số nút bị ẩn bằng CSS và cũng bị bỏ qua trong 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 đã 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 về 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 cần hiển thị và kiểu dáng được tính toán của chúng, 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 hiển thị của thiết bị – đó là giai đoạn "bố cục", còn được gọi là "tái tạo luồng".
Để xác định 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ừ gốc của cây kết xuất và duyệt 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> trong ví dụ trước chứa 2 <div> lồng nhau: <div> đầu tiên (mẹ) đặt kích thước hiển thị của nút thành 50% chiều rộng khung hiển thị và <div> thứ hai (do mẹ chứa) đặt width thành 50% của mẹ; tức là 25% chiều rộng khung hiển thị.
Đầu ra của quy trình bố cục là một "mô hình hộp", giúp ghi lại chính xác vị trí và kích thước của từng phần tử trong khung hiển thị: tất cả các phép đo tương đối đều đượ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 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 chúng, chúng ta có thể truyề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 các pixel thực tế trên màn hình. Bước này thường được gọi là "vẽ" hoặc "raster hoá".
Quá trình này có thể mất 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ụ 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ả 3 giai đoạn được mô tả trước đó. Hãy xem xét giai đoạn bố cục cho ví dụ "hello world" 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 hiển thị" và "Hiển thị", chuyển đổi cây kết xuất thành các pixel trên màn hình.
Thời gian cần thiết để thực hiện quá trình 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, các kiểu được áp dụng và thiết bị mà tài liệu đang chạy: tài liệu càng lớn thì trình duyệt càng phải làm nhiều việc; kiểu càng phức tạp thì thời gian vẽ cũng càng lâu (ví dụ: màu đơn sắc là "rẻ" để vẽ, trong khi bóng đổ là "tốn kém" để tính toán và kết xuất).
Cuối cùng, trang này sẽ xuất hiện trong khung nhìn:
Sau đâ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 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ẽ các nút riêng lẻ lên màn hình.
Trang minh hoạ có vẻ đơn giản, nhưng trình duyệt cần phải thực hiện khá nhiều việc. Nếu DOM hoặc CSSOM bị sửa đổi, bạn sẽ phải lặp lại quy trình để tìm ra những pixel cần được kết xuất lại trên màn hình.
Tối ưu hoá đường hiển thị quan trọng là quá trình giảm thiểu tổng thời gian dành cho việc thực hiện các bước từ 1 đến 5 trong trình tự nêu trên. Việc này giúp hiển thị nội dung lên màn hình nhanh nhất có thể, đồng thời giảm khoảng thời gian giữa các lần cập nhật màn hình sau lần hiển thị ban đầu; tức là đạt được tốc độ làm mới cao hơn cho nội dung tương tác.