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

Ảnh động do cuộn có gì mới?

Ảnh động do cuộn là một cách để tăng tính tương tác và sự hấp dẫn về hình ảnh cho 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 hay để 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 hình ảnh.

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 ảnh động hiệu quả do cuộn đồng bộ với thao tác cuộn trở nên không thể hoặc rất khó.

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à cũng mượt mà hơn nhiều. API ảnh động do cuộn điều khiể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.

API CSS ảnh động do cuộn điều khiể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ờ, đây là phần thú vị – 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 trang web, điều này sẽ làm tiêu hao 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ể dự kiến, phiên bản JavaScript cổ điển sẽ bị giật và chậm do nút giao 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 DevTools, như trong ảnh chụp màn hình sau.

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 sẽ mờ dần khi bạn cuộn.

API JavaScript ảnh động mới do cuộn điều khiển 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 ảnh động mượt mà khi 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 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 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 trên web (WAAPI) và API ảnh động CSS hiện có để bật ảnh động do 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 ả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!