Tính năng mới trong Chrome 94

Pete LePage

Dưới đây là những gì bạn cần phải biết:

  • Không gian màu mặc định cho các phần tử <canvas> hiện được xác định chính thức trong thông số kỹ thuật là SRGB và bạn có thể thay đổi thành Display P3.
  • WebCodecs là một cách mới và cấp thấp để truy cập vào các bộ mã hoá và giải mã âm thanh và video tích hợp, rất quan trọng đối với việc phát trực tuyến trò chơi, trình chỉnh sửa video, v.v.
  • WebGPU bắt đầu thử nghiệm gốc.
  • Hội nghị PWA sẽ diễn ra vào ngày 6 đến 7 tháng 10.
  • Và còn nhiều tính năng khác.

Tôi là Pete LePage, làm việc và quay video tại nhà. Hãy cùng tìm hiểu những tính năng mới dành cho nhà phát triển trong Chrome 94.

Không gian màu mặc định cho các phần tử canvas

Một số người dùng rất quan tâm đến cách màu sắc hiển thị trên màn hình. Đối với nhiếp ảnh gia, minh hoạ in và nhiều người khác, màu sắc trên màn hình cần khớp với màu sắc được in. Kể từ Chrome 94, các phần tử <canvas> được quản lý màu đầy đủ bằng sRGB. Trước đây, sRGB là quy ước nhưng không được xác định rõ ràng trong thông số kỹ thuật.

opts = {colorSpace:'display-p3'};
const ctx = canvas.getContext('2d', opts);

Quan trọng hơn là giờ đây, bạn có thể chỉ định hệ màu nào cần sử dụng khi tạo <canvas> cho ngữ cảnh kết xuất 2d hoặc một đối tượng ImageData, bao gồm cả hệ màu P3.

WebCodecs

Việc đưa video lên trang rất dễ dàng. Tuy nhiên, nếu bạn cần làm một việc nào đó phức tạp hơn một chút và tương tác với các thành phần của luồng video, thì việc này sẽ rất khó và thường yêu cầu bạn phải sử dụng Web Assembly để vận chuyển các bộ mã hoá và giải mã của riêng bạn!

Tuy nhiên, việc truyền bộ mã hoá và giải mã của riêng bạn có nghĩa là viết mã mà trình duyệt đã có và không thể tận dụng tính năng tăng tốc phần cứng! API Bộ mã hoá và giải mã web cho phép sử dụng các thành phần đa phương tiện và bộ mã hoá và giải mã đã có trong trình duyệt.

Cá nhân tôi luôn gặp khó khăn khi nhớ các nút chuyển dòng lệnh chính xác để mã hoá video cho web hoặc chuyển đổi GIF thành tệp video. Bằng cách sử dụng các API có sẵn thông qua WebCodecs, tôi có thể nhanh chóng tạo một ứng dụng web đọc tệp và xuất đúng các tệp cần thiết cho web.

Đường dẫn từ Canvas hoặc ImageBitmap đến mạng hoặc đến bộ nhớ
Đường dẫn từ Canvas hoặc ImageBitmap đến mạng hoặc đến bộ nhớ

Ứng dụng web yêu cầu toàn quyền kiểm soát cách xử lý nội dung đa phương tiện, chẳng hạn như trình chỉnh sửa video, hội nghị truyền hình, ứng dụng phát trực tuyến, v.v. Quyền truy cập vào các trình duyệt tích hợp sẵn các chế độ điều khiển nội dung nghe nhìn là rất lớn.

Rất khó để trình bày bất kỳ nội dung hữu ích nào trong 30 giây. Vì vậy, hãy xem bài viết Xử lý video bằng WebCodecs trên web.dev để tìm hiểu sâu về nhiều mã và một số bản minh hoạ thú vị!

WebGPU

