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ề xây dựng mô hình đối tượng, chúng ta đã xây dựng DOM và cây 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 thế nào để chúng ta hợp nhất hai loại và trình duyệt hiển thị 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à tô màu. Bước này sử dụng 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 vào một "cây kết xuất", chính sách này sẽ chụp 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 kết xuất, trình duyệt thực hiện đại khái những việc sau:
Bắt đầu từ gốc của cây DOM, 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 đã tính toán của các nút đó.
Kết quả cuối cùng là một cây kết xuất chứa cả thông tin về nội dung và kiểu của tất cả nội dung hiển thị trên màn hình. Khi đã có sẵn cây kết xuất, chúng ta có thể tiếp tục sang bước "bố cục" giai đoạn đầu.
Đế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 có hai <div> lồng nhau: <div> đầu tiên (mẹ) đặt kích thước hiển thị của nút là 50% của chiều rộng khung nhìn và <div> thứ hai (do thành phần mẹ chứa) đặt width của nút thành 50% của thành phần 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", 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, 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à "tô màu" 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 công 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ước đó. Kiểm tra giai đoạn bố cục cho lời chào "hello world" ban đầu của chúng ta ví dụ:
- "Bố cục" sự kiện 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ẽ báo cáo vấn đề "Thiết lập bản vẽ" và "Paint" các sự kiện để chuyển đổi cây hiển thị thành pixel trên màn hình.
Thời gian cần thiết để xây dựng cây kết xuất, bố cục và tô màu sẽ khác nhau tuỳ theo kích thước của tài liệu, 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 xử lý nhiều công việc; kiểu càng phức tạp thì thời gian tô màu càng lớn (ví dụ: tô màu đồng nhất "rẻ" trong khi bóng đổ thì "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à 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 từng nút.
- Dán từng nút 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 hiển thị quan trọng là quá trình giảm thiểu tổng thời gian dùng để thực hiện các bước từ 1 đến 5 trong trình tự nêu trên. Việc này sẽ hiển thị nội dung lên màn hình nhanh nhất có thể đồng thời 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 ban đầu; tức là đạt được tốc độ làm mới cao hơn cho nội dung tương tác.