Hướng tới chỉ số độ mượt của ảnh động

Tìm hiểu về cách đo lường ảnh động, cách hiểu về khung ảnh động và độ mượt tổng thể của trang.

Behdad Bakhshinategh

Jonathan Ross

Michal Mocny

Có thể bạn đã gặp phải tình trạng các trang "giật" hoặc "đơ" trong khi cuộn hoặc ảnh động. Chúng tôi muốn nói rằng những trải nghiệm này không mượt mà. Để giải quyết các loại vấn đề này, nhóm Chrome đã nỗ lực bổ sung thêm tính năng hỗ trợ cho công cụ trong phòng thí nghiệm để phát hiện ảnh động, cũng như cải thiện liên tục quy trình chẩn đoán kết xuất trong Chromium.

Chúng tôi muốn chia sẻ một số tiến trình gần đây, cung cấp hướng dẫn cụ thể về công cụ và thảo luận về các ý tưởng cho các chỉ số về độ mượt của ảnh động trong tương lai. Như mọi khi, chúng tôi rất mong nhận được ý kiến phản hồi của bạn.

Bài đăng này sẽ đề cập đến 3 chủ đề chính:

• Xem nhanh ảnh động và khung ảnh động.
• Suy nghĩ hiện tại của chúng tôi về việc đo lường độ mượt mà tổng thể của ảnh động.
• Một số đề xuất thiết thực để bạn tận dụng trong công cụ của phòng thí nghiệm ngay hôm nay.

Ảnh động là gì?

Ảnh động giúp nội dung trở nên sống động! Bằng cách di chuyển nội dung, đặc biệt là để phản hồi các hoạt động tương tác của người dùng, ảnh động có thể mang lại trải nghiệm tự nhiên, dễ hiểu và thú vị hơn.

Tuy nhiên, việc triển khai hoạt ảnh không tốt hoặc chỉ thêm quá nhiều hoạt ảnh có thể làm giảm trải nghiệm và khiến trải nghiệm đó trở nên không thú vị chút nào. Có thể tất cả chúng ta đều đã tương tác với một giao diện chỉ thêm quá nhiều hiệu ứng chuyển đổi "hữu ích", nhưng thực sự lại gây khó chịu cho trải nghiệm khi hiệu ứng hoạt động kém. Do đó, một số người dùng thực sự có thể thích giảm chuyển động, đây là lựa chọn ưu tiên của người dùng mà bạn nên tuân thủ.

Ảnh động hoạt động như thế nào?

Tóm lại, quy trình kết xuất bao gồm một số giai đoạn tuần tự:

1. Kiểu: Tính toán các kiểu áp dụng cho các phần tử.
2. Bố cục: Tạo hình học và vị trí cho từng phần tử.
3. Sơn: Điền các pixel cho từng phần tử vào các lớp.
4. Composite (Hợp nhất): Vẽ các lớp lên màn hình.

Mặc dù có nhiều cách để xác định ảnh động, nhưng về cơ bản, tất cả đều hoạt động thông qua một trong những cách sau:

• Điều chỉnh thuộc tính bố cục.
• Điều chỉnh thuộc tính paint.
• Điều chỉnh các thuộc tính composite.

Vì các giai đoạn này theo tuần tự, nên bạn cần xác định ảnh động theo các thuộc tính ở phía dưới quy trình. Quá trình cập nhật càng diễn ra sớm thì chi phí càng lớn và khả năng diễn ra suôn sẻ càng thấp. (Xem nội dung Hiệu suất kết xuất để biết thêm thông tin chi tiết.)

Mặc dù việc tạo ảnh động cho các thuộc tính bố cục có thể thuận tiện, nhưng bạn sẽ phải trả phí để làm việc đó, ngay cả khi các chi phí đó không rõ ràng ngay lập tức. Bạn nên xác định ảnh động theo các thay đổi về thuộc tính tổng hợp bất cứ khi nào có thể.

