Tổng quan về kiến trúc RenderingNG

Chris Harrelson

Lưu ý: Bài đăng này nằm trong loạt bài về công cụ kết xuất Chromium. Hãy xem phần còn lại của loạt video để tìm hiểu thêm.

Trong bài đăng trước, tôi đã đưa ra thông tin tổng quan về mục tiêu kiến trúc RenderingNG và các thuộc tính chính. Bài đăng này sẽ giải thích cách thiết lập các thành phần của thành phần này và cách quy trình kết xuất diễn ra qua các thành phần đó.

Bắt đầu từ cấp cao nhất và xem chi tiết từ đó, nhiệm vụ kết xuất là:

1. Kết xuất nội dung thành pixel trên màn hình.
2. Tạo hiệu ứng hình ảnh động cho nội dung từ trạng thái này sang trạng thái khác.
3. Cuộn để phản hồi thông tin nhập.
4. Định tuyến dữ liệu đầu vào một cách hiệu quả đến đúng vị trí để tập lệnh của nhà phát triển và các hệ thống con khác có thể phản hồi.

Nội dung cần hiển thị là cây khung cho mỗi thẻ trình duyệt cộng với giao diện người dùng của trình duyệt. Đồng thời, một luồng sự kiện nhập thô từ màn hình cảm ứng, chuột, bàn phím và các thiết bị phần cứng khác.

Mỗi khung bao gồm:

• Trạng thái DOM
• CSS
• Vải bố
• Các tài nguyên bên ngoài, chẳng hạn như hình ảnh, video, phông chữ và SVG

Khung là một tài liệu HTML, kèm theo URL của tài liệu đó. Một trang web được tải trong thẻ trình duyệt có khung cấp cao nhất, khung con cho mỗi iframe có trong tài liệu cấp cao nhất và các thành phần con iframe đệ quy của các iframe đó.

Hiệu ứng hình ảnh là một thao tác đồ hoạ được áp dụng cho bitmap, chẳng hạn như cuộn, biến đổi, cắt, bộ lọc, độ mờ hoặc kết hợp.

Thành phần cấu trúc

Trong RenderingNG, các tác vụ này được phân chia một cách hợp lý thành nhiều giai đoạn và thành phần mã. Các thành phần kết thúc trong nhiều quá trình, luồng và thành phần phụ trong các luồng đó. Mỗi loại đều đóng vai trò quan trọng trong việc đạt được độ tin cậy, hiệu suất có thể mở rộng và khả năng mở rộng cho tất cả nội dung trên web.

Cấu trúc quy trình kết xuất

Quá trình kết xuất diễn ra trong một quy trình với nhiều giai đoạn và cấu phần phần mềm được tạo trong quá trình này. Mỗi giai đoạn đại diện cho mã thực hiện một nhiệm vụ được xác định rõ trong quá trình kết xuất. Cấu phần phần mềm (artifact) là cấu trúc dữ liệu là dữ liệu đầu vào hoặc đầu ra của các giai đoạn. Trong sơ đồ, dữ liệu đầu vào hoặc đầu ra được biểu thị bằng các mũi tên.

Bài đăng trên blog này sẽ không đi sâu vào nhiều chi tiết về các cấu phần phần mềm. Điều này sẽ được thảo luận trong bài đăng tiếp theo: Các cấu trúc dữ liệu chính và vai trò của các cấu trúc này trong RenderingNG.

Các giai đoạn của quy trình

Trong sơ đồ phía trước, các giai đoạn được ký hiệu bằng màu cho biết chúng thực thi trong luồng hoặc quy trình nào:

• Xanh lục: luồng chính của quá trình kết xuất
• Vàng:trình tổng hợp quá trình kết xuất
• Màu cam: quy trình viz

Trong một số trường hợp, các giá trị này có thể thực thi ở nhiều vị trí, tuỳ thuộc vào trường hợp, đó là lý do một số giá trị có 2 màu.

Có các giai đoạn như sau:

1. Tạo ảnh động: thay đổi kiểu đã tính toán và thay đổi cây thuộc tính theo thời gian dựa trên tiến trình khai báo.
2. Kiểu: áp dụng CSS cho DOM và tạo kiểu tính toán.
3. Layout (Bố cục): xác định kích thước và vị trí của các phần tử DOM trên màn hình và tạo cây mảnh không thể thay đổi.
4. Sơn trước: tính toán cây thuộc tính và invalidate mọi danh sách hiển thị và ô kết cấu GPU hiện có (nếu phù hợp).
5. Cuộn: cập nhật độ lệch cuộn của tài liệu và các phần tử DOM có thể cuộn bằng cách thay đổi cây thuộc tính.
6. Paint: tính toán danh sách hiển thị mô tả cách quét ô kết cấu GPU từ DOM.
7. Commit: sao chép cây thuộc tính và danh sách hiển thị vào chuỗi trình tổng hợp.
8. Phân lớp: chia nhỏ danh sách hiển thị thành danh sách lớp kết hợp để tạo điểm ảnh và ảnh động độc lập.
9. Công cụ quét, giải mã và vẽ: lần lượt biến danh sách hiển thị, hình ảnh mã hoá và mã worklet sơn thành ô kết cấu GPU.
10. Kích hoạt: tạo một khung trình tổng hợp minh hoạ cách vẽ và định vị các ô GPU vào màn hình, cùng với mọi hiệu ứng hình ảnh.
11. Tổng hợp: kết hợp các khung tổng hợp từ tất cả các khung tổng hợp hiển thị vào một khung tổng hợp chung duy nhất.
12. Vẽ: thực thi khung trình tổng hợp tổng hợp trên GPU để tạo các pixel trên màn hình.

Bạn có thể bỏ qua các giai đoạn trong quy trình kết xuất nếu không cần thiết. Ví dụ: ảnh động có hiệu ứng hình ảnh và cuộn có thể bỏ qua bố cục, tô màu trước và tô màu. Đây là lý do ảnh động và thao tác cuộn được đánh dấu bằng các chấm màu vàng và xanh lục trong sơ đồ. Nếu bạn có thể bỏ qua bố cục, tính năng vẽ trước và tô màu để tạo hiệu ứng hình ảnh, thì chúng có thể chạy hoàn toàn trên luồng của trình tổng hợp và bỏ qua luồng chính.

Quá trình hiển thị giao diện người dùng của trình duyệt không được mô tả trực tiếp ở đây, nhưng có thể được coi là một phiên bản đơn giản của cùng quy trình này (và trên thực tế, quá trình triển khai có dùng chung nhiều mã). Video (cũng không được mô tả trực tiếp) thường kết xuất thông qua mã độc lập giúp giải mã khung hình thành các ô hoạ tiết GPU mà sau đó được cắm vào khung của trình tổng hợp và bước vẽ.

Quy trình và cấu trúc luồng

Lưu ý: Có nhiều tiến trình và luồng CPU trong kiến trúc Chromium hơn so với hình ở đây. Các biểu đồ này chỉ tập trung vào những biểu đồ quan trọng đối với việc hiển thị.

Các tiến trình của CPU

Việc sử dụng nhiều tiến trình CPU sẽ giúp đảm bảo việc tách biệt hiệu suất và tính bảo mật giữa các trang web và trạng thái trình duyệt, cũng như cách ly tính ổn định và bảo mật với phần cứng GPU.

• Quá trình kết xuất sẽ kết xuất, tạo ảnh động, cuộn và chuyển dữ liệu đầu vào cho một tổ hợp thẻ và trang web. Có nhiều quá trình kết xuất hình ảnh.
• Quy trình trình duyệt kết xuất, tạo ảnh động và định tuyến dữ liệu đầu vào cho giao diện người dùng của trình duyệt (bao gồm thanh URL, tiêu đề thẻ và biểu tượng) và chuyển mọi dữ liệu đầu vào còn lại đến quy trình kết xuất thích hợp. Có chính xác một quá trình trình duyệt.
• Quy trình Viz tổng hợp việc kết hợp từ nhiều quy trình kết xuất cộng với quy trình của trình duyệt. Công cụ này quét và vẽ bằng GPU. Có chính xác một quy trình Viz.

Các trang web khác nhau luôn xuất hiện trong các quy trình kết xuất khác nhau. (Trong thực tế, hãy luôn dùng trên máy tính; khi có thể trên thiết bị di động. Tôi sẽ viết "luôn luôn" bên dưới, nhưng cảnh báo này sẽ áp dụng xuyên suốt.)

Nhiều thẻ trình duyệt hoặc cửa sổ của cùng một trang web thường xuất hiện trong các quy trình kết xuất khác nhau, trừ phi các thẻ đó có liên quan với nhau (một thẻ mở thẻ kia). Dưới áp lực bộ nhớ mạnh trên máy tính Chromium có thể đưa nhiều thẻ từ cùng một trang web vào cùng một quy trình kết xuất ngay cả khi không liên quan.

