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:

  • Hệ 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 hệ màu này thành Display P3.
  • WebCodecs là một cách mới ở 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 sẵn, rất quan trọng đối với việc truyền trực tuyến trò chơi, trình chỉnh sửa video, v.v.
  • WebGPU bắt đầu bản dùng thử theo nguyên gốc.
  • Hội nghị PWA sẽ diễn ra từ ngày 6 đến ngày 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à chụp ảnh tại nhà, hãy cùng tìm hiểu sâu hơn và xem có gì 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

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

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

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

WebCodecs

Đặt video trên một trang cũng khá dễ dàng. Tuy nhiên, nếu bạn cần thực hiện một thao tác 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, việc đó sẽ khó khăn và thường đòi hỏi bạn phải sử dụng Web hội để gửi các bộ mã hoá và giải mã của riêng mình!

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à trình duyệt không thể tận dụng tính năng tăng tốc phần cứng! Web Codecs API giúp bạn có thể 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, tôi luôn gặp khó khăn trong việc 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 tệp GIF thành tệp video. Khi 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ó thể đọc tệp và xuất đúng 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ớ

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

Thật khó để hiển thị bất kỳ thông tin hữu ích nào trong 30 giây. Vì vậy, hãy xem phần Xử lý video bằng WebCodecs trên web.dev để tìm hiểu sâu với rất 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 biệt là Direct3D 12, Metal và Vulkan. Bạn có thể hình dung như WebGL, nhưng công cụ 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 kết nối WebGPU giữa API hệ điều hành với Direct3D 12, Metal và Vulkan.
Sơ đồ cấu trúc WebGPU

Phiên bản này đang bắt đầu bản dùng thử theo nguyên gốc trong Chrome 94, đồng thời cả Safari và Firefox hiện đều đang triển khai.

Bản minh hoạ Babylon.js về biển động được mô phỏng bằng chức năng đổ bóng điện toán của WebGPU.

François có một bài viết rất hay, Truy cập các tính năng GPU hiện đại bằng WebGPU trên web.dev kèm theo 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. Sau đây là một gợi ý. GPU thắng.

Hội nghị PWA

Hội nghị PWA sẽ diễn ra từ ngày 6 đến ngày 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 mọi người thành công với Ứng dụng web tiến bộ. Hội nghị PWA là sự kiện cộng tác giữa các thành viên thuộc một số công ty liên quan đến việc tạo ra công nghệ PWA: Google, Intel, Microsoft và Samsung.

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

Và nhiều kiến thức khác!

Tất nhiên, vẫn còn nhiều lý do khác.

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

Nếu bạn từng thay đổi bố cục khi thanh cuộn xuất hiện, thì thuộc tính scrollbar-gutter sẽ làm bạn hài lòng. Thuộc tính này giúp kiểm soát sự hiện diện của các rãnh trên thanh cuộn, cho phép bạn ngă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 và dự kiến sẽ bị xoá trong Chrome 97. Tiêu chuẩn về Cơ sở dữ liệu Web SQL đã bị loại bỏ từ 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 dùng trong Safari vào 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 thấp. Nếu bạn vẫn đang sử dụng WebSQL, thì bây giờ là thời điểm tốt để bắt đầu lập kế hoạch di chuyển từ WebSQL.

Còn API bàn phím ảo cho phép bạn kiểm soát tốt hơn cách thức và thời điểm hiển thị bàn phím ảo trên màn hình. Thư viện 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 đối vớ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

Bài viết này chỉ bao gồm một số điểm nổi bật chính. Hãy truy cập vào các đường liên kết bên dưới để biết thêm các thay đổi khác 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 và ngay sau khi Chrome 95 được phát hành, tôi sẽ sẵn sàng cho bạn biết các tính năng mới của Chrome!