Việc xác định ảnh động CSS khai báo hoặc sử dụng Ảnh động trên web và đảm bảo bạn có các thuộc tính kết hợp tạo ảnh động là bước đầu tiên tuyệt vời để đảm bảo ảnh động mượt mà và hiệu quả. Tuy nhiên, chỉ điều này không đảm bảo độ mượt vì ngay cả ảnh động web hiệu quả cũng có giới hạn về hiệu suất. Đó là lý do tại sao việc đo lường luôn quan trọng!

Khung ảnh động là gì?

Nội dung cập nhật đối với hình ảnh đại diện của một trang sẽ mất thời gian để xuất hiện. Một thay đổi về hình ảnh sẽ dẫn đến một khung ảnh động mới, cuối cùng sẽ được kết xuất trên màn hình của người dùng.

Hiển thị nội dung cập nhật theo một số khoảng thời gian, vì vậy, nội dung cập nhật hình ảnh được phân thành lô. Nhiều màn hình cập nhật theo một khoảng thời gian cố định, chẳng hạn như 60 lần/giây (tức là 60 Hz). Một số màn hình hiện đại hơn có thể cung cấp tốc độ làm mới cao hơn (90 – 120 Hz đang trở nên phổ biến). Thông thường, những màn hình này có thể chủ động điều chỉnh giữa các tốc độ làm mới khi cần hoặc thậm chí cung cấp tốc độ khung hình hoàn toàn biến đổi.

Mục tiêu của mọi ứng dụng, chẳng hạn như trò chơi hoặc trình duyệt, là xử lý tất cả các bản cập nhật hình ảnh theo lô này và tạo một khung ảnh động hoàn chỉnh về mặt hình ảnh trong thời hạn, mỗi lần. Xin lưu ý rằng mục tiêu này hoàn toàn khác với các tác vụ trình duyệt quan trọng khác, chẳng hạn như tải nhanh nội dung từ mạng hoặc thực thi các tác vụ JavaScript hiệu quả.

Tại một số thời điểm, bạn có thể trở nên quá khó khăn để hoàn tất tất cả các bản cập nhật bằng hình ảnh trong thời hạn quy định do màn hình chỉ định. Khi điều này xảy ra, trình duyệt sẽ thả một khung. Màn hình không chuyển sang màu đen mà chỉ lặp lại chính nó. Bạn sẽ thấy cùng một bản cập nhật hình ảnh dài hơn một chút – chính là khung ảnh động đã được trình bày ở cơ hội khung hình trước đó.

Điều này thực sự thường xảy ra! Không nhất thiết phải nhận biết được, đặc biệt là đối với nội dung tĩnh hoặc giống tài liệu, thường thấy trên nền tảng web nói riêng. Tình trạng bỏ khung hình chỉ trở nên rõ ràng khi có các bản cập nhật hình ảnh quan trọng, chẳng hạn như ảnh động, chúng ta cần có một luồng cập nhật ảnh động ổn định để hiển thị chuyển động mượt mà.

Điều gì ảnh hưởng đến khung ảnh động?

Các nhà phát triển web có thể tác động đáng kể đến khả năng kết xuất và cập nhật trực quan của trình duyệt một cách nhanh chóng và hiệu quả!

Một số ví dụ:

• Sử dụng nội dung quá lớn hoặc tốn nhiều tài nguyên để giải mã nhanh trên thiết bị mục tiêu.
• Sử dụng quá nhiều lớp yêu cầu quá nhiều bộ nhớ GPU.
• Xác định các kiểu CSS hoặc ảnh động trên web quá phức tạp.
• Sử dụng các mẫu thiết kế chống lại việc tắt tính năng tối ưu hoá kết xuất nhanh.
• Quá nhiều công việc JS trên luồng chính, dẫn đến các tác vụ dài chặn việc cập nhật hình ảnh.

Nhưng làm thế nào để bạn biết thời điểm một khung ảnh động đã bỏ lỡ thời hạn và gây ra tình trạng bị bỏ khung?

