Sẵn sàng cho nội dung web thế hệ mới
RenderingNG là kiến trúc kết xuất thế hệ mới, vượt trội hơn đáng kể so với trước đó. RenderingNG được xây dựng trong hơn 8 năm và đại diện cho thành quả chung của nhiều nhà phát triển Chromium tận tâm. Việc này mở ra một lượng lớn tiềm năng tạo ra nội dung web nhanh, linh hoạt, đáng tin cậy, phản hồi và tương tác.
Tại đây, bạn sẽ tìm hiểu về những gì chúng tôi tạo ra, lý do chúng tôi xây dựng và cách chúng tôi hoạt động.
Bàn thắng của ngôi sao Bắc Đẩu
Mục tiêu quan trọng nhất thúc đẩy RenderingNG là việc triển khai công cụ trình duyệt và sự phong phú của các API kết xuất không phải là yếu tố hạn chế của trải nghiệm người dùng trên web.
Bạn không cần phải lo lắng về việc các lỗi trình duyệt khiến các tính năng trở nên không ổn định hoặc làm hỏng quá trình kết xuất trang web.
Không nên có vách đá biểu diễn bí ẩn. Ngoài ra, bạn cũng không cần phải xử lý các tính năng tích hợp sẵn còn thiếu.
Ứng dụng sẽ hoạt động bình thường.
Kết xuấtNG là một bước tiến rất lớn hướng tới mục tiêu trở thành sao bắc cầu. Trước khi RenderingNG, chúng tôi có thể (và đã) thêm tính năng kết xuất và cải thiện hiệu suất, nhưng gặp khó khăn trong việc làm cho các tính năng đó trở nên đáng tin cậy đối với nhà phát triển và có rất nhiều điểm hạn chế về hiệu suất. Giờ đây, chúng tôi đã có một kiến trúc giúp giải quyết một cách có hệ thống nhiều vấn đề trong số đó, đồng thời bỏ chặn các tính năng nâng cao mà trước đây được coi là không khả thi. Tính năng tự động gắn thẻ:
- Có các tính năng cốt lõi vững chắc trên nhiều nền tảng, thiết bị và tổ hợp hệ điều hành.
- Có hiệu suất đáng tin cậy và dễ dự đoán.
- Tối đa hoá việc sử dụng các tính năng phần cứng (lõi, GPU, độ phân giải màn hình, tốc độ làm mới, API đường quét cấp thấp).
- Chỉ thực hiện tác vụ cần thiết để hiển thị nội dung hiển thị.
- Có tính năng hỗ trợ tích hợp sẵn cho các mẫu thiết kế hình ảnh, ảnh động và thiết kế tương tác phổ biến.
- Cung cấp các API dành cho nhà phát triển để dễ dàng quản lý chi phí kết xuất.
- Cung cấp các điểm mở rộng quy trình kết xuất hình ảnh cho tiện ích bổ sung dành cho nhà phát triển.
- Tối ưu hoá tất cả nội dung — HTML, CSS, Canvas 2D, canvas 3D, hình ảnh, video và phông chữ.
So sánh với các công cụ kết xuất trình duyệt khác
Gecko và Webkit cũng đã triển khai hầu hết các tính năng cấu trúc giống như mô tả trong các bài đăng trên blog này và thậm chí trong một số trường hợp còn thêm chúng trước Chromium.
Bất kỳ trình duyệt nào nhanh hơn và đáng tin cậy hơn đều đáng để ăn mừng và có tác động thực sự. Mục tiêu cuối cùng là phát triển đường cơ sở cho tất cả các trình duyệt để các nhà phát triển có thể dựa vào đường cơ sở đó.
Kim tự tháp thành công
Triết lý của tôi là thành công là kết quả của việc đạt được độ tin cậy trước tiên, sau đó là hiệu suất có thể mở rộng và cuối cùng là khả năng mở rộng.
Giống như kim tự tháp trong thực tế, mỗi cấp độ cung cấp nền tảng nhất thiết vững chắc cho cấp độ trên.
Độ tin cậy
Nếu có thể có được trải nghiệm người dùng phong phú và phức tạp, thì điều đầu tiên chúng tôi cần là một nền tảng vững chắc. Các tính năng cốt lõi và nền tảng phải hoạt động chính xác và tiếp tục hoạt động theo thời gian. Điều quan trọng không kém là những tính năng đó có khả năng kết hợp tốt và không có lỗi hoặc hành vi lạ thường.
Vì lý do này, độ tin cậy là phần quan trọng nhất của RenderingNG. Độ tin cậy là kết quả của quá trình kiểm thử tốt, vòng hồi tiếp chất lượng, chỉ số và mẫu thiết kế phần mềm.
Để cho bạn thấy được tầm quan trọng của độ tin cậy, chúng tôi đã dành hầu hết 8 năm qua để hoàn thành phần này. Đầu tiên, chúng tôi xây dựng kiến thức sâu rộng về hệ thống – học hỏi từ báo cáo lỗi có điểm yếu và khắc phục chúng, khởi động kiểm thử toàn diện và tìm hiểu nhu cầu về hiệu suất của các trang web cũng như hạn chế về hiệu suất của Chromium. Sau đó, chúng tôi thiết kế từng bước một cách cẩn thận và triển khai các mẫu thiết kế và c��u trúc d�� liệu quan trọng. Chỉ khi đó, chúng tôi mới sẵn sàng thêm các dữ liệu gốc thực sự thế hệ mới cho thiết kế thích ứng, khả năng mở rộng và tuỳ chỉnh kết xuất hình ảnh.
Điều này không có nghĩa là không có cải thiện nào trong Chromium trong thời gian đó. Trên thực tế, ngược lại! Độ tin cậy và hiệu suất tăng đều trong những năm đó nhờ việc tái cấu trúc và triển khai từng bước cải tiến.
Kiểm thử và chỉ số
Trong 8 năm qua, chúng tôi đã thêm hàng chục nghìn phương thức kiểm thử đơn vị, kiểm thử hiệu suất và tích hợp. Ngoài ra, chúng tôi đã phát triển các chỉ số toàn diện giúp đo lường nhiều khía cạnh về cách hoạt động kết xuất của Chromium hoạt động trong kiểm thử cục bộ, trong các phép đo điểm chuẩn hiệu suất và trong môi trường thực tế trên các trang web thực, với người dùng và thiết bị thực.
Nhưng dù RenderingNG (hoặc công cụ kết xuất của trình duyệt khác có hiệu quả đến đâu) thì vẫn sẽ không dễ phát triển cho web nếu có nhiều lỗi hoặc khác biệt về hành vi giữa các trình duyệt. Để giải quyết vấn đề này, chúng tôi cũng tối đa hoá việc sử dụng Kiểm thử nền tảng web. Mỗi lần kiểm thử này xác minh một mẫu sử dụng nền tảng web mà tất cả các trình duyệt đều nên hướng đến. Chúng tôi cũng theo dõi chặt chẽ các chỉ số để bỏ qua nhiều bài kiểm thử hơn theo thời gian và tăng khả năng tương thích cốt lõi.
Kiểm tra nền tảng web là một nỗ lực cộng tác. Ví dụ: các kỹ sư Chromium chỉ thêm khoảng 10% tổng số thử nghiệm WPT cho các tính năng của CSS; phần còn lại là các nhà cung cấp trình duyệt, người đóng góp độc lập và tác giả thông số kỹ thuật. Cần có cả một ngôi làng để nâng cao khả năng tương tác của web!
Các mẫu thiết kế phần mềm tốt
Đổi lại, việc cung cấp phần mềm chất lượng một cách đáng tin cậy sẽ dễ dàng hơn rất nhiều nếu mã dễ hiểu và được thiết kế theo cách giảm thiểu khả năng xảy ra lỗi. Chúng ta sẽ nói nhiều hơn nữa về thiết kế phần mềm của RenderingNG trong các bài đăng trên blog tiếp theo.
Hiệu suất có thể mở rộng
Việc đạt được hiệu suất tuyệt vời – trên các chiều về tốc độ, bộ nhớ và mức sử dụng năng lượng – là khía cạnh quan trọng nhất tiếp theo của RenderingNG. Chúng tôi muốn các hoạt động tương tác với mọi trang web diễn ra suôn sẻ và phản hồi nhanh, nhưng không làm giảm độ ổn định của thiết bị.
Tuy nhiên, chúng tôi không chỉ muốn có hiệu suất, mà chúng tôi muốn có hiệu suất có thể mở rộng – một cấu trúc hoạt động ổn định trên các máy cấp thấp và cao cấp, cũng như trên các nền tảng hệ điều hành. Tôi gọi đây là việc mở rộng quy mô – tận dụng tất cả những gì thiết bị phần cứng có thể đạt được và giảm quy mô – tối đa hoá hiệu suất và giảm nhu cầu cho hệ thống khi cần.
Để đạt được mục tiêu đó, chúng tôi cần tận dụng tối đa tính năng lưu vào bộ nhớ đệm, cách ly hiệu suất và tăng tốc phần cứng GPU. Hãy lần lượt xem xét từng yếu tố. Và để cho chi tiết hơn, hãy nghĩ về cách mỗi thành phần đóng góp vào hiệu suất của một tương tác cực kỳ quan trọng trên trang web: cuộn.
Chức năng lưu vào bộ nhớ đệm
Trong nền tảng giao diện người dùng động và tương tác như web, lưu vào bộ nhớ đệm là cách quan trọng nhất để cải thiện đáng kể hiệu suất. Hình thức lưu vào bộ nhớ đệm phổ biến nhất trong trình duyệt là bộ nhớ đệm HTTP, nhưng quá trình kết xuất cũng có nhiều bộ nhớ đệm. Bộ nhớ đệm quan trọng nhất để cuộn là kết cấu GPU và danh sách hiển thị được lưu vào bộ nhớ đệm, cho phép cuộn cực nhanh, đồng thời giảm thiểu tiêu hao pin và hoạt động tốt trên nhiều thiết bị.
Việc lưu vào bộ nhớ đệm giúp cải thiện thời lượng pin và tốc độ khung hình ảnh động khi cuộn, nhưng điều quan trọng hơn nữa là việc này giúp bỏ chặn sự tách biệt hiệu suất với luồng chính.
Tách biệt hiệu suất
Trên máy tính để bàn hiện đại, bạn không bao giờ phải lo lắng về việc các ứng dụng nền làm chậm thiết bị bạn đang làm việc. Đó là do tính năng đa nhiệm trước, hay còn gọi là tách biệt hiệu suất: đảm bảo các nhiệm vụ độc lập không làm chậm tiến độ của nhau.
Trên web, ví dụ tốt nhất về cách ly hiệu suất là cuộn. Ngay cả trên các trang web có nhiều JavaScript chậm, việc cuộn có thể rất mượt mà vì nó chạy trên một luồng khác không phải phụ thuộc vào JavaScript và luồng bố cục. Chúng tôi đã nỗ lực rất nhiều vào Kết xuấtNG để đảm bảo rằng mọi thao tác cuộn có thể thực hiện đều được phân luồng, thông qua việc lưu vào bộ nhớ đệm mà không chỉ danh sách hiển thị cho các tình huống phức tạp hơn. Ví dụ: đoạn mã đại diện cho các phần tử có vị trí cố định và cố định, trình nghe sự kiện thụ động và tính năng hiển thị văn bản chất lượng cao.
Tăng tốc GPU
GPU giúp việc tạo pixel và vẽ lên màn hình nhanh hơn đáng kể – trong nhiều trường hợp, mọi pixel có thể được vẽ song song với mọi pixel khác, dẫn đến tốc độ tăng đáng kể. Một thành phần chính của RenderingNG là đường quét GPU và vẽ ở mọi nơi. Công nghệ này sử dụng GPU trên tất cả các nền tảng và thiết bị để tăng tốc độ kết xuất và tạo ảnh động cho nội dung web. Điều này đặc biệt quan trọng trên các thiết bị cấp thấp hoặc rất cao cấp, thường có GPU mạnh hơn nhiều so với các phần khác của thiết bị.
Khả năng mở rộng: Công cụ phù hợp cho công việc
Khi đã có được độ tin cậy và hiệu suất có thể mở rộng, chúng tôi hiện đã sẵn sàng xây dựng trên hàng loạt công cụ để giúp nhà phát triển mở rộng các phần tích hợp của HTML, CSS và Canvas, cũng như theo cách không làm mất đi bất kỳ hiệu suất và độ tin cậy nào mà chúng tôi đã nỗ lực đạt được.
Giao diện này bao gồm các API tích hợp sẵn cùng với tiếp thị JavaScript cho các trường hợp sử dụng nâng cao của thiết kế thích ứng, kết xuất dần dần, độ mượt và khả năng phản hồi, cũng như kết xuất theo luồng.
Các API web mở sau đây, do Chromium hỗ trợ, đã được RenderingNG cung cấp và trước đây được coi là không khả thi.
Tất cả đều được phát triển dựa trên thông số kỹ thuật mở và sự cộng tác của các đối tác web mở — các kỹ sư tại các trình duyệt, chuyên gia và nhà phát triển web khác. Trong các bài đăng tiếp theo trên blog, chúng ta sẽ đi sâu vào từng yếu tố và giải thích cách RenderingNG giúp chúng ta có thể thực hiện điều này.
- content- visibility: cho phép các trang web dễ dàng tránh hiển thị công việc cho nội dung ngoài màn hình và kết xuất vào bộ nhớ đệm đối với các chế độ xem ứng dụng trang đơn hiện không hiển thị.
- OffscreenCanvas: cho phép kết xuất canvas (cả API canvas 2D và WebGL) chạy trên luồng riêng để có hiệu suất tuyệt vời và đáng tin cậy. Dự án này cũng là một cột mốc quan trọng khác của web – đó là API web đầu tiên cho phép JavaScript (hoặc WebAssembly!) kết xuất một tài liệu trên trang web từ nhiều luồng.
- Truy vấn vùng chứa: cho phép một thành phần duy nhất bố trí một cách linh hoạt, bỏ chặn toàn bộ thành phần "cắm là chạy" (hiện đang là phương thức triển khai thử nghiệm).
- Cách ly nguồn gốc: cho phép các trang web chọn sử dụng nhiều tính năng cách ly hiệu suất hơn giữa các iframe.
- worklet sơn ngoài luồng: mang đến cho nhà phát triển cách mở rộng cách vẽ các phần tử, bằng mã chạy trên luồng của trình tổng hợp.
Ngoài các API web rõ ràng, tính năng Kết xuấtNG còn cho phép chúng tôi hiển thị một số "tính năng tự động" rất quan trọng mang lại lợi ích cho tất cả các trang web:
- Cách ly trang web: đặt iframe trên nhiều nguồn gốc vào nhiều quy trình CPU để cách ly hiệu suất và bảo mật hiệu quả hơn.
- Vulkan, D3D12 và Metal: tận dụng các API cấp thấp hơn sử dụng GPU hiệu quả hơn OpenGL.
- Ảnh động kết hợp khác: SVG, màu nền.
Các tính năng bổ sung sắp ra mắt được RenderingNG bỏ chặn mà chúng tôi rất hào hứng bao gồm:
- Ảnh động liên kết cuộn.
- DOM ẩn, nhưng có thể tìm kiếm và truy cập được.
- Chuyển đổi thành phần dùng chung.
- Bố cục tuỳ chỉnh.
- Tổng hợp ngoài luồng; tách luồng và tổng hợp.
Các dự án chính tạo nên RenderingNG
Dưới đây là danh sách các dự án chính trong RenderingNG.
CompositeAfterPaint
Composite SauPaint loại bỏ việc tổng hợp từ kiểu, bố cục và lớp vẽ, cho phép cải thiện đáng kể độ tin cậy và hiệu suất dự đoán được, công suất tăng lên và sử dụng ít bộ nhớ hơn mà không làm giảm hiệu suất.
| Năm | Tiến độ |
|---|---|
| 2015 | Gửi danh sách hiển thị. |
| 2017 | Gửi trường hợp vô hiệu hoá mới. |
| 2018 | Cây tài sản đóng tàu phần 1. |
| 2019 | Cây tài sản đóng tàu phần 2. |
| 2021 | Đã hoàn tất chuyển dự án. |
LayoutNG
Đây là bản viết lại từ đầu tất cả thuật toán bố cục, nhằm cải thiện đáng kể độ tin cậy và hiệu suất dễ dự đoán hơn.
Đọc thêm về LayoutNG.
| Năm | Tiến độ |
|---|---|
| 2019 | Luồng khối tàu. |
| 2020 | Giao hàng linh hoạt, chỉnh sửa. |
| 2021 | Gửi những mặt hàng khác. |
BlinkNG
Chúng tôi đã tái cấu trúc và dọn dẹp Công cụ kết xuất Blink thành các giai đoạn quy trình được phân tách rõ ràng. Điều này cho phép lưu vào bộ nhớ đệm tốt hơn, có độ tin cậy cao hơn cũng như các tính năng tham gia lại hoặc hiển thị trễ, chẳng hạn như chế độ hiển thị nội dung và truy vấn vùng chứa.
Tăng tốc GPU ở mọi nơi
Tính năng tăng tốc GPU mang lại tốc độ rất lớn cho hầu hết nội dung, vì mọi pixel đều có thể được xử lý song song. Đây cũng là một phương pháp hiệu quả để cải thiện hiệu suất trên các thiết bị cấp thấp, thường vẫn có GPU.
| Năm | Tiến độ |
|---|---|
| 2014 | Hỗ trợ Canvas. Đã vận chuyển nội dung chọn tham gia trên Android. |
| 2016 | Giao hàng trên máy Mac. |
| 2017 | GPU được sử dụng trong hơn 60% lượt xem trang trên Android. |
| 2018 | Cài đặt trên Windows, ChromeOS và Android Go. |
| 2019 | Tạo điểm ảnh GPU theo luồng. |
| 2020 | Gửi nội dung còn lại trên Android. |
Cuộn, ảnh động và giải mã theo chuỗi
Nỗ lực lâu dài nhằm di chuyển tất cả ảnh động cuộn, ảnh động không tạo bố cục và giải mã hình ảnh ra khỏi luồng chính. Quá trình này đang diễn ra.
| Năm | Tiến độ |
|---|---|
| 2011 | Hỗ trợ ban đầu cho ảnh động và cuộn theo chuỗi. |
| 2015 | Ép lớp. |
| 2016 | Cuộn bổ sung toàn cục. |
| 2017 | Giải mã hình ảnh trên luồng trình tổng hợp. |
| 2018 | Ảnh động trên luồng trình tổng hợp. |
| 2020 | Luôn kết hợp vị trí cố định. |
| 2021 | Ảnh động chuyển đổi tỷ lệ phần trăm, ảnh động SVG. |
Hình ảnh
Một quy trình vẽ và đường quét tập trung cho Chromium giúp tăng công suất, tối ưu hoá bộ nhớ và cho phép sử dụng tối ưu các tính năng phần cứng. Thư viện này có những lợi ích khác mà các nhà phát triển web ít thấy nhưng người dùng rất dễ thấy, chẳng hạn như bỏ chặn tính năng Tách biệt trang web và tách quy trình kết xuất khỏi quá trình kết xuất giao diện người dùng của trình duyệt.
| Năm | Tiến độ |
|---|---|
| 2018 | OOP-R được vận chuyển trên Android, Mac và Windows. |
| 2019 | Đã vận chuyển OOP-D. OOP-R được vận chuyển đến mọi nơi (ngoại trừ Canvas). SkiaRenderer trên Linux. |
| 2020 | SkiaRenderer trên Windows và Android. Vulkan xuất xưởng trên Android. |
| 2021 | SkiaRenderer đã được chuyển trên máy Mac (và ChromeOS sẽ sớm ra mắt). |
Định nghĩa của các thuật ngữ trong biểu đồ ở trên:
- OOP-D
- Trình tổng hợp hiển thị nằm ngoài quy trình. Quá trình kết hợp hiển thị cũng giống như một trình tổng hợp hệ điều hành. Ngoài quy trình có nghĩa là thực hiện trong quy trình Viz thay vì quy trình hiển thị của trang web hoặc quy trình giao diện người dùng của trình duyệt.
- Hàm OOP-R
- Đường quét nằm ngoài quy trình. Đường quét đang chuyển đổi danh sách hiển thị thành pixel. Ngoài quy trình có nghĩa là thực hiện trong quy trình Viz thay vì quy trình hiển thị của trang web.
- SkiaRenderer
- Một cách triển khai trình tổng hợp hiển thị mới có thể hỗ trợ quá trình thực thi trên nhiều API GPU cơ bản như Vulkan, D3D12 hoặc Metal.
Kết xuất canvas theo chuỗi và tăng tốc
Đây là dự án đã giúp OffscreenCanvas có thể hoạt động.
| Năm | Tiến độ |
|---|---|
| 2018 | Gửi ngoài màn hình canvas. |
| 2019 | Gửi ImageBitmapRenderingContext. |
| 2021 | Gửi OOP-R. |
VideoNG
VideoNG là một nỗ lực lâu dài để mang lại trải nghiệm phát video hiệu quả, đáng tin cậy và chất lượng cao trên web.
| Năm | Tiến độ |
|---|---|
| 2014 | Giới thiệu khung kết xuất dựa trên Mojo. |
| 2015 | Đã giao Project Build (Bơ dự án) và lớp phủ video để kết xuất video mượt mà hơn. |
| 2016 | Đã vận chuyển các quy trình giải mã và kết xuất hợp nhất cho Android và máy tính. |
| 2017 | Đã vận chuyển HDR và kết xuất video đã chỉnh màu. |
| 2018 | Quy trình giải mã video dựa trên Mojo đã được vận chuyển. |
| 2019 | Quy trình kết xuất video dựa trên Nền tảng đã chuyển. |
| 2021 | Đã vận chuyển dịch vụ hỗ trợ kết xuất nội dung được bảo vệ 4K trên ChromeOS. |
Định nghĩa của các thuật ngữ trong biểu đồ ở trên:
- Nước sốt Mojo
- Hệ thống con IPC thế hệ mới dành cho Chromium.
- Bề mặt
- Ý tưởng là một phần trong thiết kế của dự án Viz.
Hình minh hoạ: Una Kravets.