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

API Khung hoạt ảnh dài

Barry Pollard

Noam Rosenthal

API Khung hình động dài (LoAF – phát âm là Lo-Af) là bản cập nhật cho API Tác vụ dài để giúp bạn hiểu rõ hơn về các bản cập nhật giao diện người dùng (UI) chậm. Điều này có thể hữu ích cho việc xác định các khung ảnh động chậm có khả năng ảnh hưởng đến chỉ số Chỉ số quan trọng chính của trang web Tương tác với Nội dung hiển thị tiếp theo (INP). Chỉ số này đo lường khả năng phản hồi hoặc để xác định các hiện tượng giật khác trên giao diện người dùng ảnh hưởng đến độ mượt.

Trạng thái của API

Hỗ trợ trình duyệt

Sau bản dùng thử theo nguyên gốc từ Chrome 116 sang Chrome 122, LoAF API đã được vận chuyển từ Chrome 123.

API Tác vụ dài

Hỗ trợ trình duyệt

Nguồn

API Khung động dài là giải pháp thay thế cho API Tác vụ dài đã có trong Chrome từ một thời gian dài (kể từ Chrome 58). Đúng như tên gọi, Long Task API cho phép bạn theo dõi các tác vụ dài, là các tác vụ chiếm luồng chính trong 50 mili giây trở lên. Bạn có thể giám sát các công việc dài bằng giao diện PerformanceLongTaskTiming, với một PeformanceObserver:

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'longtask', buffered: true });

Các tác vụ dài có thể gây ra vấn đề về khả năng phản hồi. Nếu người dùng cố gắng tương tác với một trang (ví dụ: nhấp vào nút hoặc mở trình đơn) nhưng luồng chính đang xử lý một tác vụ dài, thì hoạt động tương tác của người dùng sẽ bị trì hoãn trong khi chờ tác vụ đó hoàn tất.

Để cải thiện khả năng phản hồi, bạn nên chia nhỏ các tác vụ dài. Nếu mỗi tác vụ dài được chia thành một loạt nhiều tác vụ nhỏ hơn, thì điều đó có thể cho phép thực thi nhiều tác vụ quan trọng hơn giữa những tác vụ đó để tránh sự chậm trễ đáng kể trong việc phản hồi các hoạt động tương tác.

Vì vậy, khi cố gắng cải thiện khả năng phản hồi, nỗ lực đầu tiên thường là chạy theo dõi hiệu suất và xem xét các tác vụ dài. Bạn có thể thực hiện việc này thông qua một công cụ kiểm tra dựa trên phòng thí nghiệm như Lighthouse (có bài kiểm tra Tránh các tác vụ dài trong luồng chính) hoặc bằng cách xem xét các tác vụ dài trong Công cụ của Chrome cho nhà phát triển.

Việc thử nghiệm tại phòng thí nghiệm thường là xuất phát điểm không phù hợp để xác định các vấn đề về khả năng phản hồi, vì những công cụ này có thể không bao gồm các hoạt động tương tác. Trong trường hợp đó, chúng chỉ là một nhóm nhỏ các hoạt động tương tác có thể xảy ra. Tốt nhất là bạn nên đo lường nguyên nhân gây ra tương tác chậm trong trường.

Nhược điểm của API Tác vụ dài

Việc đo lường các tác vụ dài trong thực tế bằng Trình quan sát hiệu suất chỉ khá hữu ích. Trong thực tế, mô hình này không cung cấp nhiều thông tin như vậy ngoài dữ liệu là một nhiệm vụ dài đã diễn ra và thời gian thực hiện.

Các công cụ Giám sát người dùng thực tế (rum) thường dùng chỉ số này để xác định xu hướng số lượng hoặc thời lượng của các nhiệm vụ dài hoặc xác định trang mà các nhiệm vụ dài xuất hiện, nhưng nếu không có thông tin cơ bản về nguyên nhân dẫn đến nhiệm vụ dài, thì việc này chỉ được sử dụng hạn chế. API Tác vụ dài chỉ có mô hình phân bổ cơ bản mà tốt nhất là chỉ cho bạn biết vùng chứa mà tác vụ dài đã xảy ra (tài liệu cấp cao nhất hoặc <iframe>), chứ không phải tập lệnh hoặc hàm gọi tác vụ đó, như được hiển thị bởi một mục thông thường:

{
  "name": "unknown",
  "entryType": "longtask",
  "startTime": 31.799999997019768,
  "duration": 136,
  "attribution": [
    {
      "name": "unknown",
      "entryType": "taskattribution",
      "startTime": 0,
      "duration": 0,
      "containerType": "window",
      "containerSrc": "",
      "containerId": "",
      "containerName": ""
    }
  ]
}

API Tác vụ dài cũng là một chế độ xem chưa hoàn chỉnh vì API này cũng có thể loại trừ một số tác vụ quan trọng. Một số hoạt động cập nhật (như kết xuất) diễn ra trong các tác vụ riêng biệt mà lý tưởng là bạn nên đi kèm với quá trình thực thi trước đó khiến quá trình cập nhật đó đo lường chính xác "tổng công việc" cho hoạt động tương tác đó. Để biết thêm thông tin chi tiết về những hạn chế của việc dựa vào việc cần làm, hãy xem phần "Những việc cần làm dài hạn" trong tài liệu giải thích.

Vấn đề cuối cùng là việc đo lường các tác vụ dài chỉ báo cáo về các tác vụ riêng lẻ mất nhiều thời gian hơn giới hạn 50 mili giây. Khung ảnh động có thể được tạo thành từ nhiều tác vụ dưới giới hạn 50 mili giây này, nhưng vẫn chặn khả năng hiển thị của trình duyệt.

API Khung hình động dài

Hỗ trợ trình duyệt

API Khung hình động dài (LoAF) là một API mới nhằm tìm cách giải quyết một số thiếu sót của API tác vụ dài nhằm cho phép nhà phát triển có được thông tin chi tiết hữu ích hơn nhằm giúp giải quyết các vấn đề về khả năng phản hồi và cải thiện INP.

Khả năng phản hồi tốt có nghĩa là trang phản hồi nhanh chóng với các tương tác được thực hiện với trang đó. Để làm được việc này, bạn có thể kịp thời khắc phục mọi nội dung cập nhật mà người dùng cần và tránh chặn không cho những nội dung cập nhật này diễn ra. Đối với INP, bạn nên phản hồi trong vòng 200 mili giây trở xuống, nhưng đối với các nội dung cập nhật khác (ví dụ: ảnh động) thì thậm chí cũng có thể quá dài.

API Khung ảnh động dài là một phương pháp thay thế để đo lường công việc chặn. Thay vì đo lường từng tác vụ riêng lẻ, API Khung hình động dài ( đúng như tên gọi của nó) đo lường các khung hình động dài. Khung ảnh động dài là khi quá trình cập nhật kết xuất bị trì hoãn quá 50 mili giây (giống như ngưỡng dành cho API Tác vụ dài).

Bạn có thể quan sát các khung ảnh động dài theo cách tương tự như các tác vụ dài có PerformanceObserver, nhưng lại xem kiểu long-animation-frame:

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

Bạn cũng có thể truy vấn các khung ảnh động dài trước đó qua Tiến trình hiệu suất như sau:

const loafs = performance.getEntriesByType('long-animation-frame');

Tuy nhiên, có một maxBufferSize cho các mục nhập hiệu suất mà sau đó các mục nhập mới hơn sẽ bị loại bỏ, vì vậy, phương pháp PerformanceObserver là phương pháp được đề xuất. Dung lượng bộ nhớ đệm long-animation-frame được thiết lập thành 200, tương tự như dung lượng của long-tasks.

Ưu điểm của việc xem khung hình thay vì tác vụ

Ưu điểm chính của việc xem xét điều này từ góc độ khung hình thay vì từ góc độ tác vụ là một hoạt ảnh dài có thể được tạo thành từ bất kỳ số lượng tác vụ nào tích luỹ dẫn đến một khung hoạt ảnh dài. Việc này giải quyết điểm cuối cùng đã đề cập trước đó, trong đó tổng của nhiều tác vụ chặn hiển thị nhỏ hơn trước khi khung ảnh động có thể không được API Tác vụ dài hiển thị.

Một ưu điểm khác của chế độ xem thay thế này trên các tác vụ dài là khả năng cung cấp thông tin chi tiết về thời gian cho toàn bộ khung hình. Thay vì chỉ bao gồm startTime và duration như API Tác vụ dài, LoAF bao gồm thông tin chi tiết hơn về các phần khác nhau của thời lượng khung hình, bao gồm:

startTime: thời gian bắt đầu của khung ảnh động dài so với thời gian bắt đầu điều hướng.
duration: thời lượng của khung ảnh động dài (không bao gồm thời gian trình bày).
renderStart: thời gian bắt đầu của chu kỳ kết xuất, bao gồm các lệnh gọi lại requestAnimationFrame, tính toán kiểu và bố cục, đổi kích thước trình quan sát và lệnh gọi lại trình quan sát nút giao.
styleAndLayoutStart: thời điểm bắt đầu khoảng thời gian dùng để tính toán kiểu và bố cục.
firstUIEventTimestamp: thời gian diễn ra sự kiện giao diện người dùng đầu tiên (chuột/bàn phím, v.v.) được xử lý trong suốt khung hình này.
blockingDuration: thời lượng tính bằng mili giây mà khung ảnh động bị chặn.

Những dấu thời gian này cho phép chia khung ảnh động dài thành các dấu thời gian:

Thời gian	Cách tính
Thời gian bắt đầu	`startTime`
Thời gian kết thúc	`startTime + duration`
Thời gian làm việc	`renderStart ? renderStart - startTime : duration`
Thời lượng hiển thị	`renderStart ? (startTime + duration) - renderStart: 0`
Kết xuất: Thời lượng trước bố cục	`styleAndLayoutStart ? styleAndLayoutStart - renderStart : 0`
Kết xuất: Thời lượng kiểu và bố cục	`styleAndLayoutStart ? (startTime + duration) - styleAndLayoutStart : 0`

Để biết thêm thông tin về các dấu thời gian riêng lẻ này, hãy tham khảo thông tin giải thích. Phần giải thích này cung cấp thông tin chi tiết về hoạt động đang đóng góp vào khung ảnh động dài.

Phân bổ hiệu quả hơn

Loại mục nhập long-animation-frame bao gồm dữ liệu phân bổ tốt hơn của từng tập lệnh đóng góp vào khung ảnh động dài.

Tương tự như API Tác vụ dài, API này sẽ được cung cấp trong một loạt các mục nhập thuộc tính, mỗi mục nhập có thông tin chi tiết như sau:

Cả name và EntryType đều sẽ trả về script.
invoker có ý nghĩa, cho biết cách gọi tập lệnh (ví dụ: 'IMG#id.onload', 'Window.requestAnimationFrame' hoặc 'Response.json.then').
invokerType của điểm truy cập tập lệnh:
- user-callback: Lệnh gọi lại đã biết được đăng ký từ một API nền tảng web (ví dụ: setTimeout, requestAnimationFrame).
- event-listener: Trình nghe sự kiện của nền tảng (ví dụ: click, load, keyup).
- resolve-promise: Trình xử lý lời hứa của nền tảng (ví dụ: fetch(). Lưu ý rằng trong trường hợp hứa hẹn, tất cả các trình xử lý của cùng một lời hứa sẽ được kết hợp với nhau thành một "tập lệnh").
- reject-promise: Theo resolve-promise, nhưng dành cho việc từ chối.
- classic-script: Đánh giá tập lệnh (ví dụ: <script> hoặc import())
- module-script: Giống như classic-script, nhưng dành cho tập lệnh mô-đun.
Phân tách dữ liệu thời gian cho tập lệnh đó:
- startTime: Thời gian hàm kết nối được gọi.
- duration: Khoảng thời gian từ startTime đến khi hàng đợi vi nhiệm vụ tiếp theo xử lý xong.
- executionStart: Thời gian sau khi biên dịch.
- forcedStyleAndLayoutDuration: Tổng thời gian dành cho việc xử lý bố cục/kiểu bắt buộc bên trong hàm này (xem phần đẩy dữ liệu).
- pauseDuration: Tổng thời gian dành cho các thao tác đồng bộ "tạm dừng" (cảnh báo, đồng bộ XHR).
Chi tiết nguồn tập lệnh:
- sourceURL: Tên tài nguyên của tập lệnh khi có sẵn (hoặc để trống nếu không tìm thấy).
- sourceFunctionName: Tên hàm tập lệnh nếu có (hoặc để trống nếu không tìm thấy).
- sourceCharPosition: Vị trí ký tự trong tập lệnh nếu có (hoặc -1 nếu không tìm thấy).
windowAttribution: Vùng chứa (tài liệu cấp cao nhất hoặc <iframe>) nơi xuất hiện khung ảnh động dài.
window: Tham chiếu đến cửa sổ cùng nguồn gốc.