Một phương pháp có thể áp dụng là sử dụng tính năng thăm dò ý kiến requestAnimationFrame(), tuy nhiên phương pháp này có một số nhược điểm. requestAnimationFrame() hay "rAF", cho trình duyệt biết rằng bạn muốn thực hiện ảnh động và yêu cầu cho phép thực hiện việc này trước giai đoạn vẽ tiếp theo của quy trình kết xuất. Nếu hàm callback không được gọi vào thời điểm bạn mong đợi, điều đó có nghĩa là một lớp vẽ không được thực thi và một hoặc nhiều khung hình đã bị bỏ qua. Bằng cách thăm dò ý kiến và tính tần suất gọi rAF, bạn có thể tính toán một loại chỉ số "khung hình/giây" (FPS).

let frameTimes = [];
function pollFramesPerSecond(now) {
  frameTimes = [...frameTimes.filter(t => t > now - 1000), now];
  requestAnimationFrame(pollFramesPerSecond);
  console.log('Frames per second:', frameTimes.length);
}
requestAnimationFrame(pollFramesPerSecond);

Bạn không nên sử dụng tính năng thăm dò ý kiến requestAnimationFrame() vì một số lý do sau:

• Mỗi tập lệnh phải thiết lập vòng thăm dò ý kiến riêng.
• Lỗi này có thể chặn đường dẫn quan trọng.
• Ngay cả khi hoạt động thăm dò ý kiến rAF diễn ra nhanh chóng, hoạt động này vẫn có thể ngăn requestIdleCallback() lên lịch các khối thời gian rảnh dài khi được sử dụng liên tục (các khối vượt quá một khung hình).
• Tương tự, việc thiếu các khối thời gian rảnh dài sẽ khiến trình duyệt không thể lên lịch các tác vụ khác chạy trong thời gian dài (chẳng hạn như thu thập rác lâu hơn và các tác vụ dự đoán hoặc trong nền khác).
• Nếu tính năng thăm dò ý kiến được bật và tắt, thì bạn sẽ bỏ lỡ các trường hợp vượt quá ngân sách khung hình.
• Tính năng thăm dò ý kiến sẽ báo cáo các kết quả dương tính giả trong trường hợp trình duyệt đang sử dụng tần suất cập nhật thay đổi (ví dụ: do trạng thái nguồn hoặc chế độ hiển thị).
• Và quan trọng nhất là tính năng này không thực sự ghi lại tất cả các loại cập nhật ảnh động!

Quá nhiều công việc trên luồng chính có thể ảnh hưởng đến khả năng xem khung ảnh động. Hãy xem Mẫu giật để biết cách ảnh động do rAF điều khiển, khi có quá nhiều công việc trên luồng chính (chẳng hạn như bố cục), sẽ dẫn đến việc bỏ khung hình và ít lệnh gọi lại rAF hơn, đồng thời giảm FPS.

Khi luồng chính bị quá tải, các bản cập nhật hình ảnh sẽ bắt đầu bị gián đoạn. Đó là hiện tượng giật!

Nhiều công cụ đo lường đã tập trung vào khả năng luồng chính tạo ra kết quả kịp thời và để các khung ảnh động chạy trơn tru. Tuy nhiên, đây chưa phải là toàn bộ! Hãy xem ví dụ sau đây:

Video ở trên cho thấy một trang định kỳ chèn các tác vụ dài vào luồng chính. Những tác vụ dài này hoàn toàn làm hỏng khả năng của trang trong việc cung cấp một số loại nội dung cập nhật hình ảnh nhất định. Bạn có thể thấy ở góc trên cùng bên trái, requestAnimationFrame() đã giảm tương ứng từ 0 xuống FPS được báo cáo.

Tuy nhiên, mặc dù có những tác vụ dài như vậy, trang vẫn tiếp tục cuộn một cách mượt mà. Nguyên nhân là do trên các trình duyệt hiện đại, hoạt động cuộn thường được phân luồng, hoàn toàn do trình tổng hợp điều khiển.

Đây là ví dụ đồng thời chứa nhiều khung hình bị bỏ qua trên luồng chính, nhưng vẫn có nhiều khung hình cuộn được phân phối thành công trên luồng trình kết hợp. Sau khi hoàn tất tác vụ dài, bản cập nhật vẽ luồng chính vẫn không có thay đổi nào về hình ảnh để cung cấp. Thăm dò rAF cho thấy khung hình sẽ giảm xuống 0, nhưng về mặt trực quan, người dùng sẽ không thể nhận thấy sự khác biệt!

