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 trang "bị gián đoạn" hoặc "đóng băng" 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à. Cần giải quyết các loại vấn đề này, nhóm Chrome đã và đang nỗ lực để hỗ trợ thêm đối với công cụ phòng thí nghiệm để phát hiện hoạt ảnh, cũng như thực hiện các cải tiến ổn định đối với chẩn đoán quy trình kết xuất trong Chromium.

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

Bài đăng này sẽ bao gồm ba chủ đề chính:

• Tổng quan về ảnh động và khung ảnh động.
• Cân nhắc hiện tại của chúng tôi về cách đo lường độ mượt tổng thể của ảnh động.
• Một vài đề xuất thiết thực để bạn có thể tận dụng trong phòng thí nghiệm công cụ 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 khiến nội dung thay đổi, đặc biệt là khi phản hồi cho tương tác của người dùng, ảnh động có thể giúp trải nghiệm tự nhiên hơn, dễ hiểu và thú vị.

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

Lưu ý: Tìm hiểu thêm về ảnh động, bao gồm cả cách tạo ảnh động có hiệu suất cao và cách kiểm tra ảnh động bằng công cụ cho nhà phát triển.

Ả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 kiểu áp dụng cho các phần tử.
2. Bố cục: Tạo thuộc tính hình học và vị trí của từng phần tử.
3. Sơn: Điền vào pixel cho từng phần tử vào lớp.
4. Tổng hợp: 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 các lệnh sau:

• Điều chỉnh bố cục các thuộc tính.
• Điều chỉnh lớp sơn các thuộc tính.
• Điều chỉnh composite các thuộc tính.

