Tìm hiểu cách đo ảnh động, cách hoạt động liên quan đến khung ảnh động và độ mượt tổng thể của trang.
Bạn có thể đã gặp phải các trang "bị gián đoạn" hoặc "bị treo" trong khi cuộn hoặc ảnh động. Chúng tôi vẫn muốn nói rằng những trải nghiệm này không mượt mà. Để giải quyết những loại vấn đề này, nhóm Chrome đang nỗ lực hỗ trợ thêm cho công cụ phòng thí nghiệm phát hiện ảnh động, cũng như cải tiến ổn định quy trình chẩn đoán quy trình hiển thị trong Chromium.
Chúng tôi muốn chia sẻ một số tiến độ gần đây, đưa ra hướng dẫn sử dụng công cụ cụ thể và thảo luận các ý tưởng về các chỉ số về độ mượt của ảnh động trong tương lai. Như thường lệ, chúng tôi muốn nghe ý kiến phản hồi của bạn.
Bài đăng này sẽ bao gồm 3 chủ đề chính:
- Xem nhanh ảnh động và khung ảnh động.
- Ý kiến hiện tại của chúng tôi về việc đo lường độ mượt của ảnh động tổng thể.
- Một số đề xuất thiết thực mà bạn nên áp dụng ngay hôm nay đối với công cụ trong phòng thí nghiệm.
Ảnh động là gì?
Ảnh động giúp nội dung trở nên sống động! Bằng cách làm cho nội dung di chuyển, đặc biệt là để phản hồi 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, ảnh động được triển khai không tốt hoặc chỉ thêm quá nhiều ảnh động có thể làm giảm trải nghiệm và khiến trải nghiệm trông 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 vừa thêm quá nhiều hiệu ứng chuyển đổi "hữu ích", mà thực sự trở nên gây khó chịu khi trải nghiệm khi hoạt động kém. Do đó, một số người dùng thực sự có thể muốn 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 theo.
Ả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ự:
- Style (Kiểu): Tính toán kiểu áp dụng cho các phần tử.
- Layout (Bố cục): Tạo hình học và vị trí cho từng phần tử.
- Paint: Điền số pixel cho mỗi phần tử vào các lớp.
- Tổng hợp: Vẽ các lớp vào 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ả các ảnh động này đều hoạt động thông qua một trong các cách sau:
- Điều chỉnh các thuộc tính bố cục.
- Điều chỉnh thuộc tính sơ đồ.
- Điều chỉnh các thuộc tính composite (tổng hợp).
Vì các giai đoạn này mang tính tuần tự, nên điều quan trọng là bạn phải xác định ảnh động về các thuộc tính tiếp theo trong quy trình. Quá trình cập nhật diễn ra càng sớm thì chi phí càng lớn và hoạt động cũng ít có khả năng suôn sẻ hơn. (Xem bài viết 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 thuộc tính bố cục có thể thuận tiện, nhưng việc này sẽ tốn thêm chi phí, ngay cả khi những chi phí đó không thể hiện 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 kết 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 thuộc tính tổng 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ỉ riêng điều này không đảm bảo độ mượt mà vì ngay cả ảnh động trên 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 hoạt ảnh là gì?
Phải mất một khoảng thời gian thì nội dung cập nhật đối với hình ảnh trình bày của một trang mới xuất hiện. Thay đổi về hình ảnh sẽ dẫn đến một khung ảnh động mới. Khung này cuối cùng sẽ được hiển thị trên màn hình của người dùng.
Hiển thị cập nhật trong một khoảng thời gian, vì vậy, cập nhật bằng hình ảnh sẽ được phân theo 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 mỗi giây (tức là 60 Hz). Một số màn hình hiện đại hơn có thể có tốc độ làm mới cao hơn (90 – 120 Hz đang trở nên phổ biến). Thông thường, các màn hình này có thể chủ động điều chỉnh 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 thay đổ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 ra một khung ảnh động hoàn chỉnh mọi lúc, mọi nơi. Lưu ý rằng mục tiêu này hoàn toàn khác với các tác vụ quan trọng khác của trình duyệt, 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 một cách hiệu quả.
Tại một số thời điểm, bạn có thể gặp khó khăn để hoàn tất tất cả các bản cập nhật hình ảnh trong thời hạn được phân bổ do màn hình chỉ định. Khi điều này xảy ra, trình duyệt sẽ rớt một khung. Màn hình của bạn không chuyển sang màu đen, chỉ tự lặp lại. Bạn sẽ thấy cùng một bản cập nhật hình ảnh lâu hơn một chút — cùng một khung ảnh động đã được trình bày ở cơ hội khung trước đó.
Điều này thực sự xảy ra thường xuyên! Thậm chí 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 nội dung giống tài liệu, vốn là điều phổ biến trên nền tảng web nói riêng. Khung hình bị giảm chỉ trở nên rõ ràng khi có các thay đổi quan trọng về hình ảnh, 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 hiển thị và trình bày nội dung cập nhật bằng hình ảnh nhanh chóng và hiệu quả của trình duyệt!
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 kiểu CSS hoặc ảnh động trên web quá phức tạp.
- Sử dụng mẫu chống mẫu thiết kế để tắt tính năng tối ưu hoá kết xuất nhanh.
- Quá nhiều JS hoạt động trên luồng chính, dẫn đến các tác vụ dài chặn quá trình cập nhật hình ảnh.
Nhưng làm cách nào để bạn có thể biết khi nào một khung ảnh động đã lỡ thời hạn và dẫn đến hiện tượng rớt khung hình?
Một phương thức khả thi là sử dụng cuộc thăm dò ý kiến requestAnimationFrame(). Tuy nhiên, phương thức 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 cơ hội 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 dự kiến, thì điều đó có nghĩa là một hàm 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ò và đếm tần suất gọi rAF, bạn có thể tính toán 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:
- Mỗi tập lệnh phải thiết lập vòng lặp thăm dò riêng.
- Việc này có thể chặn đường dẫn quan trọng.
- Ngay cả khi tính năng thăm dò rAF nhanh, vẫn có thể ngăn
requestIdleCallback()lên lịch các khối không hoạt động 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 không hoạt động kéo dài ngăn trình duyệt 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 trong thời gian dài hơn và các công việc khác ở chế độ nền 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 vượt quá ngân sách khung hình.
- Cuộc thăm dò ý kiến sẽ báo cáo 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 có thể thay đổi (ví dụ: do nguồn điện hoặc trạng thái hiển thị).
- Và quan trọng nhất, ứng dụng này không thực sự nắm bắt tất cả các loại cập nhật ảnh động!
Việc 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 Mẫu giật để xem ảnh động dựa trên rAF mà 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 hiện tượng rớt khung hình và ít lệnh gọi lại rAF hơn, đồng thời giảm FPS (khung hình/giây).
Khi luồng chính trở nên chậm, nội dung cập nhật bằng hình ảnh bắt đầu bị gián đoạn. Gây giật!
Nhiều công cụ đo lường đã tập trung chuyên sâu vào khả năng tạo ra luồng chính kịp thời và giúp khung ảnh động chạy mượt mà. Nhưng đây chưa phải là toàn bộ câu chuyện! 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 làm hỏng hoàn toàn khả năng trang cung cấp
một số loại thông tin cập nhật bằng hình ảnh nhất định. Bạn có thể thấy ở góc trên cùng bên trái một mức giảm FPS được báo cáo requestAnimationFrame() tương ứng về 0.
Chưa hết, bất kể những công việc dài hạn này, trang vẫn tiếp tục cuộn trơn tru. Nguyên nhân là do trên các trình duyệt hiện đại, thao tác cuộn thường được tạo theo luồng, do trình tổng hợp điều khiển hoàn toàn.
Đây là một ví dụ chứa đồng thời nhiều khung bị bỏ trên luồng chính, nhưng vẫn có nhiều khung cuộn được phân phối thành công trên luồng của trình tổng hợp. Sau khi hoàn thành tác vụ dài, bản cập nhật màu vẽ luồng chính vẫn không có thay đổi gì về hình ảnh. Việc thăm dò rAF đề xuất giảm khung hình xuống 0, nhưng trực quan, người dùng sẽ không nhận thấy sự khác biệt!
Đối với khung hình hoạt hình, câu chuyện không hề đơn giản.
Khung ảnh động: Các bản cập nhật quan trọng
Ví dụ ở trên cho thấy câu chuyện còn có nhiều điểm khác ngoài requestAnimationFrame().
Vậy khi nào việc cập nhật ảnh động và khung ảnh động có vai trò quan trọng? Dưới đây là một số tiêu chí mà chúng tôi đang cân nhắc và muốn nhận ý kiến phản hồi:
- Thông tin cập nhật về luồng chính và trình tổng hợp
- Thiếu thông tin cập nhật về màu vẽ
- Phát hiện ảnh động
- Chất lượng so với số lượng
Thông tin cập nhật về luồng chính và trình tổng hợp
Cập nhật khung ảnh động không phải là boolean. Trường hợp này không xảy ra trường hợp khung hình chỉ có thể bị bỏ hoàn toàn hoặc được trình bày đầy đủ. Có nhiều lý do khiến khung ảnh động có thể được trình bày một phần . Nói cách khác, ứng dụng có thể đồng thời có một số nội dung lỗi thời trong khi vẫn có một số bản cập nhật trực quan mới được trình bày.
Ví dụ phổ biến nhất của vấn đề 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 kết xuất khung hình nhưng lại có bản cập nhật mới về luồng của trình tổng hợp (chẳng hạn như ví dụ về cuộn theo luồng đã đề cập trước đó).
Một lý do quan trọng tại sao 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à vì việc này sẽ cho phép luồng của trình tổng hợp điều khiển hoàn toàn ảnh động ngay cả khi luồng chính 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ể xảy ra những 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 bỏ lỡ một vài thời hạn kết xuất khung hình. Ở đâ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 những khung có chứa một số bản cập nhật hình ảnh mới (mà không có toàn bộ bản cập nhật hình ảnh mới) là một phần khung. Khung hình từng phần là khá phổ biến. Tốt nhất là nên cập nhật một phần các nội dung cập nhật hình ảnh quan trọng nhất, chẳng hạn như ảnh động, nhưng điều này chỉ có thể xảy ra nếu ảnh động do luồng của trình tổng hợp điều khiển.
Thiếu thông tin cập nhật về màu vẽ
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à tạo điểm ảnh trong thời gian trình chiếu khung.
Hoặc ngay cả khi một trang hoàn toàn tĩnh, trình duyệt vẫn có thể không hiển thị được bản cập nhật hình ảnh trong khi cuộn nhanh. Đó là vì các lượt hiển thị pixel của nội dung bên ngoài khung nhìn hiển thị có thể bị loại bỏ để tiết kiệm bộ nhớ GPU. Hệ thống cần thời gian để kết xuất pixel và có thể mất nhiều thời gian hơn một khung để kết xuất mọi thứ sau một thao tác cuộn lớn, chẳng hạn như thao tác hất ngón tay. Thao tác này thường được gọi là kinh nghiệm kiểm tra.
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 làm được điều đó 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ị chậm, 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, điều đó có thể làm giảm số lần cập nhật khung hình bị rớt, nhưng về mặt hình ảnh thì thông tin 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 tất cả các loại thông lượng khung hình thấp đều xấu. Nếu trang chủ yếu ở 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òn giúp tiết kiệm pin!).
Vậy khi nào công suất khung hình đóng vai trò quan trọng?
Phát hiện ảnh động
Công suất khung hình cao rất quan trọng, đặc biệt là trong khoảng thời gian có các ảnh động quan trọng. Các loại ảnh động khác nhau sẽ phụ thuộc vào bản cập nhật hình ảnh từ một luồng cụ thể (luồng chính, trình tổng hợp hoặc một trình thực thi), vì vậy, việc cập nhật hình ảnh phụ thuộc vào luồng đó có 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 mà bất cứ khi nào có một ảnh động 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 các loại khác. Ảnh động khai báo hoặc ảnh động do người dùng nhập sẽ rõ ràng hơn so với ảnh động do JavaScript được triển khai dưới dạng nội dung cập nhật định kỳ đối với các thuộc tính kiểu có thể tạo ảnh động.
Ngay cả với requestAnimationFrame(), không phải lúc nào bạn cũng giả định rằng mọi lệnh gọi rAF nhất thiết phải tạo một bản cập nhật hoặc ảnh động trực quan. Ví dụ: việc sử dụng tính năng thăm dò rAF chỉ để theo dõi tốc độ khung hình (như trình bày ở trên) sẽ không ảnh hưởng đến các phép đo độ mượt vì không có hình ảnh cập nhật.
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ì nó 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 là 60 khung hình/giây trong khi xem video. Về mặt kỹ thuật, việc 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ề việc lưu vào bộ đệm mạng. Điều này không được trực tiếp thu thập bằng các chỉ số độ mượt của ảnh động, nhưng 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> (thậm chí có thể 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) về mặt kỹ thuật có thể hoàn toàn mượt mà về mặt khung ảnh động, trong khi vẫn không tải đượ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 phần mềm kết xuất.
Và tất nhiên, một trang web cũng có thể có một số ảnh động rất xấu 🙂
Ý tôi là, tôi đoán là họ khá thú vị 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 những 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ó điểm về độ hoàn chỉnh hoặc độ mượt.
Dưới đây là nhiều 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 xấu nhất:
| Không cầ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 đủ | Việc cập nhật luồng chính được cam kết đúng thời hạn hoặc không cần cập nhật luồng chính nào. |
| Đã 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ễ không có thay đổi gì về hình ảnh. |
| Đã trình bày một phần | Chỉ trình tổng hợp; luồng chính đã có bản cập nhật hình ảnh, nhưng bản cập nhật đó không bao gồm ảnh động ảnh hưởng đến độ mượt. |
| Đã trình bày một phần | Chỉ trình tổng hợp; luồng chính có bản cập nhật hình ảnh ảnh hưởng đến độ mượt, nhưng một khung hình cũ trước đó đã xuất hiện và được sử dụng thay thế. |
| Đã trình bày một phần | Chỉ trình tổng hợp; 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ó một ảnh động ảnh hưởng đến độ mượt. |
| Đã 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 thả | Không có nội dung cập nhật nào. Không có bản cập nhật trình tổng hợp nào mong muốn và hoạt động chính đã bị trễ. |
| Khung hình thả | Chúng tôi mong muốn cập nhật trình tổng hợp nhưng bị chậm trễ. |
| Khung đã lỗi thời | Tôi mong muốn có bản cập nhật và bản cập nhật này do trình kết xuất tạo ra, nhưng GPU vẫn không hiển thị bản cập nhật này trước thời hạn vsync. |
Bạn có thể chuyển những trạng thái này thành một điểm số nào đó. Và có lẽ một cách để diễn giải điểm số này là coi điểm số này là xác suất người dùng quan sát được. Một khung hình bị rớt có thể không quan sát được, nhưng chắc chắn là một chuỗi gồm nhiều khung hình bị rớt ảnh hưởng đến độ mượt của một hàng là chắc chắn!
Kết hợp tất cả lại với nhau: Chỉ số tỷ lệ phần trăm khung hình bị sụt giảm
Mặc dù đôi khi có thể cần phải đi sâu vào trạng thái của từng khung ảnh động, nhưng bạn cũng chỉ nên chỉ định điểm "xem nhanh" cho trải nghiệm.
Vì khung hình có thể được trình bày một phần và thậm chí 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 mà, nên chúng ta không muốn tập trung nhiều vào việc chỉ đếm số khung hình hơn mà tập trung nhiều hơn vào mức độ mà trình duyệt không thể cung cấp bản cập nhật hình ảnh hoàn chỉnh khi cần thiết.
Mô hình tư duy nên chuyển từ:
- Khung hình mỗi giây, để
- Phát hiện các bản cập nhật ảnh động quan trọng và bị thiếu để
- 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 độ 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 chỉ số sau đây làm nhóm chỉ số ban đầu:
- Tỷ lệ phần trăm giảm trung bình: đối với tất cả các khung ảnh động không ở trạng thái rảnh trong toàn bộ tiến trình
- Trường hợp tỷ lệ phần trăm khung hình bị rớt xấu nhất: khi được đo trong khoảng thời gian trượt hơn 1 giây.
- Phân vị thứ 95 của tỷ lệ phần trăm khung hình bị giảm: được đo trong khoảng thời gian trượt trong 1 giây.
Hiện nay, bạn có thể tìm thấy các điểm số này trong một số công cụ cho nhà phát triển Chrome. Mặc dù các chỉ số này chỉ tập trung vào thông lượng khung hình tổng thể, nhưng chúng tôi cũng đang đánh giá các yếu tố khác, chẳng hạn như độ trễ của khung hình.
Hãy tự mình trải nghiệm trong công cụ dành cho nhà phát triển!
HUD hiệu suất
Chromium có HUD hiệu suất gọn gàng ẩn sau một lá 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ư Chỉ số quan trọng chính của trang web và một số định nghĩa thử nghiệm về độ mượt của ảnh động dựa trên Tỷ lệ khung hình bị giảm theo thời gian.
Số liệu thống kê về quá trình kết xuất khung hình
Bật "Số liệu thống kê về kết xuất khung hình" trong Công cụ cho nhà phát triển thông qua chế độ cài đặt Kết xuất để xem chế độ xem trực tiếp của các khung ảnh động mới, được mã hoá bằng màu để phân biệt bản cập nhật một phần với các bản cập nhật khung hình bị bỏ hoàn toàn. 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 các bản ghi hồ sơ hiệu suất của Công cụ cho nhà phát triển
Từ lâu, bảng điều khiển Hiệu suất DevTools đã có trình xem Khung. Tuy nhiên, quy trình này đã phát triển thêm một chút không đồng bộ với cách hoạt động thực sự của quy trình kết xuất hiện đại. Đã có nhiều điểm cải tiến gần đây, 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 gỡ lỗi đáng kể các vấn đề về ảnh động.
Hiện nay, bạn sẽ thấy rằng các khung hình trong trình xem khung hình được căn chỉnh tốt hơn với ranh giới vsync và được mã hoá màu dựa trên trạng thái. Vẫn chưa có hình ảnh đầy đủ cho tất cả các khía cạnh nêu trên, nhưng chúng tôi dự định sẽ bổ sung thêm trong thời gian tới.
Theo dõi Chrome
Cuối cùng, với tính năng Theo dõi của Chrome, công cụ lựa chọn để phân tích chi tiết, bạn có thể ghi lại dấu vết "Kết xuất nội dung web" thông qua Giao diện người dùng Perfetto mới (hoặc about:tracing) và tìm hiểu kỹ hơn về quy trình đồ hoạ của Chrome. Đây có thể là một tác vụ khó khăn, nhưng gần đây đã có một vài tính năng
được thêm vào Chromium để giúp việc này dễ dàng hơn. 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.
Thông qua các sự kiện theo dõi, bạn có thể xác định chính xác:
- Ảnh động nào đang chạy (sử dụng các 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). - Đố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 khiến ảnh động của bạn chạy nhanh hơn (bằng cách sử dụng bảng phân tích sự kiện trong các sự kiện
PipelineReporter). - Đối với ảnh động dựa trên đầu vào, hãy xem thời gian cần để cập nhật hình ảnh (sử dụng các sự kiện có tên
EventLatency).
Các bước tiếp theo
Mục đích của sáng kiến Các chỉ số quan trọng về trang web là cung cấp các chỉ số và hướng dẫn để tạo nên trải nghiệm chất lượng cao 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) đóng vai trò quan trọng trong việc 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 đang lên kế hoạch thiết kế một chỉ số tương tự dựa trên phòng thí nghiệm về độ mượt của ảnh động.
Chúng tôi sẽ thông báo cho bạn khi chúng tôi tiếp tục nghiên cứu các ý tưởng để thiết kế một chỉ số toàn diện dựa trên dữ liệu khung ảnh động riêng lẻ.
Trong tương lai, chúng tôi cũng muốn thiết kế các API giúp bạn có thể đo lường độ mượt mà 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 nên chú ý theo dõi thông tin cập nhật ở đó nhé!
Ý kiến 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 cung cấp trong Chrome để đo lường độ mượt của ảnh động. Hãy dùng thử các công cụ này, đo điểm chuẩn ảnh động và cho chúng tôi biết vị trí của ảnh động!
Bạn có thể gửi nhận xét đến nhóm web-vitals-feedback của Google kèm theo "[Sự mượt mà]" trong dòng tiêu đề. Chúng tôi rất mong được lắng nghe ý kiến của bạn!