Đối với các khung ảnh động, câu chuyện không đơn giản như vậy.

Khung ảnh động: Nội dung cập nhật quan trọng

Ví dụ trên cho thấy rằng câu chuyện không chỉ dừng lại ở requestAnimationFrame().

Vậy khi nào thì bản cập nhật ảnh động và khung ảnh động trở nên quan trọng? Sau đây là một số tiêu chí mà chúng tôi đang cân nhắc và rất mong nhận được ý kiến phản hồi của bạn:

• Cập nhật luồng chính và trình tổng hợp
• Thiếu bản cập nhật sơn
• Phát hiện ảnh động
• Chất lượng so với số lượng

Cập nhật luồng chính và luồng trình kết hợp

Nội dung cập nhật khung ảnh động không phải là boolean. Không phải là các khung chỉ có thể được thả hoàn toàn hoặc hiển thị hoàn toàn. Có nhiều lý do khiến một khung ảnh động có thể được hiển thị một phần. Nói cách khác, trang chủ có thể đồng thời có một số nội dung cũ trong khi vẫn có một số nội dung cập nhật mới về hình ảnh được hiển thị.

Ví dụ phổ biến nhất về trường hợp này là khi trình duyệt không thể tạo bản cập nhật luồng chính mới trong thời hạn của khung hình nhưng lại có bản cập nhật mới của luồng trình tổng hợp (chẳng hạn như ví dụ cuộn theo luồng trước đó).

Một lý do quan trọng khiến bạn nên sử dụng ảnh động khai báo để tạo ảnh động cho các thuộc tính tổng hợp là việc này cho phép luồng trình kết hợp điều khiển hoàn toàn ảnh động ngay cả khi luồng chính đang bận. Các loại ảnh động này có thể tiếp tục tạo bản cập nhật hình ảnh một cách hiệu quả và song song.

Mặt khác, có thể có trường hợp bản cập nhật luồng chính cuối cùng cũng có thể trình bày, nhưng chỉ sau khi lỡ một vài thời hạn kết xuất khung hình. Tại đây, trình duyệt sẽ có một số bản cập nhật mới, nhưng có thể không phải là bản cập nhật mới nhất.

Nói chung, chúng tôi coi các khung chứa một số nội dung cập nhật hình ảnh mới, nhưng không phải tất cả nội dung cập nhật hình ảnh mới, là khung một phần. Các khung hình một phần là khá phổ biến. Lý tưởng nhất là các bản cập nhật một phần ít nhất sẽ bao gồm các bản cập nhật hình ảnh quan trọng nhất, chẳng hạn như ảnh động, nhưng điều đó chỉ có thể xảy ra nếu ảnh động được điều khiển bằng luồng trình kết hợp.

Thiếu bản cập nhật sơn

Một loại cập nhật một phần khác là khi nội dung nghe nhìn như hình ảnh chưa hoàn tất quá trình giải mã và quét đường quét kịp thời để hiển thị khung hình.

Hoặc ngay cả khi một trang hoàn toàn tĩnh, các trình duyệt vẫn có thể không hiển thị nội dung cập nhật bằng hình ảnh trong quá trình cuộn nhanh. Đó là do các bản trình bày pixel của nội dung nằm ngoài khung nhìn hiển thị có thể bị loại bỏ để tiết kiệm bộ nhớ GPU. Cần có thời gian để kết xuất các pixel và có thể mất nhiều thời gian hơn một khung hình để kết xuất mọi thứ sau một thao tác cuộn lớn, chẳng hạn như hất ngón tay. Phương thức này thường được gọi là bàn cờ.

Với mỗi cơ hội kết xuất khung hình, bạn có thể theo dõi số lượng nội dung cập nhật hình ảnh mới nhất thực sự xuất hiện trên màn hình. Việc đo lường khả năng thực hiện việc này trên nhiều khung hình (hoặc thời gian) được gọi chung là thông lượng khung hình.