Vì các giai đoạn này có tính tuần tự nên điều quan trọng là phải xác định ảnh động trong các điều khoản thuộc tính đang diễn ra trong tương lai. Bản cập nhật càng sớm xảy ra trong quá trình đó thì chi phí càng lớn và khả năng mượt mà. (Xem phần Kết xuất hình ảnh hiệu suất để biết thêm 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 cũng sẽ phải tốn chi phí để làm điều đó, ngay cả khi những chi phí đó không rõ ràng ngay lập tức. Hoạt ảnh phải được xác định theo thuộc tính kết hợp thay đổi bất cứ khi nào có thể.

Xác định ảnh động CSS khai báo hoặc sử dụng Web Ảnh động, và đảm bảo bạn tạo ảnh động kết hợp tài sản, 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ó giới hạn 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 bản trình bày trực quan của một trang cần có thời gian để xuất hiện. Hình ảnh một khung ảnh động mới sẽ được hiển thị trên màn hình của người dùng.

Hiển thị bản cập nhật trong một khoảng thời gian nào đó, vì vậy các bản cập nhật bằng hình ảnh được phân thành lô. Nhiều màn hình cập nhật trong một khoảng thời gian cố định, chẳng hạn như 60 lần một 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 tốc độ làm mới khi cần hay thậm chí cung cấp các 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ập nhật trực quan theo lô và tạo một khung hoạt ảnh trực quan hoàn chỉnh trong thời hạn, mọi lúc. Lưu ý rằng mục tiêu này hoàn toàn khác với các mục tiêu khác các tác vụ trình duyệt quan trọng như tải nhanh nội dung từ mạng hoặc thực thi tác vụ JavaScript một cách hiệu quả.

Đôi khi, bạn có thể gặp khó khăn khi muốn hoàn thành tất cả các thao tác 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 thả khung hình. Màn hình của bạn không chuyển sang màu đen mà chỉ tự lặp lại. Bạn thấy cùng một bản cập nhật trực quan dài hơn một chút — cùng một khung ảnh động được trình bày ở cơ hội khung hình trước.

Điều này thực sự xảy ra thường xuyên! Không phải lúc nào cũng dễ nhận biết, đặc biệt cho nội dung tĩnh hoặc dạng tài liệu, phổ biến trên nền tảng web tại cụ thể. Khung hình bị rớt chỉ trở nên rõ ràng khi có hình ảnh quan trọng các bản cập nhật, chẳng hạn như ảnh động, mà chúng tôi cần một luồng ảnh động ổn định cập nhật để hiển thị chuyển động mượt mà.

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

Nhà phát triển web có thể tác động lớn đến khả năng của trình duyệt để nhanh chóng và kết xuất và trình bày nội dung cập nhật trực quan một cách 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 chóng trên thiết bị mục tiêu.
• Sử dụng quá nhiều lớp đòi hỏi quá nhiều bộ nhớ GPU.
• Xác định kiểu CSS hoặc ảnh động web quá phức tạp.
• Sử dụng các mẫu thiết kế không phù hợp để tắt tính năng tối ưu hoá kết xuất nhanh.
• Có quá nhiều JS hoạt động trên luồng chính, dẫn đến các tác vụ dài gây cản trở hình ảnh bản cập nhật.

Nhưng làm thế nào bạn có thể biết khi nào một khung hình động bị lỡ thời hạn và gây ra khung hình bị rớt?

Một phương pháp khả thi là dùng requestAnimationFrame() Thăm dò ý kiến, 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 truy cập để thực hiện trước giai đoạn tô màu 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à Không thực thi tô màu và một hoặc nhiều khung đã bị bỏ qua. Bằng cách thăm dò ý kiến và tính tần suất rAF được gọi, bạn có thể tính toán loại "khung hình/giây" (FPS).

Cảnh báo: Mã sau đây là phản mẫu và bạn không nên sử dụng!

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 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 lặp thăm dò riêng.
• Nó có thể chặn đường dẫn quan trọng.
• Ngay cả khi lấy mẫu rAF nhanh, tính năng này có thể ngăn requestIdleCallback() không thể lên lịch các khối không hoạt động trong thời gian dài khi được sử dụng liên tục (chặn vượt quá một khung).
• Tương tự, việc thiếu các khối ở trạng thái rảnh trong thời gian dài sẽ ngăn trình duyệt lên lịch cho các khối các tác vụ chạy trong thời gian dài (chẳng hạn như thu gom rác trong thời gian dài hơn và ở chế độ nền khác hoặc công việc suy đoán).
• 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 mà ngân sách khung hình đã bị vượt quá.
• Tính năng thăm dò ý kiến sẽ báo cáo kết quả dương tính giả trong những 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à nó không thực sự chụp được tất cả các loại hoạt ảnh thông tin cập nhật!

Quá nhiều thao tác trên luồng chính có thể ảnh hưởng đến khả năng xem khung ảnh động. Hãy xem phần Giật Mẫu để xem Ảnh động điều khiển bằng rAF, một khi có quá nhiều thao tác trên luồng chính (chẳng hạn như bố cục), sẽ dẫn đến rớt khung hình, ít lệnh gọi lại rAF và FPS thấp hơn.

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. Giật đấy!

Nhiều công cụ đo lường đã tập trung chủ yếu vào khả năng luồng kịp thời để tạo ra và giúp 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 hiển thị một trang định kỳ đưa các tác vụ dài vào chuỗi. Những tác vụ dài này làm hỏng hoàn toàn khả năng cung cấp của trang một số loại cập nhật trực quan nhất định và bạn có thể thấy ở góc trên cùng bên trái mức giảm tương ứng requestAnimationFrame() FPS được báo cáo xuống 0.

Chưa hết, bất chấp những tác vụ dài này, trang vẫn tiếp tục cuộn mượt mà. Chiến dịch này là do trên các trình duyệt hiện đại, hình thức cuộn thường theo chuỗi, hoàn toàn do trình tổng hợp điều khiển.

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

Đối với khung ảnh động, câu chuyện không hề đơn giản.

Lưu ý: Có nhiều lý do khiến các tác vụ dài bị coi là không hợp lệ và những tác vụ này được ghi lại bằng các API hiệu suất chuyên biệt, chẳng hạn như API Tác vụ dài hoặc API Thời gian sự kiện. Tuy nhiên, cũng có những tính năng, chẳng hạn như isInputPending(). Trong đó, các tác vụ dài trong thời gian không hoạt động có thể được thêm hoàn toàn theo thiết kế. Đây là một tính năng hữu ích.

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 có nhiều điều hơn là chỉ requestAnimationFrame().

Vậy khi nào thì việc cập nhật ảnh động và khung ảnh động đóng vai trò 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 về:

• Cập nhật luồng chính và trình tổng hợp
• Thiếu nội dung cập nhật về tô màu
• 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à trình tổng hợp

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

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

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

Mặt khác, trong một số trường hợp, bản cập nhật luồng chính cuối cùng cũng trở thành có thể trình bày, nhưng chỉ sau khi thiếu một số thời hạn khung. Ở đâ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 xem xét các khung hình có chứa một số điểm cập nhật mới về hình ảnh, mà không có tất cả nội dung cập nhật trực quan mới, dưới dạng một phần khung. Các khung hình một phần là tương đối phổ biến. Tốt nhất là một phần nội dung cập nhật ít nhất phải bao gồm những thông tin quan trọng nhất các nội dung cập nhật trực quan, chẳng hạn như ảnh động, nhưng chỉ có thể xảy ra nếu ảnh động do luồng trình tổng hợp điều khiển.

Thiếu nội dung cập nhật về tô màu

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 giải mã và tạo điểm ảnh kịp thời để trình bày khung hình.

Hoặc, ngay cả khi một trang hoàn toàn tĩnh, trình duyệt vẫn có thể không hỗ trợ hiển thị cập nhật hình ảnh trong khi cuộn nhanh. Đó là do các lần hiển thị 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. Nó mất thời gian để kết xuất pixel và có thể mất nhiều thời gian hơn một khung hình hiển thị mọi thứ sau khi cuộn lớn, chẳng hạn như thao tác hất ngón tay. Thông thường, được gọi là kiểm tra.

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

Nếu GPU thực sự bị 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ập nhật bằng hình ảnh và do đó giảm tốc độ khung hình hiệu quả. Mặc dù về mặt kỹ thuật, điều này có thể làm giảm số lần bị rơi bản cập nhật khung hình, về mặt trực quan thì khung hình này 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ư không hoạt động và không có hoạt ảnh nào đang hoạt động, tốc độ khung hình thấp cũng giống như trực quan hấp dẫn vì tốc độ khung hình cao (và có thể tiết kiệm pin!).

Vậy khi nào thông lượng khung hình đóng vai trò quan trọng?

Phát hiện ảnh động

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

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ẽ rõ ràng hơn để xác định so với các hoạt ảnh dựa trên JavaScript được triển khai dưới dạng bản cập nhật định kỳ cho các hoạt ảnh có thể tạo ảnh động các thuộc tính kiểu.

Ngay cả với requestAnimationFrame() bạn không thể luôn giả định rằng mọi lệnh gọi rAF đều nhất thiết tạo ra hình ảnh bản cập nhật hoặc ảnh động. Ví dụ: sử dụng thăm dò rAF chỉ để theo dõi tốc độ khung hình (như trình bày ở trên) không được tự ảnh hưởng đến các phép đo độ mượt vì có không có bản cập nhật trực quan.

Lưu ý: Tính năng phát hiện ảnh động trong công cụ, cũng như các thông tin cụ thể về việc triển khai ảnh động trong trình duyệt, liên tục phát triển và cải tiến. Gần đây, Chrome đã di chuyển ảnh động màu nền từ luồng chính sang trình tổng hợp!

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

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

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

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

Và tất nhiên là một trang web vẫn có thể có một số ảnh động rất tệ 🙂

Ý tôi là chúng khá thú vị trong thời gian vừa qua!

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

Do khung hình có thể hiển thị một phần hoặc khung hình bị rớt có thể xảy ra theo những cách không ảnh hưởng đến độ mượt, chúng ta đã bắt đầu coi mỗi khung hình độ hoàn chỉnh hoặc độ mượt.

Sau đây là một loạt cách mà chúng tôi diễn giải trạng thái của một khung ảnh động, được sắp xếp theo thứ tự từ tốt nhất đến trường hợp xấu nhất:

Không muốn cập nhật	Thời gian không hoạt động, lặp lại khung hình trước.
Trình bày đầy đủ	Quá trình cập nhật luồng chính đã được cam kết trong thời hạn hoặc không cần cập nhật luồng chính.
Được trình bày một phần	Chỉ trình tổng hợp; bản cập nhật luồng chính bị trì hoãn không có hình ảnh thay đổi.
Được trình bày một phần	Chỉ trình tổng hợp; luồng chính có hình ảnh cập nhật, nhưng điều đó bản cập nhật không bao gồm ảnh động ảnh hưởng đến độ mượt.
Được trình bày một phần	Chỉ trình tổng hợp; luồng chính có cập nhật trực quan ảnh hưởng đến độ mượt nhưng khung hình cũ trước đó đã xuất hiện và đã được sử dụng thay thế.
Được trình bày một phần	Chỉ trình tổng hợp; nếu không có bản cập nhật chính mong muốn và bản cập nhật trình tổng hợp có ảnh động ảnh hưởng đến độ mượt.
Được trình bày một phần	Chỉ trình tổng hợp nhưng bản cập nhật trình tổng hợp không có ảnh động ảnh hưởng đến độ mượt.
Khung hình bị rớt	Không có bản cập nhật. Trình tổng hợp không cần cập nhật và chế độ chính bị chậm trễ.
Khung hình bị rớt	Quá trình cập nhật trình tổng hợp đã diễn ra nhưng đã bị chậm trễ.
Khung hình cũ	Bản cập nhật là do trình kết xuất tạo ra, nhưng bản cập nhật GPU vẫn không xuất hiện trước thời hạn vsync.

Bạn có thể chuyển các trạng thái này thành một phần điểm số. Và có thể là một cách để diễn giải điểm số này là coi xác suất điểm số này có thể quan sát được người dùng. Một khung hình bị rớt có thể không quan sát được nhiều, nhưng sẽ có một chuỗi nhiều khung hình bị rớt ảnh hưởng đến độ mượt trong một hàng là vậy!

Kết hợp kiến thức đã học: Chỉ số phần trăm số khung hình bị giảm

Mặc dù đôi khi có thể cần đi sâu vào trạng thái của mỗi khung hình động, cũng rất hữu ích khi chỉ cần gán một thao tác "xem nhanh" điểm số cho một trải nghiệm.

Vì khung hình có thể chỉ xuất hiện một phần và thậm chí là bị bỏ qua hoàn toàn cập nhật khung hình 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 chỉ đếm khung và các tính năng khác trong phạm vi mà trình duyệt không thể cung cấp thông tin cập nhật đầy đủ về mặt hình ảnh khi cần thiết.

Mô hình tư duy nên đi từ:

1. Khung hình mỗi giây để
2. Phát hiện các bản cập nhật ảnh động quan trọng và bị thiếu để
3. Tỷ lệ phần trăm 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ờ đợi các nội dung quan trọng các bản cập nhật. Chúng tôi cho rằng mô hình này phù hợp với cách tự nhiên 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 tôi đã sử dụng những công cụ sau làm bộ chỉ số ban đầu:

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

Bạn có thể xem những điểm số này trong một số công cụ cho nhà phát triển Chrome ngay hôm nay. Trong khi các quy tắc này chỉ tập trung vào tổng thông lượng khung hình, chúng tôi cũng đang đánh giá các chỉ số khác chẳng hạn như độ trễ khung hình.

Lưu ý: Những tên này hơi cũ. "Phần trăm giảm sút" đặt tên không còn khớp với bất kỳ chữ nào "đã bị giảm khung" khái niệm. Như phần trước đã đề cập, mỗi khung ảnh động là cách sắp xếp các điều kiện phức tạp dẫn đến xác suất tổng thể. Những tên này sẽ phát triển theo thời gian.

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 lá cờ (chrome://flags/#show-performance-metrics-hud). Trong ứng dụng này, bạn có thể xem điểm số cho những chỉ số như Chỉ số quan trọng chính của trang web cũng như một vài định nghĩa thử nghiệm để có độ mượt của ảnh động dựa trên Tỷ lệ phần trăm khung hình bị giảm theo thời gian.

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

Bật tính năng "Kết xuất khung hình" Thống kê" trong Công cụ cho nhà phát triển thông qua chế độ cài đặt Kết xuất để xem trực tiếp các khung ảnh động mới, được mã hoá màu để phân biệt nội dung cập nhật một phần với khung hình bị bỏ qua hoàn toàn bản cập nhật. Khung hình/giây được báo cáo chỉ dành cho các khung hình được trình bày đầy đủ.

Trình xem khung trong bản ghi hồ sơ hiệu suất của Công cụ cho nhà phát triển

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

Hôm nay, bạn sẽ thấy khung hình trong trình xem khung được căn chỉnh tốt hơn các ranh giới vsync và được mã hoá bằng màu dựa trên trạng thái. Vẫn chưa hết thẻ cho tất cả các sắc thái nêu trên, nhưng chúng tôi đang có kế hoạch thêm trong tương lai gần.

Theo dõi bằng Chrome

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

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 khung ảnh động (sử dụng các sự kiện có tên PipelineReporter).
• Để cập nhật ảnh động bị giật, hãy tìm hiểu chính xác điều gì đang chặn ảnh động chạy nhanh hơn (sử dụng bảng chi tiết sự kiện trong PipelineReporter sự kiện).
• Đối với ảnh động dựa trên dữ liệu đầu vào, hãy xem mất bao lâu để có được bản cập nhật hình ảnh (sử dụng sự kiện có tên EventLatency).

Các bước tiếp theo

Sáng kiến Các chỉ số quan trọng về trang web nhằm cung cấp các chỉ số và hướng dẫn cho tạo trải nghiệm người dùng tuyệt vời trên web. Các chỉ số dựa trên phòng thí nghiệm như Tổng số Thời gian chặn (TBT) rất quan trọng đối với phát hiện và chẩn đoán các vấn đề tiềm ẩn về tương tác. Chúng tôi dự định thiết kế chỉ số dựa trên phòng thí nghiệm tương tự để tă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ẽ muốn thiết kế các API có thể đo lường độ mượt của ảnh động hiệu quả đối với người dùng thực trong field 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ả những cải tiến gần đây và các công cụ dành cho nhà phát triển đã được chuyển trong Chrome để đo lường độ mượt của hoạt ảnh. Hãy dùng thử các công cụ sau, đo điểm chuẩn ảnh động của bạn và cho chúng tôi biết nó dẫn đến đâu!

Bạn có thể gửi nhận xét của mình đến web-vitals-feedback Google nhóm với "[Chỉ số độ mượt]" trong dòng tiêu đề. Chúng tôi thực sự đang tìm kiếm muốn lắng nghe suy nghĩ của bạn!