Tại đây, bạn sẽ thấy cách thiết lập các phần thành phần của RenderingNG và cách quy trình kết xuất chạy qua các phần đó.
Bắt đầu từ cấp cao nhất, nhiệm vụ kết xuất là:
- Kết xuất nội dung thành pixel trên màn hình.
- Tạo hiệu ứng hình ảnh cho nội dung từ trạng thái này sang trạng thái khác.
- Cuộn để phản hồi thao tác nhập.
- Định tuyến dữ liệu đầu vào một cách hiệu quả đến đúng vị trí để các 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 hiển thị là một cây khung cho mỗi thẻ trình duyệt, cùng với giao diện trình duyệt. Đồng thời, một luồng các 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
- Canvas
- 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 một thẻ trình duyệt có một khung cấp cao nhất, các khung con cho từng iframe có trong tài liệu cấp cao nhất, và các thành phần con iframe đệ quy tương ứng.
Hiệu ứng hình ảnh là một thao tác đồ hoạ á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 hợp lý trên một số giai đoạn và thành phần mã. Các thành phần sẽ kết thúc trong các quy trình, luồng và thành phần phụ khác nhau của CPU trong các luồng đó. Mỗi cấp độ đề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 mọi nội dung web.
Cấu trúc quy trình kết xuất
Quá trình kết xuất sẽ diễn ra trong một quy trình với một số 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 tác vụ được xác định rõ trong quá trình kết xuất. Các cấu phần phần mềm 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.
Các giai đoạn là:
- Animate (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.
- Kiểu: áp dụng CSS cho DOM và tạo kiểu được tính toán.
- 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.
- Sơn trước: tính toán cây thuộc tính và vô hiệu hoá mọi danh sách hiển thị và ô kết cấu GPU hiện có cho phù hợp.
- 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.
- Sơn: tính toán danh sách hiển thị mô tả cách tạo ô kết cấu GPU từ DOM.
- Xác nhận: sao chép cây thuộc tính và danh sách hiển thị vào luồng của trình tổng hợp.
- Tạo lớp: chia nhỏ danh sách hiển thị thành một danh sách lớp tổng hợp để tạo điểm ảnh và tạo ảnh động độc lập.
- Tạo đường quét, giải mã và vẽ worklet:lần lượt biến danh sách hiển thị, hình ảnh được mã hoá và mã worklet sơn thành ô hoạ tiết GPU.
- Kích hoạt: tạo một khung trình tổng hợp trình bày cách vẽ và định vị ô GPU trên màn hình, cùng với mọi hiệu ứng hình ảnh.
- Tổng hợp: kết hợp các khung trình tổng hợp từ tất cả các khung trình tổng hợp hiển thị thành một khung trình tổng hợp chung duy nhất.
- Draw: thực thi khung tổng hợp tổng hợp trên GPU để tạo pixel trên màn hình.
Có thể bỏ qua các giai đoạn của quy trình kết xuất nếu không cần thiết. Ví dụ: ảnh động của hiệu ứng hình ảnh và thao tác cuộn có thể bỏ qua bố cục, tô màu trước và tô màu. Đây là lý do tại sao ả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 có thể bỏ qua bố cục, tô màu trước và tô màu để tạo hiệu ứng hình ảnh, thì các tính năng này 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à phiên bản đơn giản của cùng một quy trình này (và trên thực tế, quá trình triển khai sử dụng nhiều mã). Video (cũng không được mô tả trực tiếp) thường hiển thị bằng mã độc lập giúp giải mã khung vào các ô kết cấu 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
Các quá trình của CPU
Việc sử dụng nhiều quy trình CPU giúp cách ly hiệu suất và bảo mật giữa các trang web và trạng thái trình duyệt, đồng thời giúp tách biệt độ ổn định và tính 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à định tuyến dữ liệu đầu vào cho một tổ hợp trang web và thẻ. Có một số quy trình kết xuất.
- Quy trình trình duyệt sẽ 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 địa chỉ, tiêu đề thẻ và biểu tượng), đồng thời chuyển tất cả dữ liệu đầu vào còn lại đến quy trình kết xuất thích hợp. Có một quy trình trên trình duyệt.
- Quy trình Viz tổng hợp dữ liệu tổng 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 tạo điểm ảnh và vẽ bằng GPU. Có một quy trình Viz.
Các trang web khác nhau luôn dẫn đến các quy trình kết xuất khác nhau.
Nhiều thẻ trình duyệt hoặc cửa sổ của cùng một trang web thường trải qua nhiều quy trình kết xuất, trừ phi các thẻ có liên quan với nhau, chẳng hạn như một thẻ mở thẻ còn lại. Dưới áp lực mạnh về bộ nhớ trên Chromium dành cho máy tính, Chromium có thể đặt 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 các thẻ đó không liên quan đến nhau.
Trong một thẻ trình duyệt, khung hình trên nhiều trang web luôn nằm 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 ở trong cùng một quy trình kết xuất. Từ góc độ hiển thị, lợi thế quan trọng của nhiều quá trình kết xuất là các iframe và thẻ 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 thậm chí tách biệt hơn.
Có đúng một quy trình Viz cho toàn bộ Chromium, vì thường chỉ có một GPU và màn hình để vẽ.
Việc tách Viz thành một 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. Đây cũng là một cách hiệu quả để cách ly bảo mật. Đây là một yếu tố quan trọng đối với các API GPU như Vulkan và bảo mật nói chung.
Vì trình duyệt có thể có nhiều thẻ và cửa sổ, đồng thời tất cả các cửa sổ và cửa sổ đó đều 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 có đúng một quy trình trình duyệt? Lý do là tại mỗi thời điểm, chỉ một trong số các thẻ đó được lấy tiêu điểm. Trên thực tế, các thẻ trình duyệt không hiển thị hầu hết đều bị huỷ kích hoạt và xoá tất cả bộ nhớ GPU. Tuy nhiên, các tính năng hiển thị giao diện người dùng phức tạp của trình duyệt đang ngày càng được triển khai trong các quy trình kết xuất (còn 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 việc dễ sử dụng 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 dùng trong WebView (việc 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 và 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ả trong các sơ đồ trước.
Luồng
Các luồng giúp tách biệt hiệu suất và phản hồi nhanh bất kể các tác vụ chậm, quy trình song song và nhiều bộ đệm.
- Luồng chính chạy các tập lệnh, vòng lặp sự kiện hiển thị, vòng đời tài liệu, kiểm tra lượt truy cập, điều phối sự kiện tập lệnh cũng như 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 tác vụ như tạo bitmap và blob hình ảnh yêu cầu mã hóa 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 trình tổng hợp xử lý các sự kiện đầu vào, thực hiện thao tác cuộn và ảnh động của nội dung web, tính toán việc phân lớp tối ưu nội dung web và toạ độ giải mã hình ảnh, vẽ Worklet và tác vụ đường quét.
- Trình trợ giúp luồng của trình tổng hợp điều phối các tác vụ đường quét Viz và thực thi các tác vụ giải mã hình ảnh, vẽ tệp công việc và đường quét dự phòng.
- Luồng nội dung nghe nhìn, bộ phân giải hoặc đầu ra âm thanh giải mã, xử lý và đồng bộ hoá các luồng video và âm thanh. (Hãy nhớ rằng video thực thi song song với quy trình kết xuất chính).
Việc tách luồng chính và luồng trình tổng hợp cực kỳ quan trọng đối với việc tách biệt 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 trên 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ể kết thúc trong 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 sẽ chạy trong luồng trợ giúp luồng chính.
Tương tự, chỉ có một luồng trình tổng hợp cho mỗi quy trình kết xuất. Nhìn chung, đây 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 và có thể thực hiện công việc này song song với đị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 phối hợp các tác vụ chạy trong quy 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 khả 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ì chúng có nhiều lõi CPU hơn và ít tốn pin hơn so với thiết bị di động. Đây là ví dụ về việc tăng tỷ lệ và giảm quy mô.
Cấu trúc phân luồng quy trình kết xuất là việc áp dụng 3 mẫu tối ưu hoá khác nhau:
- Luồng trợ giúp: gửi các tác vụ phụ chạy trong thời gian dài tới các luồng khác để đảm bảo luồng mẹ phản hồi các yêu cầu đồng thời khác. Các luồng trợ giúp luồng chính và luồng trợ giúp trình tổng hợp là những ví dụ điển hình về kỹ thuật này.
- Nhiều bộ đệm: hiện nội dung đã kết xuất trước đó trong khi kết xuất nội dung mới để ẩn độ trễ kết xuất. Luồng trình tổng hợp sử dụng kỹ thuật này.
- Song song hoá đường ống: 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ể nhanh chóng; ngay cả khi quá trình cập nhật kết xuất luồng chính đang diễn ra, tính năng 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, định tuyến dữ liệu đầu vào khác đến đúng quy trình kết xuất; bố trí và vẽ lên 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à tổng hợp thực thi các tác vụ giải mã hình ảnh cũng như đường quét hoặc giải mã dự phòng.
Quy trình kết xuất và kết hợp luồng của trình duyệt 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 trình tổng hợp được kết hợp thành một. Chỉ cần một luồng trong trường hợp này vì bạn không cần tách biệt hiệu suất với các tác vụ có luồng chính dài, vì theo thiết kế thì không có luồng nào.
Quy trình video
- Trình quét luồng chính của GPU hiển thị danh sách và khung video vào các ô kết cấu GPU, đồng thời vẽ các khung của trình tổng hợp lên màn hình.
- Luồng trình kết hợp hiển thị sẽ tổng hợp và tối ưu hoá hoạt động tổng 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à bản 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 (việc 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 nhúng WebView vào ứng dụng gốc. Các nền tảng khác có thể sẽ có 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ì 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 của nhà cung cấp cụ thể, 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 trình tổng hợp của quá 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 trong luồng chính của quá trình kết xuất
Trong Trình kết xuất Blink:
- Mảnh cây khung cục bộ biểu thị cây khung cục bộ và DOM trong khung.
- Thành phần API DOM và Canvas chứa các cách triển khai tất cả các API này.
- Trình chạy trong vòng đời tài liệu thực thi các bước trong quy trình kết xuất cho đến và bao gồm bước cam kết.
- Thành phần kiểm thử và điều phối lượt truy cập sự kiện đầu vào sẽ thực thi các lượt kiểm thử lượt truy cập để tìm ra phần tử DOM nào được một sự kiện nhắm đến, đồng thời chạy các thuật toán điều phối sự kiện đầu vào cũng như hành vi mặc định.
Trình lập lịch biểu và trình chạy vòng lặp sự kiện hiển thị quyết định nội dung và thời điểm chạy trong vòng lặp sự kiện. Tính năng 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ị.
Các mảnh cây khung cục bộ hơi phức tạp. Hãy nhớ rằng cây khung là trang chính và các iframe con, theo đệ quy. Một khung sẽ được cục bộ (cục bộ) đối với quá trình kết xuất nếu khung đó được kết xuất trong quy trình đó, nếu không thì là từ xa.
Bạn có thể hình dung việc tô màu khung hình theo quy trình kết xuất của chúng. Trong hình trước, các vòng tròn màu xanh lục là tất cả các khung hình trong một quá trình kết xuất; vòng tròn màu cam nằm trong giây thứ hai và vòng 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 kết nối có cùng màu trong cây khung. Có bốn cây khung cục bộ trong hình ảnh: hai cây cho trang web A, một cho trang web B và một cho trang web C. Mỗi cây khung cục bộ sẽ có thành phần kết xuất đồ hoạ Blink riêng. Trình kết xuất Blink của cây khung cục bộ có thể có hoặc không thực hiện cùng một quy trình kết xuất như các cây khung cục bộ khác. Thứ nguyên này được xác định theo cách chọn quy trình kết xuất, như mô tả ở 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 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.
- Trình chạy vòng đời chạy ảnh động, 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à cuộn có thể xảy ra ở cả luồng chính và trình tổng hợp.)
- Trình xử lý kiểm tra dữ liệu đầu vào và lượt truy cập thực hiện việc xử lý dữ liệu đầu vào và kiểm thử lượt truy cập ở độ phân giải của các lớp tổng hợp, để xác định xem liệu cử chỉ cuộn có thể chạy trên luồng của trình tổng hợp hay không và hoạt động kiểm thử lượt truy cập của quá trình kết xuất nào nên nhắm mục tiêu.
Cấu trúc mẫu trong thực tế
Trong ví dụ này có ba 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>
Cấu trúc quy trình, luồng và thành phần của các thẻ này như sau:
Hãy cùng tìm hiểu một ví dụ trong số 4 nhiệm vụ chính của việc kết xuất. Lưu ý:
- Kết xuất nội dung thành pixel trên màn hình.
- Tạo ảnh động cho nội dung từ trạng thái này sang trạng thái khác.
- Cuộn để phản hồi thao tác nhập.
- Định tuyến dữ liệu đầu vào một cách hiệu quả đến đúng vị trí để các 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 kết xuất DOM đã thay đổi cho thẻ 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.
- Trình kết xuất Blink cho trình tổng hợp biết rằng cần phải kết xuất.
- Trình tổng hợp cho Viz biết cần phải kết xuất.
- Viz báo hiệu việc bắt đầu kết xuất trở lại cho trình tổng hợp.
- 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.
- Trình chạy vòng lặp sự kiện luồng chính sẽ chạy vòng đời tài liệu.
- Luồng chính sẽ gửi kết quả đến luồng trình tổng hợp.
- Trình chạy vòng lặp sự kiện của trình tổng hợp sẽ chạy vòng đời tổng hợp.
- Bất kỳ tác vụ đường quét nào cũng được gửi đến Viz để thực hiện (thường có nhiều hơn một trong số các tác vụ này).
- Nội dung đường quét Viz trên GPU.
- 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à thay vào đó sử dụng một thứ gọi là mã đồ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.
- Một khung trình tổng hợp được gửi đến Viz.
- Viz tổng hợp các khung trình 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.
- Viz lên lịch bốc thăm.
- Viz vẽ khung trình tổng hợp tổng hợp lên màn hình.
Cách tạo ảnh động cho hiệu ứng chuyển đổi CSS trên thẻ 2:
- Luồng trình tổng hợp cho quá trình kết xuất bar.com đánh dấu ả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â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.)
- Một khung trình tổng hợp được gửi đến Viz.
- Viz tổng hợp các khung trình 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.
- Viz lên lịch bốc thăm.
- Viz vẽ khung trình tổng hợp tổng hợp lên màn hình.
Cách cuộn trang web trên thẻ ba:
- Một chuỗi các sự kiện
input(chuột, chạm hoặc bàn phím) sẽ thực hiện quá trình của trình duyệt. - Mỗi sự kiện được định tuyến đến luồng trình tổng hợp quá trình hiển thị của baz.com.
- Trình tổng hợp xác định xem luồng chính có cần biết về sự kiện hay không.
- Nếu cần, sự kiện này sẽ được gửi đến luồng chính.
- Luồng chính sẽ kích hoạt trình nghe sự kiện
input(pointerdown,touchstar,pointermove,touchmovehoặcwheel) để xem liệu trình nghe có gọipreventDefaulttrên sự kiện này hay không. - Luồng chính trả về thông tin liệu
preventDefaultcó được gọi đến trình tổng hợp hay không. - Nếu không, sự kiện nhập sẽ được gửi trở lại quy trình của trình duyệt.
- Quá trình trình duyệt sẽ chuyển đổi cử chỉ đó thành cử chỉ cuộn bằng cách kết hợp thao tác đó với các sự kiện khác gần đây.
- Cử chỉ cuộn được gửi lại một lần nữa đến luồng trình tổng hợp quá trình kết xuất của baz.com,
- Thao tác cuộn được áp dụng ở đó và luồng trình tổng hợp cho quy 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ẽ 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.
Lệnh 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). - Một khung trình tổng hợp được gửi đến Viz.
- Viz tổng hợp các khung của trình 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.
- Viz lên lịch bốc thăm.
- Viz vẽ khung trình tổng hợp tổng hợp lên màn hình.
Để định tuyến sự kiện click trên một siêu liên kết trong iframe #hai trên thẻ một:
- Một sự kiện
input(chuột, chạm hoặc bàn phím) xuất hiện trong quá trình của trình duyệt. Phương thức này thực hiện kiểm tra lượt truy cập gần đúng để xác định rằng quy trình hiển thị iframe bar.com sẽ nhận được lượt nhấp và gửi lượt nhấp đó đến đó. - Luồng trình tổng hợp cho bar.com định tuyến sự kiện
clickđến luồng chính cho bar.com và lên lịch cho tác vụ vòng lặp sự kiện kết xuất để xử lý. - Trình xử lý sự kiện đầu vào cho các lượt truy cập luồng 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để các tập lệnh quan sát. Không nghe thấypreventDefault, ứng dụng sẽ chuyển đến siêu liên kết. - Sau khi tải trang đích của siêu liên kết, trạng thái mới sẽ hiển thị, với các bước tương tự như ví dụ trước đó trong trường hợp "hiển thị DOM đã thay đổi". (Những thay đổi tiếp theo này không được mô tả ở đây.)
Đồ ăn mang đi
Có thể mất rất nhiều thời gian để ghi nhớ và tiếp thu cách hoạt động của tính năng kết xuất.
Điều quan trọng nhất cần ghi nhớ là quy trình kết xuất, thông qua quá trình 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 đó, các 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ơ hội mở rộng.
Mỗi thành phần đều đóng một vai trò quan trọng trong việc hỗ trợ hiệu suất và các tính năng của các ứng dụng web hiện đại.
Hãy tiếp tục đọc về các cấu trúc dữ liệu chính. Các cấu trúc này cũng quan trọng đối với RenderingNG như các thành phần mã.
Ảnh minh hoạ của Una Kravets.