Nếu GPU thực sự quá tải, trình duyệt (hoặc nền tảng) thậm chí có thể bắt đầu điều tiết tốc độ cố gắng cập nhật hình ảnh, từ đó làm giảm tốc độ khung hình hiệu quả. Mặc dù về mặt kỹ thuật, việc này có thể làm giảm số lần cập nhật khung hình bị rớt, nhưng về mặt kỹ thuật, thông lượng khung hình vẫn sẽ xuất hiện dưới dạng thông lượng khung hình thấp hơn.

Tuy nhiên, không phải mọi loại thông lượng khung hình thấp đều xấu. Nếu trang hầu như ở trạng thái rảnh và không có ảnh động nào đang hoạt động, thì tốc độ khung hình thấp cũng hấp dẫn về mặt hình ảnh như tốc độ khung hình cao (và có thể tiết kiệm pin!).

Vậy khi nào thì tốc độ khung hình lại quan trọng?

Phát hiện ảnh động

Thông lượng khung hình cao đặc biệt quan trọng trong những khoảng thời gian có ảnh động quan trọng. Các loại ảnh động khác nhau sẽ phụ thuộc vào nội dung cập nhật hình ảnh từ một luồng cụ thể (chính, trình kết hợp hoặc trình chạy), vì vậy, nội dung cập nhật hình ảnh của ảnh động sẽ phụ thuộc vào việc luồng đó cung cấp nội dung cập nhật trong thời hạn. Chúng ta nói rằng một luồng nhất định ảnh hưởng đến độ mượt mà bất cứ khi nào có ảnh động đang hoạt động phụ thuộc vào bản cập nhật luồng đó.

Một số loại ảnh động dễ xác định và phát hiện hơn so với các loại khác. Ảnh động khai báo hoặc ảnh động do người dùng điều khiển sẽ xác định rõ ràng hơn so với ảnh động do JavaScript triển khai dưới dạng bản cập nhật định kỳ cho các thuộc tính kiểu ảnh động.

Ngay cả với requestAnimationFrame(), bạn cũng không phải lúc nào cũng có thể giả định rằng mọi lệnh gọi rAF đều tạo ra một bản cập nhật hình ảnh hoặc ảnh động. Ví dụ: việc sử dụng tính năng thăm dò ý kiến rAF chỉ để theo dõi tốc độ khung hình (như minh hoạ ở trên) sẽ không ảnh hưởng đến kết quả đo lường độ mượt mà vì không có nội dung cập nhật hình ảnh nào.

Chất lượng so với số lượng

Cuối cùng, việc phát hiện ảnh động và cập nhật khung ảnh động vẫn chỉ là một phần của câu chuyện vì chỉ ghi lại số lượng cập nhật ảnh động chứ không phải chất lượng.

Ví dụ: bạn có thể thấy tốc độ khung hình ổn định ở mức 60 khung hình/giây khi xem video. Về mặt kỹ thuật, video này hoàn toàn mượt mà, nhưng bản thân video có thể có tốc độ bit thấp hoặc gặp vấn đề về bộ nhớ đệm mạng. Điều này không được ghi lại trực tiếp bằng các chỉ số về độ mượt của ảnh động, tuy nhiên, vẫn có thể gây khó chịu cho người dùng.

Hoặc một trò chơi tận dụng <canvas> (có thể thậm chí sử dụng các kỹ thuật như canvas ngoài màn hình để đảm bảo tốc độ khung hình ổn định) có thể mượt mà hoàn hảo về mặt kỹ thuật đối với các khung ảnh động, trong khi không tải được các tài sản trò chơi chất lượng cao vào cảnh hoặc hiển thị các cấu phần kết xuất.

Và tất nhiên, một trang web có thể chỉ có một số ảnh động thực sự xấu 🙂

Tôi đoán là những chiếc xe này khá tuyệt vời vào thời điểm đó!

Trạng thái của một khung ảnh động