Lưu ý quan trọng:

Trong quá trình Dùng thử theo nguyên gốc, cho đến Chrome 122, một số mục sau đây hơi khác:

desiredExecutionStart và desiredRenderStart tồn tại trong API, nhưng kể từ đó đã bị xoá để đơn giản hoá mục nhập vì các mục nhập này tỏ ra không hữu ích hơn so với nhận định ban đầu.
name và type đã được dùng thay cho invoker và invokerType.
sourceLocation được dùng làm giá trị kết hợp bao gồm sourceURL, sourceFunctionName và sourceCharPosition,

Để tiếp tục hỗ trợ các trình duyệt Chrome sử dụng bản dùng thử theo nguyên gốc, bạn nên sử dụng tính năng phát hiện tính năng (ví dụ: sử dụng "invoker" in PerformanceScriptTiming.prototype) hoặc sử dụng tính năng dự phòng (invoker = script.invoker || script.name).

Nếu được cung cấp, các mục nhập nguồn cho phép nhà phát triển biết chính xác cách mỗi tập lệnh trong khung ảnh động dài được gọi, cho đến vị trí ký tự trong tập lệnh gọi. Hàm này cung cấp vị trí chính xác trong tài nguyên JavaScript dẫn đến khung hoạt ảnh dài.

Ví dụ về mục hiệu suất `long-animation-frame`

Dưới đây là ví dụ hoàn chỉnh về mục hiệu suất long-animation-frame, chứa một tập lệnh duy nhất:

{
  "blockingDuration": 0,
  "duration": 60,
  "entryType": "long-animation-frame",
  "firstUIEventTimestamp": 11801.099999999627,
  "name": "long-animation-frame",
  "renderStart": 11858.800000000745,
  "scripts": [
    {
      "duration": 45,
      "entryType": "script",
      "executionStart": 11803.199999999255,
      "forcedStyleAndLayoutDuration": 0,
      "invoker": "DOMWindow.onclick",
      "invokerType": "event-listener",
      "name": "script",
      "pauseDuration": 0,
      "sourceURL": "https://web.dev/js/index-ffde4443.js",
      "sourceFunctionName": "myClickHandler",
      "sourceCharPosition": 17796,
      "startTime": 11803.199999999255,
      "window": [Window object],
      "windowAttribution": "self"
    }
  ],
  "startTime": 11802.400000000373,
  "styleAndLayoutStart": 11858.800000000745
}

Như bạn có thể thấy, điều này mang lại một lượng dữ liệu chưa từng có để các trang web có thể hiểu được nguyên nhân gây ra các bản cập nhật kết xuất chậm.

Bật API Khung ảnh động dài

API Khung ảnh động dài được bật theo mặc định trong Chrome 123.

Sử dụng Long Animation Frames API (API Khung hình động dài) trong trường

Các công cụ như Lighthouse, mặc dù hữu ích cho việc phát hiện và tái tạo vấn đề, là các công cụ phòng thí nghiệm có thể bỏ qua các khía cạnh quan trọng của trải nghiệm người dùng mà chỉ dữ liệu thực địa mới có thể cung cấp. Bạn có thể sử dụng Long Animation Frames API (API Khung hình động dài) trong trường này để thu thập dữ liệu bối cảnh quan trọng cho các lượt tương tác của người dùng mà API Tác vụ dài không làm được. Việc này có thể giúp bạn phát hiện và tái tạo các vấn đề về tính tương tác mà có thể bạn sẽ không phát hiện ra.

Tiếp theo, chúng tôi sẽ nêu một số chiến lược đề xuất, tuy nhiên nhóm Chrome muốn nghe ý kiến phản hồi về API này cũng như cách các nhà phát triển và nhà cung cấp dịch vụ Ghi nhật ký sử dụng thông tin mà API cung cấp.

Hỗ trợ phát hiện tính năng Long Animation Frames API

Bạn có thể dùng mã sau để kiểm tra xem API này có được hỗ trợ hay không:

if (PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')) {
  // Monitor LoAFs
}

Phương án thay thế sau có thể được sử dụng trong trường hợp này, khi khung hoạt ảnh dài chưa được hỗ trợ theo mặc định và đang ở trạng thái chuyển đổi này:

if ('PerformanceLongAnimationFrameTiming' in window) {
  // Monitor LoAFs
}

Báo cáo dữ liệu ảnh động dài về điểm cuối Analytics

Như đã hiển thị, mục hiệu suất LoAF bao gồm thông tin có giá trị. Một chiến lược là giám sát tất cả LoAF và báo hiệu những LoAF vượt quá một ngưỡng nhất định trở lại điểm cuối phân tích để phân tích sau:

const REPORTING_THRESHOLD_MS = 150;

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (entry.duration > REPORTING_THRESHOLD_MS) {
      // Example here logs to console, but could also report back to analytics
      console.log(entry);
    }
  }
});
observer.observe({ type: 'long-animation-frame', buffered: true });

Vì các mục nhập khung ảnh động dài có thể khá lớn, nên nhà phát triển nên quyết định dữ liệu nào từ mục đó sẽ được gửi cho Analytics. Ví dụ: thời gian tóm tắt của mục nhập và có thể là tên tập lệnh hoặc một số tập dữ liệu theo ngữ cảnh tối thiểu khác có thể được coi là cần thiết.

Quan sát các khung ảnh động dài kém nhất

Các trang web có thể muốn thu thập dữ liệu về khung ảnh động dài nhất (hoặc nhiều khung) để giảm lượng dữ liệu cần được báo hiệu. Do đó, bất kể trải nghiệm trang có bao nhiêu khung hình động dài, chỉ có dữ liệu dành cho 1, 5 khung hoặc nhiều khung hoạt ảnh dài nhất định rất cần thiết mới được báo hiệu ngược lại.

MAX_LOAFS_TO_CONSIDER = 10;
let longestBlockingLoAFs = [];

const observer = new PerformanceObserver(list => {
  longestBlockingLoAFs = longestBlockingLoAFs.concat(list.getEntries()).sort(
    (a, b) => b.blockingDuration - a.blockingDuration
  ).slice(0, MAX_LOAFS_TO_CONSIDER);
});
observer.observe({ type: 'long-animation-frame', buffered: true });

Báo hiệu vào thời điểm thích hợp (tốt nhất là vào sự kiện visibilitychange) để báo hiệu trở lại Analytics. Để kiểm thử cục bộ, bạn có thể định kỳ sử dụng console.table:

console.table(longestBlockingLoAFs);

Liên kết tới tương tác INP dài nhất

Để mở rộng việc quan sát các LoAF kém nhất, (các) khung LoAF tương ứng với mục nhập INP có thể được dùng làm dữ liệu phân bổ để cung cấp thêm thông tin chi tiết về cách cải thiện INP.

Hiện không có API trực tiếp nào để liên kết mục nhập INP với mục nhập hoặc mục nhập LoAF có liên quan, mặc dù bạn có thể thực hiện việc này trong mã bằng cách so sánh thời gian bắt đầu và thời gian kết thúc của mỗi mục (xem tập lệnh ví dụ này).

Báo cáo khung hoạt ảnh dài có tương tác

Một phương pháp thay thế yêu cầu ít mã hơn là luôn gửi các mục nhập LoAF lớn nhất (hoặc lớn nhất X lớn nhất) khi tương tác xảy ra trong khung hình (có thể được phát hiện bằng sự hiện diện của giá trị firstUIEventTimestamp). Trong hầu hết các trường hợp, trường hợp này sẽ bao gồm lượt tương tác INP cho một lượt truy cập nhất định. Trong một số ít trường hợp, nếu không thì Analytics vẫn hiển thị các lượt tương tác dài quan trọng cần khắc phục, vì đó có thể là lượt tương tác INP cho người dùng khác.

Mã sau đây ghi lại tất cả các mục nhập LoAF lớn hơn 150 mili giây khi có tương tác xảy ra trong khung hình. 150 được chọn ở đây vì nó thấp hơn một chút so với ngưỡng INP "tốt" 200 mili giây. Bạn có thể chọn giá trị cao hơn hoặc thấp hơn tuỳ theo nhu cầu của mình.

const REPORTING_THRESHOLD_MS = 150;

