Trang này được dịch bởi Cloud Translation API.

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

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

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

Trước đây, cách duy nhất để tạo ảnh động do 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 hai 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 đó, phân phối các sự kiện cuộn không đồng bộ.
Ảnh động trong luồng chính có thể bị giật.

Điều này khiến việc tạo các ảnh động điều khiển cuộn hiệu suất đồng bộ với thao tác cuộn không thể hoặc rất khó khăn.

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

Hỗ trợ trình duyệt

Nguồn

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 ảnh động do cuộn tạo ra có thể dễ dàng và mượt mà như thế nào với API mới.

CSS API ảnh động dựa trên cuộn so với JavaScript cổ điển

Thanh tiến trình mẫu sau đây được tạo bằng các kỹ thuật JavaScript lớp.

Tài liệu phản hồi mỗi khi sự kiện scroll xảy ra để tính tỷ lệ phần trăm của scrollHeight mà người dùng đã cuộn đế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 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 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 nặng.

Bây giờ là phần thú vị — giả sử bạn đã triển khai một phép tính siêu lớn trên cả hai phiên bản của trang web và những phép tính này sẽ chiếm hầu hết tài nguyên 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ể đã mong đợi, phiên bản JavaScript cổ điển sẽ trở nên bị giật và chậm chạp do điểm giao nhau 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 công việc JavaScript nặng và có thể phản hồi các hoạt động tương 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ư thể hiện trong các ảnh chụp màn hình sau đây.

So sánh luồng chính.

Bản minh hoạ sau đây cho thấy một ứng dụng ảnh động do cuộn tạo ra do CyberAgent tạo. Bạn có thể thấy ảnh mờ dần khi cuộn.

API JavaScript ảnh động dựa trên cuộn mới so với JavaScript cổ điển

Lợi ích của API mới không chỉ giới hạn ở CSS. Bạn cũng có thể tạo hoạt ảnh cuộn mượt mà 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 giống như trong bản minh hoạ CSS trước đó chỉ bằng JavaScript. Công nghệ cơ bản giống với 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 API Ảnh động web (WAAPI) và CSS Animations API hiện có để bật ảnh động dựa trên thao tác cuộn khai báo.

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

Bạn có thể xem các cách triển khai ảnh động do cuộn điều khiể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ạ 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 do thao tác cuộn tạo ra, hãy xem bài viết này và buổi trò chuyện tại I/O 2023!