Trong một thẻ trình duyệt, các khung hình trên các trang web khác nhau luôn xuất hiện trong các quy trình kết xuất khác nhau, nhưng các khung hình trên cùng một trang web luôn ở cùng một quy trình kết xuất. Từ góc độ kết xuất, ưu điểm quan trọng của nhiều quy trình kết xuất là các thẻ và iframe trên nhiều trang web đạt được cách ly hiệu suất với nhau. Ngoài ra, các nguồn gốc có thể chọn sử dụng tính năng cách ly chặt chẽ hơn nữa.

Có duy nhất một quy trình Viz cho toàn bộ Chromium. Sau cùng, thường chỉ có một GPU và màn hình để vẽ. Việc phân tách Viz thành quy trình riêng giúp đảm bảo tính ổn định khi gặp lỗi trong trình điều khiển GPU hoặc phần cứng. Bạn cũng nên tách biệt tính bảo mật, điều này rất quan trọng đối với các API GPU như Vulkan. Bảo mật nói chung cũng rất quan trọng.

Vì trình duyệt có thể có nhiều thẻ và cửa sổ, đồng thời tất cả các trình duyệt đó đều có các pixel giao diện người dùng của trình duyệt để vẽ, nên bạn có thể thắc mắc: tại sao lại chỉ có một quy trình trình duyệt? Lý do là tại một thời điểm, chỉ một trong số các thẻ này được lấy làm tâm điểm. Trên thực tế, các thẻ trình duyệt không hiển thị chủ yếu đã bị vô hiệu hoá và làm mất tất cả bộ nhớ GPU. Tuy nhiên, các tính năng kết xuất giao diện người dùng phức tạp của trình duyệt ngày càng được triển khai nhiều hơn trong các quy trình kết xuất (còn được gọi là WebUI). Điều này không phải vì lý do tách biệt hiệu suất, mà là để tận dụng tính dễ sử dụng của công cụ kết xuất web của Chromium.

Trên các thiết bị Android cũ, quy trình kết xuất và trình duyệt được chia sẻ khi sử dụng trong WebView (điều này không áp dụng cho Chromium trên Android nói chung mà chỉ áp dụng cho WebView). Trên WebView, quy trình của trình duyệt cũng được chia sẻ với ứng dụng nhúng, còn WebView chỉ có một quy trình kết xuất.

Đôi khi cũng có một quy trình tiện ích để giải mã nội dung video được bảo vệ. Quá trình này không được mô tả ở trên.

Luồng

Các luồng giúp tách biệt hiệu suất và khả năng phản hồi, bất kể các tác vụ chậm, việc tải song song quy trình và tải nhiều bộ đệm vào bộ đệm.

• Luồng chính chạy các tập lệnh, vòng lặp sự kiện kết xuất, vòng đời tài liệu, kiểm thử lượt truy cập, gửi sự kiện tập lệnh và phân tích cú pháp HTML, CSS và các định dạng dữ liệu khác.
  • Trình trợ giúp luồng chính thực hiện các thao tác như tạo bitmap và blob hình ảnh yêu cầu mã hoá hoặc giải mã.
  • Web Workers chạy tập lệnh và vòng lặp sự kiện kết xuất cho OffscreenCanvas.
• Luồng kết hợp xử lý các sự kiện đầu vào, thực hiện thao tác cuộn và tạo ảnh động của nội dung web, tính toán phân lớp tối ưu nội dung web, đồng thời điều phối các trình giải mã hình ảnh, tô màu và tác vụ đường quét.
  • Trình trợ giúp luồng của trình tổng hợp phối hợp các tác vụ đường quét của Viz, đồng thời thực thi các tác vụ giải mã hình ảnh, lớp vẽ và đường quét dự phòng.
• Luồng đầu ra âm thanh, demuxer hoặc âm thanh sẽ giải mã, xử lý và đồng bộ hoá các luồng video cũng như âm thanh. (Hãy nhớ rằng video sẽ thực thi song song với quy trình kết xuất chính.)

Việc phân tách luồng chính và luồng tổng hợp là cực kỳ quan trọng để cách ly hiệu suất của ảnh động và cuộn khỏi công việc của luồng chính.