Vì khung hình có thể được trình chiếu một phần hoặc khung hình bị rớt có thể xảy ra theo cách không ảnh hưởng đến độ mượt, nên chúng tôi đã bắt đầu coi mỗi khung hình có một điểm số về độ hoàn chỉnh hoặc độ mượt.

Dưới đây là phổ các cách chúng ta diễn giải trạng thái của một khung ảnh động, được sắp xếp từ trường hợp tốt nhất đến trường hợp tệ nhất:

Bạn có thể biến các trạng thái này thành một số điểm. Và có lẽ một cách để diễn giải điểm số này là xem xét điểm số này là xác suất mà người dùng có thể quan sát được. Một khung hình bị bỏ có thể không dễ nhận thấy, nhưng một chuỗi nhiều khung hình bị bỏ ảnh hưởng đến độ mượt mà của một hàng thì chắc chắn là có!

Tổng hợp tất cả: Chỉ số Tỷ lệ phần trăm khung hình bị bỏ qua

Đôi khi, bạn có thể cần phải tìm hiểu sâu về trạng thái của từng khung ảnh động, nhưng cũng hữu ích khi chỉ cần chỉ định một điểm số "xem nhanh" nhanh chóng cho một trải nghiệm.

Vì khung hình có thể được trình bày một phần và ngay cả khi các bản cập nhật khung hình bị bỏ qua hoàn toàn cũng có thể không thực sự ảnh hưởng đến độ mượt, chúng tôi muốn tập trung ít hơn vào việc đếm khung hình, thay vào đó tập trung nhiều hơn vào phạm vi mà trình duyệt không thể cung cấp bản cập nhật đầy đủ về mặt hình ảnh khi cần thiết.

Mô hình tinh thần phải chuyển từ:

1. Khung hình/giây, thành
2. Phát hiện các bản cập nhật ảnh động bị thiếu và quan trọng để
3. Tỷ lệ phần trăm bị giảm trong một khoảng thời gian nhất định.

Điều quan trọng là: tỷ lệ thời gian chờ các bản cập nhật quan trọng. Chúng tôi cho rằng điều này phù hợp với cách người dùng trải nghiệm sự mượt mà của nội dung web trong thực tế. Cho đến nay, chúng ta đã sử dụng các chỉ số sau đây làm bộ chỉ số ban đầu:

• Phần trăm giảm trung bình: đối với tất cả khung ảnh động không rảnh trong toàn bộ tiến trình
• Trường hợp tệ nhất về Tỷ lệ khung hình bị bỏ qua: được đo lường trong khoảng thời gian trượt 1 giây.
• Phân vị thứ 95 của phần trăm khung hình bị sụt giảm: được đo trong khoảng thời gian trượt 1 giây.

Bạn có thể tìm thấy các điểm số này trong một số công cụ dành cho nhà phát triển Chrome hiện nay. Mặc dù các chỉ số này chỉ tập trung vào tổng lưu lượng khung hình, nhưng chúng tôi cũng đang đánh giá các yếu tố khác, chẳng hạn như độ trễ khung hình.

Hãy tự mình trải nghiệm trong công cụ cho nhà phát triển!

HUD hiệu suất

