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, các phép biến đổi dựa trên tỷ lệ phần trăm và sắp tới là ảnh động có màu nền và đường dẫn clip.
Khi nói đến hiệu suất ảnh động trên web, các thuật ngữ ảnh động "được tăng tốc phần cứng" và "tăng tốc GPU" có thể sẽ xuất hiện. Nhưng những điều này thậm chí có nghĩa là gì? Kiểu có 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) để kết xuất kiểu hình ảnh. Điều này là do GPU có thể kết xuất 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 cần nhiều đồ hoạ giúp hình ảnh mượt mà hơn và ít bị giật hơn vì những ảnh động này không bị luồng chính ảnh hưởng. Bằng cách kéo chúng ra khỏi luồng chính, ảnh động của bạn sẽ bỏ qua phần 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 của bạn và tạo ra hiện tượng giật.
Bật ảnh động được tăng tốc phần cứng
Các ảnh động được 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 vài cách để chỉ định và bật các ảnh động và hiệu ứng chuyển đổi được tăng tốc phần cứng trên web:
- 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 một bản vẽ canvas động qua
OffscreenCanvas - Tạo bản vẽ 3D WebGL
opacity, filter và transform, nhưng background-color và clip-path sẽ sớm tham gia danh sách này. Tính năng nào khác đang được tăng tốc phần cứng theo mặc định trong Chromium? Sắp tới sẽ có một số tính năng trong tương lai, bao gồm ảnh động SVG – nội dung mà các nhà phát triển đã rất yêu cầu.
Hoạt ảnh SVG được tăng tốc phần cứng
SVG là một công cụ bổ sung tuyệt vời cho mọi trang web. Giờ đây, các hoạt động tương tác đó với SVG có thể mang lại hiệu quả cao hơn. Kể từ Chromium 89, Chrome sẽ cùng với Firefox để cho phép tăng tốc phần cứng trên ảnh động SVG theo mặc định. Bạn, với tư cách là nhà phát triển, cần làm gì? Không có gì xảy ra – thành phần 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 khi bật tính năng tăng tốc phần cứng và chưa bật tính năng tăng tốc phần cứng. Chỉ báo đang 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ư chỉ báo có trên facebook.com. Các chỉ báo này cho biết công việc đang được thực hiện trên máy chủ, trong khi người dùng chờ phản hồi. Trong trường hợp hiển thị ở đây, phản hồi sẽ là tải các kết quả bổ sung trong thanh bên.
Khi mở Công cụ cho nhà phát triển, chúng ta có thể bắt đầu lập hồ sơ 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), hoạt động vẽ lại sẽ diễn ra mỗi khi vòng quay tạo ảnh động (liên tục). Không có bản vẽ lại nào ở bên phải (Chromium 89 và Firefox). Chúng ta có thể kiểm thử điều này trong bảng điều khiển Kết xuất trong Công cụ cho nhà phát triển khi bật chế độ nhấp nháy Paint.
Khi xem xét kỹ hơn bảng điều khiển Hiệu suất, bạn có thể thấy lại tác động này và 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 được thời gian kết xuất và tô màu hoàn toàn cho ảnh động, nghĩa là ảnh động sẽ mượt mà hơn và các ứng dụng hiệu quả 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ợ SVG được tăng tốc phần cứng nhiều hơn, nhưng điều này sẽ cho phép bạn linh hoạt hơn trong các yêu cầu về tuỳ chỉnh giao diện, điều chỉnh tỷ lệ và độ phân giải, đồng thời dễ dàng bảo trì hơn.
Tỷ lệ phần trăm ảnh động
Nhóm Tương tác cũng hỗ trợ vận chuyển 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 hoạt động tương tác có chuyển động dựa trên tỷ lệ phần trăm. Ví dụ: bạn có thể tăng quy mô mục nào đó 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 lệnh như translateX: -100%.
Các loại ảnh động trên 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ể kết hợp các ảnh động như vậy. Tỷ lệ phần trăm trong các phép biến đổi phụ thuộc vào kích thước hộp (tức là bố cục), nhưng hiện tại, 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 nỗ lực phát triển tính năng này và sắp tới, các loại ảnh động này sẽ tự động được kết hợp và tăng tốc phần cứng.
Nội dung tiếp theo
Các ảnh động cập nhật này sẽ giúp việc tạo kiểu web trở nên mượt mà hơn nhiều. Và như đã đề cập ở trên, nhóm chúng tôi luôn
tìm hiểu xem cần phát triển web sắp tới như thế nào. Hiện tại, chúng tôi dự kiến 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 Chromium trong tương lai.
background-color là một mức độ ưu tiên do có số lượng mức sử dụng cao đối với các hiệu ứng chuyển đổi và hiệu ứng, còn clip-path cho phép các hiệu ứng chuyển đổi hiệu quả hơn nhiều trên web. Khi hiệu suất hoà với tính tương tác thì tất cả mọi người đều có lợi!
Ảnh bìa: Siora Photography cho Unsplash.