Chỉ có một luồng chính cho mỗi quy trình kết xuất, mặc dù nhiều thẻ hoặc khung từ cùng một trang web có thể được đưa vào cùng một quy trình. Tuy nhiên, có sự tách biệt hiệu suất với công việc được thực hiện trong nhiều API trình duyệt. Ví dụ: việc tạo bitmap và blob hình ảnh trong API Canvas chạy trong một luồng trợ giúp luồng chính.

Tương tự, chỉ có một luồng tổng hợp cho mỗi quy trình kết xuất. Nhìn chung, không phải là vấn đề chỉ có một, vì tất cả các thao tác thực sự tốn kém trên luồng của trình tổng hợp đều được uỷ quyền cho các luồng worker của trình tổng hợp hoặc quy trình Viz, đồng thời bạn có thể thực hiện công việc này song song với việc định tuyến đầu vào, cuộn hoặc ảnh động. Các luồng worker của Trình tổng hợp điều phối các tác vụ chạy trong quá trình Viz, nhưng tính năng tăng tốc GPU ở mọi nơi có thể không thành công vì những lý do nằm ngoài tầm kiểm soát của Chromium, chẳng hạn như lỗi trình điều khiển. Trong những trường hợp như vậy, luồng worker sẽ thực hiện công việc ở chế độ dự phòng trên CPU.

Số lượng luồng worker của trình tổng hợp phụ thuộc vào các chức năng của thiết bị. Ví dụ: máy tính thường sẽ sử dụng nhiều luồng hơn vì có nhiều lõi CPU hơn và ít bị hạn chế pin hơn thiết bị di động. Đây là ví dụ về cách tăng và giảm quy mô.

Ngoài ra, bạn cũng cần lưu ý rằng cấu trúc luồng của quy trình kết xuất là một ứng dụng của 3 mẫu tối ưu hoá:

• Luồng trợ giúp: gửi các tác vụ phụ chạy trong thời gian dài đến các luồng khác, để giúp luồng mẹ thích ứng với các yêu cầu khác diễn ra cùng lúc. Các luồng trợ giúp luồng chính và trình trợ giúp của trình tổng hợp là ví dụ điển hình về kỹ thuật này.
• Lưu vào bộ đệm nhiều lần: hiển thị nội dung đã kết xuất trước đó trong khi kết xuất nội dung mới để ẩn độ trễ khi kết xuất. Luồng trình tổng hợp sử dụng kỹ thuật này.
• Tạo song song đường dẫn:chạy đồng thời quy trình kết xuất ở nhiều vị trí. Đây là cách cuộn và ảnh động có thể hoạt động nhanh, ngay cả khi quá trình cập nhật kết xuất luồng chính đang diễn ra, vì thao tác cuộn và ảnh động có thể chạy song song.

Quy trình của trình duyệt

• Luồng kết xuất và kết hợp phản hồi dữ liệu đầu vào trong giao diện người dùng của trình duyệt, chuyển dữ liệu đầu vào khác đến đúng quy trình kết xuất; tạo và vẽ giao diện người dùng của trình duyệt.
• Trình trợ giúp luồng kết xuất và kết hợp thực thi các tác vụ giải mã hình ảnh và đường quét hoặc giải mã dự phòng.

Luồng kết hợp và kết xuất của trình duyệt cũng tương tự như mã và chức năng của quy trình kết xuất, ngoại trừ việc luồng chính và luồng của trình tổng hợp được kết hợp thành một. Trong trường hợp này, bạn chỉ cần một luồng vì không cần tách biệt hiệu suất với các tác vụ dài trong luồng chính, vì không có luồng nào theo thiết kế.

Quy trình Viz

• Đường quét luồng chính của GPU hiển thị danh sách và khung hình video trong các thẻ thông tin hoạ tiết GPU, đồng thời vẽ các khung hình của trình tổng hợp vào màn hình.
• Luồng trình tổng hợp hiển thị tổng hợp và tối ưu hoá việc kết hợp từ mỗi quy trình kết xuất, cùng với quy trình của trình duyệt, vào một khung trình tổng hợp duy nhất để hiển thị lên màn hình.