WebGPU là một API mới thể hiện các tính năng đồ hoạ hiện đại, cụ thể là Direct3D 12, Metal và Vulkan. Bạn có thể coi đây là WebGL, nhưng API này cung cấp quyền truy cập vào các tính năng nâng cao hơn của GPU, đồng thời hỗ trợ thực hiện các phép tính chung trên GPU.

Sơ đồ cấu trúc cho thấy mối liên kết giữa WebGPU với các API hệ điều hành và Direct3D 12, Metal và Vulkan.
Sơ đồ cấu trúc WebGPU

Chúng tôi đang bắt đầu một bản dùng thử theo nguyên gốc trong Chrome 94 và cả Safari lẫn Firefox hiện đang triển khai các bản dùng thử này.

Bản minh hoạ Babylon.js về một vùng biển động được mô phỏng bằng cách sử dụng tính năng chương trình đổ bóng tính toán của WebGPU.

François có một bài viết hay, Truy cập các tính năng GPU hiện đại bằng WebGPU trên web.dev với thông tin chi tiết và so sánh hiệu suất của phép nhân ma trận chạy trên CPU so với GPU. Dưới đây là gợi ý. GPU thắng.

Hội nghị về PWA

Hội nghị PWA sẽ diễn ra vào ngày 6 đến 7 tháng 10. Đây là một hội nghị trực tuyến miễn phí tập trung vào việc giúp tất cả mọi người thành công với Ứng dụng web tiến bộ. PWA Summit là một sự kiện hợp tác giữa các chuyên gia đến từ một số công ty tham gia vào việc tạo ra các công nghệ PWA: Google, Intel, Microsoft và Samsung.

Có rất nhiều nội dung và bài nói chuyện thú vị. Bạn có thể tìm hiểu thêm và đăng ký tại PWASummit.org. Tôi rất mong được gặp bạn tại sự kiện!

Và nhiều tính năng khác!

Tất nhiên còn nhiều tính năng khác.

Phương thức scheduler.postTask() ưu tiên cho phép bạn lên lịch các tác vụ và linh động thay đổi mức độ ưu tiên của chúng hoặc huỷ tất cả các tác vụ cùng nhau.

Nếu bạn từng sử dụng bố cục lại khi thanh cuộn xuất hiện, thì thuộc tính scrollbar-gutter sẽ làm bạn hài lòng. Thành phần này cung cấp quyền kiểm soát đối với sự hiện diện của rãnh thanh cuộn, cho phép bạn ngăn chặn các thay đổi về bố cục khi nội dung mở rộng.

Việc sử dụng WebSQL trong ngữ cảnh bên thứ ba hiện không còn được dùng nữa và dự kiến sẽ bị xoá trong Chrome 97. Chuẩn Cơ sở dữ liệu Web SQL đã bị loại bỏ vào tháng 11 năm 2010. Tính năng này chưa từng được triển khai trong Firefox và không còn được dùng nữa trong Safari kể từ năm 2019. Tính năng này sẽ không được dùng nữa và bị xoá khỏi Chrome khi mức sử dụng xuống thấp. Nếu bạn vẫn đang sử dụng WebSQL, thì đây là thời điểm thích hợp để bắt đầu lên kế hoạch di chuyển khỏi WebSQL.

Ngoài ra, API bàn phím ảo giúp bạn có nhiều quyền kiểm soát hơn đối với cách và thời điểm hiển thị bàn phím ảo trên màn hình. Tính năng này cho phép bạn kiểm soát rõ ràng mọi hành vi cuộn hoặc thay đổi bố cục khi bàn phím xuất hiện hoặc biến mất.

Tài liệu đọc thêm

Nội dung này chỉ đề cập đến một số điểm nổi bật chính. Hãy xem các đường liên kết bên dưới để biết thêm các thay đổi trong Chrome 94.

Đăng ký

Để nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Tôi là Pete LePage. Ngay khi Chrome 95 được phát hành, tôi sẽ quay lại đây để giới thiệu cho bạn những tính năng mới trong Chrome!