Nghiên cứu điển hình về hiệu suất của ảnh động hướng thao tác cuộn

Yuriko Hirota

Ảnh động dựa trên thao tác cuộn có gì mới?

Ảnh động dựa trên thao tác cuộn là một cách để thêm tính tương tác và sự hấp dẫn về mặt thị giác cho trang web hoặc ứng dụng web của bạn, được kích hoạt theo vị trí cuộn của người dùng. Đây có thể là một cách hiệu quả để giữ chân người dùng và giúp trang web của bạn trở nên hấp dẫn hơn về mặt thị giác.

Trước đây, cách duy nhất để tạo ảnh động dựa trên thao tác cuộn là phản hồi sự kiện cuộn trên luồng chính. Điều này gây ra 2 vấn đề lớn:

• Thao tác cuộn được thực hiện trên một luồng riêng biệt và do đó, các sự kiện cuộn được gửi không đồng bộ.
• Ảnh động trên luồng chính dễ bị giật.

Điều này khiến việc tạo ảnh động dựa trên thao tác cuộn có hiệu suất cao và đồng bộ với thao tác cuộn trở nên bất khả thi hoặc rất khó thực hiện.

Giờ đây, chúng tôi đang giới thiệu một bộ API mới để hỗ trợ ảnh động dựa trên thao tác cuộn. Bạn có thể sử dụng bộ API này từ CSS hoặc JavaScript. API này cố gắng sử dụng ít tài nguyên luồng chính nhất có thể, giúp bạn dễ dàng triển khai ảnh động dựa trên thao tác cuộn và cũng mượt mà hơn nhiều. API ảnh động dựa trên thao tác cuộn hiện được hỗ trợ trong các trình duyệt sau:

Bài viết này so sánh phương pháp mới với kỹ thuật JavaScript cổ điển để cho thấy mức độ dễ dàng và mượt mà của các ảnh động dựa trên thao tác cuộn khi dùng API mới.

API CSS ảnh động dựa trên thao tác cuộn so với JavaScript thông thường

Thanh tiến trình trong ví dụ sau được tạo bằng các kỹ thuật JavaScript của lớp.

Tài liệu này phản hồi mỗi khi sự kiện scroll xảy ra để tính toán tỷ lệ phần trăm scrollHeight mà người dùng đã cuộn.

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

Bản minh hoạ sau đây cho thấy cùng một thanh tiến trình bằng cách sử dụng API mới với CSS.

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

Tính năng CSS animation-timeline mới sẽ tự động chuyển đổi một vị trí trong phạm vi cuộn thành tỷ lệ phần trăm tiến trình, do đó thực hiện tất cả các thao tác phức tạp.

Giờ đây, hãy xem xét phần thú vị này – giả sử bạn đã triển khai một phép tính siêu nặng trên cả hai phiên bản của trang web, phép tính này sẽ tiêu tốn hầu hết các tài nguyên của luồng chính.

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

Như bạn có thể dự đoán, phiên bản JavaScript cổ điển trở nên giật và chậm chạp do điểm giao nhau của các tài nguyên luồng chính. Mặt khác, phiên bản CSS hoàn toàn không bị ảnh hưởng bởi hoạt động JavaScript nặng và có thể phản hồi các thao tác cuộn của người dùng.

Mức sử dụng CPU hoàn toàn khác trong Công cụ cho nhà phát triển, như minh hoạ trong ảnh chụp màn hình sau.

Bản minh hoạ sau đây cho thấy một ứng dụng có ảnh động dựa trên thao tác cuộn do CyberAgent tạo. Bạn có thể thấy ảnh xuất hiện mờ dần khi bạn di chuyển.

API JavaScript mới cho ảnh động dựa trên thao tác cuộn so với JavaScript thông thường

Lợi ích của API mới không chỉ giới hạn ở CSS. Bạn cũng có thể tạo ảnh động mượt mà dựa trên thao tác cuộn bằng JavaScript. Hãy xem ví dụ sau:

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Điều này cho phép bạn tạo ảnh động thanh tiến trình tương tự như trong bản minh hoạ CSS trước đó chỉ bằng JavaScript. Công nghệ cơ bản giống như phiên bản CSS. API này cố gắng sử dụng ít tài nguyên luồng chính nhất có thể, giúp ảnh động mượt mà hơn nhiều so với phương pháp JavaScript cổ điển.

Ngoài ra, API mới này hoạt động cùng với Web Animations API (WAAPI) và CSS Animations API hiện có để bật ảnh động dựa trên thao tác cuộn khai báo.

Các bản minh hoạ và tài nguyên khác

Bạn có thể xem các cách triển khai khác nhau của ảnh động dựa trên thao tác cuộn thông qua trang web minh hoạ này. Tại đây, bạn có thể so sánh các bản minh hoạ bằng cách sử dụng các API mới này từ CSS và JavaScript.

Nếu bạn muốn tìm hiểu thêm về ảnh động mới dựa trên thao tác cuộn, hãy xem bài viết này và bài nói chuyện tại I/O 2023!