Tóm tắt: Chromium đang tự động cập nhật khả năng tăng tốc phần cứng cho ảnh động SVG, biến đổi dựa trên tỷ lệ phần trăm, và sắp tới là ảnh động màu nền và đường dẫn cắt.
Khi nói đến hiệu suất ảnh động trên web, có thể sẽ xuất hiện thuật ngữ "tăng tốc phần cứng" và "tăng tốc GPU". Những điều này có nghĩa là gì? Kiểu tăng tốc phần cứng là những kiểu tận dụng GPU (Bộ xử lý đồ hoạ) thay vì CPU (Bộ xử lý trung tâm) để hiển thị kiểu hình ảnh. Điều này là do GPU có thể hiển thị các thay đổi về hình ảnh trên trang web nhanh hơn CPU.
Việc sử dụng GPU để giảm tải các hiệu ứng chuyển đổi và ảnh động dùng nhiều đồ hoạ có nghĩa là hình ảnh mượt mà hơn và ít bị giật hơn, vì các ảnh động này không bị ảnh hưởng của luồng chính. Bằng cách kéo chúng ra khỏi luồng chính, ảnh động của bạn sẽ bỏ qua lớp vỏ của các tập lệnh đang hoạt động khác đang chạy trên trang. Điều này sẽ làm chậm hình ảnh và tạo ra tình trạng giật.
Bật ảnh động được tăng tốc phần cứng
Ảnh động tăng tốc phần cứng được kết hợp dưới dạng các lớp và giúp nhà phát triển đạt được ảnh động 60 FPS (khung hình/giây) mượt mà để cải thiện hiệu suất kết xuất hình ảnh. Hiện có một số cách để chỉ định và bật các ảnh động và hiệu ứng chuyển tiếp đã tăng tốc phần cứng trên web:
- Sử dụng các hàm
transformcủa CSS hoặc chuyển đổi các giá trịopacityhayfilter - Thêm thuộc tính
will-changevào phần tử. - Tạo bản vẽ canvas động thông qua
OffscreenCanvas - Tạo bản vẽ WebGL 3D
opacity, filter và transform, nhưng background-color và clip-path sẽ sớm được đưa vào danh sách. Theo mặc định, tính năng nào khác sẽ được tăng tốc phần cứng trong Chromium? Có một vài thứ trong quy trình, bao gồm cả ảnh động SVG, thứ mà các nhà phát triển đã rất muốn yêu cầu.
Ảnh động SVG được tăng tốc phần cứng
SVG là một tiện ích bổ sung tuyệt vời cho mọi trang web và giờ đây, các hoạt động tương tác với SVG có thể hiệu quả hơn. Kể từ Chromium 89, Chrome sẽ kết hợp với các tính năng tương tự như Firefox để bật tính năng tăng tốc phần cứng theo mặc định đối với ảnh động SVG. Bạn, nhà phát triển, cần làm gì? Không có gì. Chế độ cài đặt này sẽ tự động áp dụng cho ảnh động SVG trong Chromium 89 trở lên.
Ví dụ:
Hãy cùng tìm hiểu sự khác biệt giữa ảnh động SVG có bật và không bật tính năng tăng tốc phần cứng. Chỉ báo tải là các thành phần thường dùng trên giao diện người dùng, chẳng hạn như thành phần xuất hiện trên facebook.com. Các chỉ báo này gợi ý các chỉ báo đang được thực hiện trên máy chủ, trong khi người dùng đang chờ phản hồi. Trong trường hợp hiển thị tại đây, phản hồi sẽ là tải kết quả bổ sung trong thanh bên.
Khi mở Công cụ cho nhà phát triển, chúng tôi có thể bắt đầu phân tích tài nguyên và thực sự thấy được sự khác biệt giữa trải nghiệm ảnh động được tăng tốc bằng CPU và GPU.
Bạn có thể thấy rằng ở bên trái (Chromium 87), quá trình vẽ lại xảy ra mỗi khi danh sách này tạo ảnh động (liên tục). Ở bên phải, không có tính năng tô lại nào (Chromium 89 và Firefox). Chúng ta có thể kiểm thử việc này trong bảng điều khiển Kết xuất của công cụ cho nhà phát triển, khi bật chế độ cài đặt ROM Paint.
Xem xét kỹ hơn bảng điều khiển Hiệu suất, bạn có thể thấy lại hiệu ứng này cũng như mức độ ảnh hưởng của nó đến hiệu suất tổng thể của tài sản web. Bạn tránh hoàn toàn việc kết xuất và vẽ thời gian cho ảnh động, nghĩa là ảnh động sẽ mượt mà hơn và các ứng dụng có hiệu suất cao hơn. Mặc dù Facebook sẽ không vận chuyển trình tải dựa trên SVG này cho đến khi trình duyệt hỗ trợ nhiều hơn cho SVG tăng tốc phần cứng, nhưng điều này sẽ cho phép linh hoạt hơn trong việc đáp ứng các yêu cầu về giao diện, mở rộng và độ phân giải, đồng thời bảo trì dễ dàng hơn.
Ảnh động theo tỷ lệ phần trăm
Nhóm Tương tác cũng cung cấp tính năng hỗ trợ cho ảnh động biến đổi theo tỷ lệ phần trăm trong Chromium 89. Ảnh động dựa trên tỷ lệ phần trăm mô tả các lượt tương tác bao gồm chuyển động dựa trên tỷ lệ phần trăm. Ví dụ: bạn có thể tăng tỷ lệ lên 20% hoặc trượt trình đơn thanh bên thích ứng từ ngoài màn hình bằng cách sử dụng translateX: -100%.
Các loại ảnh động giao diện người dùng này tương đối phổ biến, nhưng hiện không tận dụng được tính năng tăng tốc phần cứng vì trước đây chúng tôi không thể tổng hợp các ảnh động như vậy. Tỷ lệ phần trăm trong phép biến đổi phụ thuộc vào kích thước hộp (tức là bố cục), nhưng giờ đây, miễn là kích thước bố cục không thay đổi mọi khung hình, trình duyệt có thể tính toán trước các giá trị biến đổi tuyệt đối và chạy các giá trị đó như thể nhà phát triển đã cung cấp giá trị pixel. Tin vui là nhóm Chromium đang nghiên cứu tính năng này và sắp tới, những loại ảnh động này sẽ tự động được kết hợp và tăng tốc phần cứng.
Điều gì sẽ xảy ra tiếp theo?
Các ảnh động mới này sẽ giúp định kiểu web mượt mà hơn nhiều. Và như đã đề cập ở trên, đội ngũ của họ luôn tìm cách xem những nhu cầu web sắp tới xuất hiện. Hiện tại, chúng tôi dự định chuyển đổi
background-color và clip-path để tự động sử dụng tính năng tăng tốc phần cứng trong các phiên bản sau này của
Chromium.
background-color là ưu tiên do số lượng mức sử dụng cao cho các lượt chuyển đổi và hiệu ứng, còn clip-path cho phép hiệu ứng chuyển đổi hiệu quả hơn nhiều trên web. Khi hiệu suất kết hợp với tính tương tác, mọi người đều có lợi!
Ảnh bìa: Siora Photography cho Unsplash.