Đường quét và vẽ thường diễn ra trên cùng một luồng vì cả hai đều dựa vào tài nguyên GPU và khó có thể sử dụng GPU đa luồng một cách đáng tin cậy (khả năng truy cập đa luồng dễ dàng hơn vào GPU là một động lực để phát triển tiêu chuẩn Vulkan mới). Trên Android WebView, có một luồng kết xuất riêng ở cấp hệ điều hành để vẽ do cách WebView được nhúng vào ứng dụng gốc. Các nền tảng khác có thể sẽ có một luồng như vậy trong tương lai.

Trình tổng hợp hiển thị nằm trên một luồng khác vì trình tổng hợp này cần phải luôn phản hồi và không chặn bất kỳ nguồn làm chậm nào có thể xảy ra trên luồng chính của GPU. Một nguyên nhân làm chậm luồng chính của GPU là các lệnh gọi vào mã không phải Chromium, chẳng hạn như trình điều khiển GPU dành riêng cho nhà cung cấp, có thể bị chậm theo những cách khó dự đoán.

Cấu trúc thành phần

Trong mỗi luồng chính hoặc luồng tổng hợp của quy trình kết xuất, có các thành phần phần mềm logic tương tác với nhau theo cách có cấu trúc.

Các thành phần luồng chính của quá trình kết xuất

• Trình kết xuất nhấp nháy:
  • Mảnh cây khung cục bộ đại diện cho cây khung cục bộ và DOM trong khung.
  • Thành phần API DOM và Canvas chứa cách triển khai tất cả các API này.
  • Trình chạy vòng đời của tài liệu thực thi các bước trong quy trình kết xuất cho đến bước xác nhận (commit).
  • Thành phần kiểm thử và gửi lần truy cập sự kiện đầu vào thực thi các thử nghiệm lượt truy cập để tìm ra phần tử DOM nào được một sự kiện nhắm mục tiêu, đồng thời chạy thuật toán điều phối sự kiện đầu vào cũng như các hành vi mặc định.
• Trình lập lịch biểu và trình chạy của vòng lặp sự kiện kết xuất quyết định nội dung sẽ chạy trên vòng lặp sự kiện và thời điểm chạy. Khung hiển thị này lên lịch kết xuất theo tần suất phù hợp với màn hình thiết bị.

Mảnh cây khung cục bộ khá phức tạp khi suy nghĩ. Hãy nhớ rằng cây khung là trang chính và các iframe con của nó, theo quy tắc đệ quy. Một khung hình có tính cục bộ đối với quá trình kết xuất nếu khung hình được kết xuất trong quy trình đó, hoặc nếu không thì khung hình là từ xa.

Bạn có thể hình dung khung màu theo quy trình kết xuất hình ảnh. Trong hình ảnh trước, các hình tròn màu xanh lục là tất cả các khung trong một quá trình kết xuất; các hình màu cam nằm trong một giây và hình tròn màu xanh dương nằm trong một phần ba.

Mảnh cây khung cục bộ là một thành phần được kết nối có cùng màu trong cây khung. Có 4 cây khung cục bộ trong hình ảnh: 2 cây cho trang web A, 1 cho trang web B và 1 cho trang web C. Mỗi cây khung cục bộ có thành phần trình kết xuất Blink riêng. Trình kết xuất Blink của cây khung cục bộ có thể cùng hoặc không ở cùng một quy trình kết xuất với các cây khung cục bộ khác (được xác định theo cách chọn các quy trình kết xuất, như mô tả ở phần trên).

Cấu trúc luồng của trình tổng hợp quy trình kết xuất

Các thành phần của trình tổng hợp quá trình kết xuất bao gồm:

• Trình xử lý dữ liệu duy trì danh sách lớp tổng hợp, danh sách hiển thị và cây thuộc tính.
• Một trình chạy vòng đời chạy hoạt ảnh, cuộn, kết hợp, đường quét cũng như giải mã và kích hoạt các bước của quy trình kết xuất. (Hãy nhớ rằng hoạt ảnh và thao tác cuộn có thể xảy ra trong cả luồng chính và trình tổng hợp.)
• Trình xử lý kiểm thử lượt truy cập và đầu vào thực hiện xử lý đầu vào và kiểm thử lượt truy cập ở độ phân giải của các lớp kết hợp, để xác định xem có thể chạy các cử chỉ cuộn trên luồng của trình tổng hợp hay không và các lượt kiểm thử lượt truy cập của quy trình kết xuất nào nên nhắm mục tiêu.

Ví dụ trong thực tế

Bây giờ, hãy cùng cụ thể hoá cấu trúc qua một ví dụ. Trong ví dụ này có 3 thẻ:

Thẻ 1: foo.com

<html>
  <iframe id=one src="foo.com/other-url"></iframe>
  <iframe  id=two src="bar.com"></iframe>
</html>

Thẻ 2: bar.com

<html>
 …
</html>

Thẻ 3: baz.com html <html> … </html>

Quy trình, luồng và cấu trúc thành phần cho các thẻ này sẽ có dạng như sau:

Bây giờ, hãy cùng tìm hiểu một ví dụ về từng nhiệm vụ trong số 4 nhiệm vụ chính của quá trình kết xuất mà bạn có thể nhớ lại:

1. Kết xuất nội dung thành pixel trên màn hình.
2. Tạo ảnh động hiệu ứng hình ảnh cho nội dung từ trạng thái này sang trạng thái khác.
3. Cuộn để phản hồi thông tin nhập.
4. Định tuyến dữ liệu đầu vào một cách hiệu quả đến đúng vị trí để tập lệnh của nhà phát triển và các hệ thống con khác có thể phản hồi.

Cách hiển thị DOM đã thay đổi cho thẻ 1:

1. Tập lệnh của nhà phát triển thay đổi DOM trong quá trình kết xuất cho foo.com.
2. Trình kết xuất Blink cho trình tổng hợp biết cần phải kết xuất.
3. Trình tổng hợp cho Viz biết cần phải kết xuất.
4. Viz báo hiệu thời điểm bắt đầu kết xuất trở lại cho trình tổng hợp.
5. Trình tổng hợp sẽ chuyển tiếp tín hiệu bắt đầu đến trình kết xuất Blink.
6. Trình chạy vòng lặp sự kiện của luồng chính chạy vòng đời của tài liệu.
7. Luồng chính sẽ gửi kết quả đến luồng của trình tổng hợp.
8. Trình chạy vòng lặp sự kiện của trình tổng hợp chạy vòng đời kết hợp.
9. Mọi tác vụ đường quét đều được gửi tới Viz để tạo đường quét (thường có nhiều hơn một trong các tác vụ này).
10. Viz quét nội dung trên GPU.
11. Viz xác nhận đã hoàn thành nhiệm vụ đường quét. Lưu ý: Chromium thường không đợi đường quét hoàn tất mà sẽ sử dụng mã thông báo đồng bộ hoá phải được giải quyết bằng các tác vụ đường quét trước khi thực thi bước 15.
12. Một khung trình tổng hợp được gửi đến Viz.
13. Viz tổng hợp các khung tổng hợp cho quá trình kết xuất foo.com, quy trình kết xuất iframe bar.com và giao diện người dùng của trình duyệt.
14. Viz lên lịch hoà.
15. Viz vẽ khung trình tổng hợp tổng hợp vào màn hình.

Để tạo ảnh động cho hiệu ứng chuyển đổi biến đổi CSS trên thẻ 2:

1. Luồng tổng hợp cho quá trình kết xuất bar.com sẽ đánh dấu một ảnh động trong vòng lặp sự kiện của trình tổng hợp bằng cách thay đổi các cây thuộc tính hiện có. Sau đó, thao tác này sẽ chạy lại vòng đời của trình tổng hợp. (Tác vụ quét và giải mã có thể xảy ra, nhưng không được mô tả ở đây.)
2. Một khung trình tổng hợp được gửi đến Viz.
3. Viz tổng hợp các khung tổng hợp cho quá trình kết xuất foo.com, quá trình kết xuất bar.com và giao diện người dùng của trình duyệt.
4. Viz lên lịch hoà.
5. Viz vẽ khung trình tổng hợp tổng hợp vào màn hình.

Cách cuộn trang web trên thẻ 3:

1. Một chuỗi các sự kiện input (chuột, thao tác chạm hoặc bàn phím) đến quá trình của trình duyệt.
2. Mỗi sự kiện được chuyển đến chuỗi trình tổng hợp quy trình hiển thị của baz.com.
3. Trình tổng hợp xác định xem luồng chính có cần biết về sự kiện này hay không.
4. Sự kiện này được gửi đến luồng chính (nếu cần).
5. Luồng chính sẽ kích hoạt trình nghe sự kiện input (pointerdown, touchstar, pointermove, touchmove hoặc wheel) để xem liệu trình nghe có gọi preventDefault trên sự kiện hay không.
6. Luồng chính trả về việc preventDefault có được gọi đến trình tổng hợp hay không.
7. Nếu không, sự kiện nhập sẽ được gửi lại cho quá trình của trình duyệt.
8. Quá trình của trình duyệt sẽ chuyển đổi cử chỉ này thành cử chỉ cuộn bằng cách kết hợp cử chỉ đó với các sự kiện khác gần đây.
9. Cử chỉ cuộn được gửi một lần nữa đến chuỗi trình tổng hợp quá trình kết xuất của baz.com,
10. Thao tác cuộn sẽ được áp dụng ở đó và luồng trình tổng hợp cho quá trình kết xuất bar.com sẽ đánh dấu một ảnh động trong vòng lặp sự kiện của trình tổng hợp. Sau đó, thao tác này sẽ làm thay đổi độ lệch cuộn trong cây thuộc tính và chạy lại vòng đời của trình tổng hợp. Phương thức này cũng yêu cầu luồng chính kích hoạt sự kiện scroll (không được mô tả ở đây).
11. Một khung trình tổng hợp được gửi đến Viz.
12. Viz tổng hợp các khung tổng hợp cho quá trình kết xuất foo.com, quy trình kết xuất bar.com và giao diện người dùng của trình duyệt.
13. Viz lên lịch hoà.
14. Viz vẽ khung trình tổng hợp tổng hợp vào màn hình.

Lưu ý: Lưu ý rằng mỗi sự kiện đầu vào sau sự kiện đầu tiên có thể bỏ qua bước 3 và 4, vì quá trình cuộn đã bắt đầu và tại thời điểm đó, tập lệnh có thể quan sát sự kiện đó thông qua sự kiện scroll, nhưng không còn gián đoạn nữa.

Cách định tuyến một sự kiện click trên siêu liên kết trong iframe #hai trên thẻ một:

1. Sự kiện input (chuột, thao tác chạm hoặc bàn phím) xuất hiện trong quá trình của trình duyệt. Công cụ này thực hiện thử nghiệm lượt truy cập gần đúng để xác định rằng quá trình hiển thị iframe bar.com sẽ nhận được và gửi lượt nhấp đến đó.
2. Luồng trình tổng hợp cho bar.com sẽ định tuyến sự kiện click đến luồng chính cho bar.com và lên lịch cho một tác vụ vòng lặp sự kiện kết xuất để xử lý sự kiện đó.
3. Trình xử lý sự kiện đầu vào cho các thử nghiệm lượt truy cập vào chuỗi chính của bar.com để xác định phần tử DOM nào trong iframe đã được nhấp vào và kích hoạt sự kiện click để quan sát các tập lệnh. Không nghe thấy preventDefault, lệnh này sẽ chuyển đến siêu liên kết.
4. Khi tải trang đích của siêu liên kết, trạng thái mới sẽ hiển thị, theo các bước tương tự như ví dụ "hiển thị DOM đã thay đổi" ở trên. (Những thay đổi tiếp theo này sẽ không được mô tả ở đây.)

Kết luận

Ôi, chi tiết quá! Như bạn có thể thấy, quá trình kết xuất trong Chromium khá phức tạp! Có thể mất rất nhiều thời gian để ghi nhớ và tiếp thu tất cả các phần, vì vậy, đừng lo lắng nếu việc này có vẻ quá choáng ngợp.

Điểm quan trọng nhất là có một quy trình kết xuất hình ảnh đơn giản về mặt khái niệm, thông qua việc mô-đun hoá cẩn thận và chú ý đến từng chi tiết, đã được chia thành một số thành phần độc lập. Sau đó, những thành phần này được chia thành các quy trình và luồng song song để tối đa hoá hiệu suất có thể mở rộng và các cơ hội mở rộng.

Mỗi thành phần đó đều đóng vai trò quan trọng trong việc mang lại hiệu suất và tính năng mà các ứng dụng web hiện đại cần. Chúng tôi sẽ sớm phát hành thông tin chuyên sâu về từng thành phần và vai trò quan trọng của từng thành phần.

Nhưng trước đó, tôi cũng sẽ giải thích cách các cấu trúc dữ liệu chính được đề cập trong bài đăng này (các cấu trúc biểu thị bằng màu xanh dương ở cạnh biểu đồ quy trình kết xuất) cũng quan trọng như các thành phần mã đối với RenderingNG.

Cảm ơn bạn đã đọc và chú ý theo dõi!

Hình minh hoạ của Una Kravets.