Tại đây, bạn sẽ thấy cách thành phần RenderingNG các phần khác được thiết lập và cách quy trình kết xuất chạy qua chúng.
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 đầu vào 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 thẻ trình duyệt có khung cấp cao nhất, 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 của chúng.
Hiệu ứng hình ảnh là 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 nhiệm vụ này được phân chia hợp lý trên nhiều giai đoạn và mã thành phần. Các thành phần kết thúc trong các quá trình, luồng và CPU khác nhau các thành phần phụ trong các luồng đó. Mỗi chiến dịch đề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 trên web.
Cấu trúc quy trình kết xuất
Quá trình kết xuất sẽ diễn ra theo 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 thực hiện. Mỗi giai đoạn biểu thị mã thực hiện một tác vụ được xác định rõ trong kết xuất hình ảnh. Các cấu phần phần mềm là cấu trúc dữ liệu là đầ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.
- 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à ô hoạ tiết GPU hiện có (nếu 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ẽ bảng công việc: lần lượt biến danh sách hiển thị, hình ảnh được mã hoá và vẽ mã worklet vào Gạch kết cấu 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, sơn trước và tô màu để tạo hiệu ứng hình ảnh, chúng có thể được chạy hoàn toàn trên luồng 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ể coi là phiên bản đơn giản của cùng quy trình này (và trên thực tế, việc 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 thành ô kết cấu GPU sau đó được cắm vào khung 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ải thiện hiệu suất và tăng khả năng tách biệt bảo mật giữa các trang web và từ trạng thái trình duyệt, và độ ổn định cũng như khả năng cách ly bảo mật với phần cứng GPU.
- Quá trình kết xuất kết xuất, tạo ảnh động, cuộn và định tuyến đầu vào cho một trang web và thẻ. Có một số quy trình kết xuất.
- 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 địa chỉ, tiêu đề thẻ và biểu tượng) và các tuyến đường còn lại vào 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 và 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 kết thúc trong nhiều quá trình kết xuất.
Nhiều thẻ trình duyệt hoặc cửa sổ của cùng một trang web thường hiển thị khác nhau trừ phi các thẻ này có liên quan với nhau, ví dụ như một thẻ mở cửa sổ kia. Chromium có thể đặt nhiều thẻ dưới áp lực lớn về bộ nhớ trên máy tính từ cùng một trang web vào cùng một quá trình hiển thị ngay cả khi không có liên quan.
Trong một thẻ trình duyệt, khung hình từ các trang web khác nhau luôn nằm trong các quá trình kết xuất khác nhau với nhau, nhưng các khung hình từ cùng một trang web luôn nằm trong cùng một quy trình kết xuất. Từ góc độ kết xuất, lợi thế quan trọng của nhiều quá trình kết xuất là iframe giữa các trang web và các thẻ được tách biệt 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 quy trình riêng giúp đảm bảo tính ổn định khi đối mặt với các lỗi trong Trình điều khiển GPU hoặc phần cứng. Bạn cũng nên dùng mật khẩu này để cách ly bảo mật, điều này rấ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ổ, và tất cả đều có pixel giao diện người dùng trình duyệt để vẽ, bạn có thể thắc mắc: tại sao chỉ có đúng một quy trình trên trình duyệt? Lý do là tại mỗi thời điểm, chỉ một trong số đó được lấy tiêu điểm; thực tế, các thẻ trình duyệt không hiển thị hầu hết đều bị vô hiệu hoá và loại bỏ 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 giao diện người dùng trình duyệt ngày càng được triển khai trong các quá 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. nhưng để tận dụng sự dễ dàng của công cụ kết xuất web của Chromium.
Trên 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 (đ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, và WebView chỉ có một quy trình kết xuất hình ảnh.
Đô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
Luồng giúp đạt được khả năng phản hồi và tách biệt hiệu suất bất kể các tác vụ chậm. song song quy trình và lưu vào 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
thử nghiệm lượt truy cập, gửi sự kiện theo 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ã.
- Trình chạy web 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à hoạt ảnh của nội dung web,
tính toán việc phân lớp tối ưu nội dung trên web,
và điều phối giải mã hình ảnh, vẽ bản vẽ và nhiệm 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ụ của đường quét Viz, và thực thi các tác vụ giải mã hình ảnh, vẽ bản vẽ và đường quét dự phòng.
- Các luồng đầu ra âm thanh, bộ mã hoá và nội dung nghe nhìn giải mã, xử lý và đồng bộ hoá 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ó ý nghĩa cực kỳ quan trọng đối với cách ly hiệu suất ảnh động và cuộn từ công việc của luồng chính.
Chỉ có một luồng chính trong 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. Nói chung, không phải chỉ có một vấn đề, vì tất cả các thao tác thực sự tốn kém trên luồng trình tổng hợp được ủy quyền cho các luồng worker của trình tổng hợp hoặc quy trình Viz, và công việc này có thể được thực hiện 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ì thiết bị này có nhiều lõi CPU hơn và ít bị hao pin hơn thiết bị di động. Đây là ví dụ về tăng quy mô và giảm quy mô.
Cấu trúc phân luồng của quy trình kết xuất là ứng dụng của ba 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 tới các luồng khác để duy trì luồng mẹ phản hồi các yêu cầu khác đồng thời. Luồng chính Các luồng trợ giúp của trình trợ giúp và trình tổng hợp là những ví dụ điển hình về kỹ thuật này.
- Việc lưu vào bộ đệm nhiều lần: hiện nội dung đã kết xuất trước đó trong khi hiển thị 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.
- Tạo song song đường ống: chạy quy trình kết xuất ở nhiều vị trí đồng thời. Đây là cách cuộn và hoạt ảnh có thể nhanh; ngay cả khi một 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 đầu vào khác đến đúng quy trình kết xuất; bố trí và tô điểm cho 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 tác vụ giải mã hình ảnh và đường quét hoặc giải mã dự phòng.
Quy trình kết xuất và kết hợp của trình duyệt tương tự nhau vào mã và chức năng của quá trình kết xuất, ngoại trừ 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ì không cần hiệu suất tách biệt với các tác vụ chuỗi chính dài, vì không có theo thiết kế.
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 ô hoạ tiết GPU, và vẽ các khung trình kết hợp vào màn hình.
- Luồng trình kết hợp hiển thị tổng hợp và tối ưu hoá hoạt động tổng hợp từ mỗi quá 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 để trình bày 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 giải pháp Vulkan). Trong Android WebView, có một luồng kết xuất cấp hệ điều hành riêng biệt để vẽ nhờ 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 nào có thể làm giảm tốc độ 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ể chạy 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 tra và điều phối lượt truy cập sự kiện đầu vào thực thi 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 mục tiêu và chạy sự kiện đầu vào các thuật toán điều phối và 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 sẽ chạy trên sự kiện vòng lặp và thời điểm. Chế độ này lên lịch kết xuất theo tần suất phù hợp với thiết bị màn hình.
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. Khung hình là cục bộ đối với quá trình kết xuất nếu khung đó được kết xuất trong quá 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; đường liên kết màu cam hiển thị trong một giây, còn URL màu xanh lam ở vị trí 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ể hoặc không ở trong 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 trong vòng đời chạy ảnh động, cuộn, kết hợp, đường quét, giải mã và kích hoạt các bước trong quy trình kết xuất hình ảnh. (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 xử lý đầu vào và kiểm tra lượt truy cập khi phân giải các lớp tổng hợp. để xác định xem các cử chỉ cuộn có thể chạy trên luồng của trình tổng hợp hay không, và nên nhắm mục tiêu kiểm thử lượt truy cập trong quá trình hiển thị nào.
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 quá trình quét hoàn tất, và thay vào đó sử dụng một tính năng gọi là mã thông báo đồng bộ hoá phải được giải quyết bằng 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 hiển thị 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 một ảnh động trong vòng lặp sự kiện 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 người nghe có gọipreventDefaulttrên sự kiện 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 sẽ được áp dụng ở đó và luồng trình tổng hợp cho thanh.com
quá trình kết xuất đá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 trình tổng hợp cho quá trình kết xuất foo.com, quá trình hiển thị 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. Công cụ này thực hiện một thử nghiệm 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 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 bài kiểm thử lượt truy cập luồng chính của bar.com để xác định
Người dùng đã nhấp vào phần tử DOM trong iframe 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. - Khi trang đích của siêu liên kết này được tải, trạng thái mới sẽ được hiển thị, với các bước tương tự như "DOM đã thay đổi của kết xuất kết xuất" ví dụ trước. (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.
Bài học quan trọng nhất là quy trình kết xuất, thông qua việc mô-đun hoá và chú ý đến từng chi tiết, đã được chia thành nhiều thành phần độc lập. Sau đó, các thành phần này được chia song song để tối đa hoá các quy trình và luồng hiệu suất có thể mở rộng và cơ hội mở rộng.
Mỗi thành phần đều đóng vai trò quan trọng trong việc thúc đẩy hiệu suất và các tính năng của ứng dụng web hiện đại hơn.
Hãy đọc tiếp phần cấu trúc dữ liệu chính hai định dạng 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.