const observer = new PerformanceObserver(list => {
    for (const entry of list.getEntries()) {
      if (entry.duration > REPORTING_THRESHOLD_MS &&
        entry.firstUIEventTimestamp > 0
      ) {
        // Example here logs to console, but could also report back to analytics
        console.log(entry);
      }
    }
});
observer.observe({ type: 'long-animation-frame', buffered: true });

Xác định các mẫu phổ biến trong khung ảnh động dài

Chiến lược thay thế là xem xét các tập lệnh phổ biến xuất hiện nhiều nhất trong các mục nhập khung hoạt ảnh dài. Dữ liệu có thể được báo cáo lại ở cấp độ tập lệnh và/hoặc vị trí ký tự để xác định người tái phạm.

Phương pháp này có thể đặc biệt hiệu quả cho các nền tảng có thể tuỳ chỉnh, nơi có thể dễ dàng xác định các chủ đề hoặc trình bổ trợ gây ra vấn đề về hiệu suất trên nhiều trang web.

Thời gian thực thi của các tập lệnh phổ biến (hoặc nguồn gốc của bên thứ ba) trong khung ảnh động dài có thể được tổng hợp và báo cáo lại để xác định các yếu tố góp phần chung cho các khung ảnh động dài trên một trang web hoặc một tập hợp trang web. Ví dụ về URL:

const observer = new PerformanceObserver(list => {
  const allScripts = list.getEntries().flatMap(entry => entry.scripts);
  const scriptSource = [...new Set(allScripts.map(script => script.sourceURL))];
  const scriptsBySource= scriptSource.map(sourceURL => ([sourceURL,
      allScripts.filter(script => script.sourceURL === sourceURL)
  ]));
  const processedScripts = scriptsBySource.map(([sourceURL, scripts]) => ({
    sourceURL,
    count: scripts.length,
    totalDuration: scripts.reduce((subtotal, script) => subtotal + script.duration, 0)
  }));
  processedScripts.sort((a, b) => b.totalDuration - a.totalDuration);
  // Example here logs to console, but could also report back to analytics
  console.table(processedScripts);
});

observer.observe({type: 'long-animation-frame', buffered: true});

Ví dụ về kết quả này là:

`(index)`	`sourceURL`	`count`	`totalDuration`
`0`	`'https://example.consent.com/consent.js'`	`1`	`840`
`1`	`'https://example.com/js/analytics.js'`	`7`	`628`
`2`	`'https://example.chatapp.com/web-chat.js'`	`1`	`5`

Sử dụng API Khung ảnh động dài trong công cụ

API này cũng có thể cung cấp công cụ bổ sung cho nhà phát triển để gỡ lỗi cục bộ. Mặc dù một số công cụ như Lighthouse và Công cụ của Chrome cho nhà phát triển đã có thể thu thập phần lớn dữ liệu này bằng cách sử dụng thông tin theo dõi cấp thấp hơn, nhưng việc có API cấp cao hơn này có thể cho phép các công cụ khác truy cập vào dữ liệu này.

Hiển thị dữ liệu khung hoạt ảnh dài trong Công cụ cho nhà phát triển

Bạn có thể hiển thị các khung ảnh động dài trong Công cụ cho nhà phát triển bằng cách sử dụng performance.measure() API, sau đó được hiển thị trong theo dõi thời gian người dùng Công cụ cho nhà phát triển trong dấu vết hiệu suất để cho biết nơi cần tập trung nỗ lực nhằm cải thiện hiệu suất:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    performance.measure('LoAF', {
      start: entry.startTime,
      end: entry.startTime + entry.duration,
    });
  }
});

observer.observe({ type: 'long-animation-frame', buffered: true });

Nếu API này hữu ích về lâu dài, thì có khả năng API này sẽ được tích hợp vào Công cụ cho nhà phát triển, nhưng đoạn mã trước đó cho phép API này hiển thị ở đó trong thời gian chờ đợi.

Sử dụng dữ liệu khung ảnh động dài trong công cụ khác dành cho nhà phát triển

Tiện ích Các chỉ số quan trọng về trang web đã hiển thị giá trị trong thông tin gỡ lỗi về tóm tắt nhật ký để chẩn đoán các vấn đề về hiệu suất. API này hiện đã ra mắt, các công cụ như vậy có thể hiển thị dữ liệu dễ dàng hơn để giúp nhà phát triển biết nên tập trung công sức vào đâu. Chúng tôi cũng dự định thêm tính năng này vào thư viện JavaScript của các chỉ số quan trọng về trang web trong phiên bản 4.