Chromium có một HUD hiệu suất gọn gàng ẩn sau một cờ (chrome://flags/#show-performance-metrics-hud). Trong đó, bạn có thể tìm thấy điểm số trực tiếp cho các chỉ số như Các chỉ số quan trọng về trang web, cũng như một số định nghĩa thử nghiệm để tạo ảnh động mượt mà dựa trên Tỷ lệ khung hình bị bỏ qua theo thời gian.

Số liệu thống kê kết xuất khung hình

Bật "Frame Rendering Stats" (Thống kê kết xuất khung) trong DevTools thông qua phần cài đặt Kết xuất để xem chế độ xem trực tiếp của các khung ảnh động mới. Các khung này được mã hoá bằng màu để phân biệt các bản cập nhật một phần với các bản cập nhật khung bị bỏ hoàn toàn. Tốc độ khung hình được báo cáo chỉ dành cho các khung hình được hiển thị đầy đủ.

Trình xem khung hình trong bản ghi hồ sơ hiệu suất của DevTools

Bảng điều khiển Hiệu suất trong DevTools từ lâu đã có Trình xem khung. Tuy nhiên, cách này đã không còn phù hợp với cách hoạt động thực tế của quy trình kết xuất hiện đại. Gần đây, đã có rất nhiều điểm cải tiến, ngay cả trong Chrome Canary mới nhất. Chúng tôi cho rằng tính năng này sẽ giúp dễ dàng gỡ lỗi đáng kể các vấn đề về ảnh động.

Hôm nay, bạn sẽ thấy các khung hình trong trình xem khung hình được căn chỉnh tốt hơn với các ranh giới vsync và được mã hoá bằng màu dựa trên trạng thái. Hiện tại, chúng tôi vẫn chưa có hình ảnh trực quan đầy đủ cho tất cả các sắc thái nêu trên, nhưng chúng tôi dự định sẽ bổ sung thêm trong thời gian sắp tới.

Tính năng theo dõi của Chrome

Cuối cùng, với tính năng Theo dõi của Chrome, một công cụ phù hợp để tìm hiểu sâu về thông tin chi tiết, bạn có thể ghi lại dấu vết "Hiển thị nội dung web" thông qua giao diện người dùng Perfetto (hoặc about:tracing) mới và tìm hiểu sâu về quy trình đồ hoạ của Chrome. Đây có thể là một nhiệm vụ khó khăn, nhưng gần đây, chúng tôi đã thêm một số tính năng vào Chromium để giúp bạn dễ dàng thực hiện việc này. Bạn có thể xem thông tin tổng quan về những nội dung có trong tài liệu Vòng đời của một khung hình.

Thông qua các sự kiện theo dõi, bạn có thể xác định chính xác:

• Những ảnh động đang chạy (sử dụng sự kiện có tên TrackerValidation).
• Lấy dòng thời gian chính xác của các khung ảnh động (sử dụng các sự kiện có tên PipelineReporter).
• Đối với các bản cập nhật ảnh động bị giật, hãy tìm hiểu chính xác điều gì đang ngăn ảnh động chạy nhanh hơn (sử dụng bảng chi tiết sự kiện trong các sự kiện PipelineReporter).
• Đối với ảnh động do đầu vào điều khiển, hãy xem thời gian cần thiết để cập nhật hình ảnh (sử dụng các sự kiện có tên EventLatency).

Bước tiếp theo

Sáng kiến Các chỉ số quan trọng về trang web nhằm cung cấp chỉ số và hướng dẫn để tạo trải nghiệm tuyệt vời cho người dùng trên web. Các chỉ số dựa trên phòng thí nghiệm như Tổng thời gian chặn (TBT) rất quan trọng để phát hiện và chẩn đoán các vấn đề tiềm ẩn về khả năng tương tác. Chúng tôi dự định thiết kế một chỉ số tương tự dựa trên phòng thí nghiệm để đo lường độ mượt của ảnh động.

Chúng tôi sẽ thông báo cho bạn trong khi tiếp tục tìm hiểu các ý tưởng để thiết kế chỉ số toàn diện dựa trên dữ liệu từng khung ảnh động.

Trong tương lai, chúng tôi cũng sẽ thiết kế các API giúp bạn có thể đo lường độ mượt của ảnh động một cách hiệu quả cho người dùng thực trong trường cũng như trong phòng thí nghiệm. Bạn cũng đừng quên theo dõi để nắm bắt thông tin cập nhật tại đây!

Phản hồi

Chúng tôi rất vui mừng về tất cả các điểm cải tiến gần đây và các công cụ dành cho nhà phát triển đã được phát hành trong Chrome để đo lường độ mượt của ảnh động. Vui lòng dùng thử các công cụ này, đo điểm chuẩn cho ảnh động và cho chúng tôi biết kết quả!

Bạn có thể gửi nhận xét của mình đến nhóm Google web-vitals-feedback kèm theo "[Chỉ số độ mượt]" trong dòng tiêu đề. Chúng tôi rất mong nhận được ý kiến của bạn!