Sử dụng dữ liệu khung ảnh động dài trong các công cụ kiểm thử tự động

Các công cụ kiểm thử tự động tương tự, có thể là trong quy trình CI/CD, có thể hiển thị thông tin chi tiết về các vấn đề tiềm ẩn về hiệu suất bằng cách đo lường các khung ảnh động dài trong khi chạy nhiều bộ kiểm thử.

Câu hỏi thường gặp

Một số câu hỏi thường gặp về API này bao gồm:

Tại sao bạn không chỉ mở rộng hoặc lặp lại API Tác vụ dài?

Đây là một cách khác để báo cáo một phương pháp đo lường tương tự (nhưng về cơ bản) về các vấn đề có thể xảy ra liên quan đến khả năng phản hồi. Điều quan trọng là phải đảm bảo những trang web dựa vào API Long Tasks hiện có tiếp tục hoạt động để tránh làm gián đoạn các trường hợp sử dụng hiện tại.

Mặc dù API Tác vụ dài có thể hưởng lợi từ một số tính năng của LoAF (chẳng hạn như mô hình phân bổ tốt hơn), chúng tôi tin rằng việc tập trung vào khung thay vì tác vụ sẽ mang lại nhiều lợi ích khiến đây trở thành API khác biệt về cơ bản so với API Tác vụ dài hiện có.

API này có thay thế API Tác vụ dài không?

Mặc dù chúng tôi cho rằng API Khung ảnh động dài là API tốt hơn và hoàn chỉnh hơn để đo lường các tác vụ dài, nhưng tại thời điểm này, chúng tôi chưa có kế hoạch ngừng sử dụng API Tác vụ dài.

Cần có ý kiến phản hồi

Bạn có thể gửi ý kiến phản hồi tại danh sách Vấn đề trong GitHub hoặc gửi các lỗi trong quá trình triển khai API của Chrome qua công cụ theo dõi lỗi của Chrome.

Kết luận

Long Animation Frames API (API Khung hình động dài) là một API mới thú vị có nhiều ưu điểm tiềm năng so với API Long Tasks trước đây.

Nền tảng này đang chứng minh là một công cụ chính để giải quyết các vấn đề về khả năng phản hồi theo đánh giá của INP. INP là một chỉ số đầy thách thức khi tối ưu hoá và API này là một cách mà nhóm Chrome đang tìm cách để giúp nhà phát triển dễ dàng xác định và giải quyết vấn đề.

Tuy nhiên, phạm vi của API Khung hình động dài không chỉ nằm trong INP và có thể giúp xác định các nguyên nhân khác dẫn đến việc cập nhật chậm có thể ảnh hưởng đến độ mượt mà tổng thể của trải nghiệm người dùng trên trang web.

Xác nhận

Hình thu nhỏ của Henry Be trên Unsplash.

API Khung hoạt ảnh dài

Trạng thái của API

API Tác vụ dài

Nhược điểm của API Tác vụ dài

API Khung hình động dài

Ưu điểm của việc xem khung hình thay vì tác vụ

Phân bổ hiệu quả hơn

Ví dụ về mục hiệu suất long-animation-frame

Bật API Khung ảnh động dài

Sử dụng Long Animation Frames API (API Khung hình động dài) trong trường

Hỗ trợ phát hiện tính năng Long Animation Frames API

Báo cáo dữ liệu ảnh động dài về điểm cuối Analytics

Quan sát các khung ảnh động dài kém nhất

Liên kết tới tương tác INP dài nhất

Báo cáo khung hoạt ảnh dài có tương tác

Xác định các mẫu phổ biến trong khung ảnh động dài

Sử dụng API Khung ảnh động dài trong công cụ

Hiển thị dữ liệu khung hoạt ảnh dài trong Công cụ cho nhà phát triển

Sử dụng dữ liệu khung ảnh động dài trong công cụ khác dành cho nhà phát triển

Sử dụng dữ liệu khung ảnh động dài trong các công cụ kiểm thử tự động

Câu hỏi thường gặp

Tại sao bạn không chỉ mở rộng hoặc lặp lại API Tác vụ dài?

API này có thay thế API Tác vụ dài không?

Cần có ý kiến phản hồi

Kết luận

Xác nhận

Ví dụ về mục hiệu suất `long-animation-frame`