PerformanceResourceTiming

Mô tả

Các thuộc tính của giao diện này tạo ra một timeline tải tài nguyên với các dấu thời gian độ phân giải cao cho các sự kiện mạng như thời điểm bắt đầu và kết thúc chuyển hướng, fetch start, thời điểm bắt đầu và kết thúc tra cứu DNS, thời điểm bắt đầu và kết thúc phản hồi, v.v. Ngoài ra, giao diện còn mở rộng PerformanceEntry với các thuộc tính khác cung cấp dữ liệu về kích thước của tài nguyên đã tìm nạp cũng như loại tài nguyên đã khởi tạo việc tìm nạp.

Các chỉ số resource timing điển hình

Các thuộc tính của giao diện này cho phép bạn tính một số chỉ số resource timing. Các trường hợp sử dụng phổ biến gồm:

• Đo thời gian bắt tay TCP (connectEnd - connectStart)
• Đo thời gian tra cứu DNS (domainLookupEnd - domainLookupStart)
• Đo thời gian chuyển hướng (redirectEnd - redirectStart)
• Đo thời gian yêu cầu tạm thời (firstInterimResponseStart - finalResponseHeadersStart)
• Đo thời gian yêu cầu (responseStart - requestStart)
• Đo thời gian yêu cầu tài liệu (finalResponseHeadersStart - requestStart)
• Đo thời gian thương lượng TLS (requestStart - secureConnectionStart)
• Đo thời gian tìm nạp (không có chuyển hướng) (responseEnd - fetchStart)
• Đo thời gian xử lý của ServiceWorker (fetchStart - workerStart)
• Kiểm tra xem nội dung có được nén hay không (decodedBodySize không nên khác encodedBodySize)
• Kiểm tra xem có trúng bộ đệm cục bộ hay không (transferSize nên bằng 0)
• Kiểm tra xem có dùng giao thức hiện đại và nhanh hay không (nextHopProtocol nên là HTTP/2 hoặc HTTP/3)
• Kiểm tra xem tài nguyên có đúng là render-blocking hay không (renderBlockingStatus)

Quản lý kích thước bộ đệm resource

Mặc định chỉ có 250 resource timing entry được đưa vào bộ đệm. Để biết thêm thông tin, xem kích thước bộ đệm resource của hướng dẫn Resource Timing.

Thông tin timing liên miền

Nhiều thuộc tính resource timing bị giới hạn chỉ trả về 0 hoặc một chuỗi rỗng khi tài nguyên là một yêu cầu cross-origin. Để hiển thị thông tin timing cross-origin, cần đặt tiêu đề phản hồi HTTP Timing-Allow-Origin.

Các thuộc tính mặc định trả về 0 khi tải tài nguyên từ một origin khác với origin của chính trang web: redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, và responseStart.

Ví dụ, để cho phép https://mdn.go-mizu.dev xem thông tin timing tài nguyên, tài nguyên cross-origin nên gửi:

Timing-Allow-Origin: https://mdn.go-mizu.dev

Thuộc tính thể hiện

Kế thừa từ PerformanceEntry

Giao diện này mở rộng các thuộc tính PerformanceEntry sau cho các loại resource performance entry bằng cách ràng buộc và giới hạn chúng như sau:

PerformanceEntry.duration Read only

Trả về một timestamp là hiệu số giữa các thuộc tính responseEnd và startTime.

PerformanceEntry.entryType Read only

Trả về "resource".

PerformanceEntry.name Read only

Trả về URL của tài nguyên.

PerformanceEntry.startTime Read only

Trả về dấu thời gian timestamp tại thời điểm tài nguyên bắt đầu được tìm nạp. Giá trị này tương đương với PerformanceResourceTiming.fetchStart.

Các dấu thời gian

Giao diện hỗ trợ các thuộc tính dấu thời gian sau mà bạn có thể thấy trong sơ đồ và được liệt kê theo thứ tự chúng được ghi lại cho việc tìm nạp một tài nguyên. Danh sách theo bảng chữ cái được hiển thị trong thanh điều hướng bên trái.

PerformanceResourceTiming.redirectStart Read only

Một DOMHighResTimeStamp biểu thị thời điểm bắt đầu của lần tìm nạp khởi tạo chuyển hướng.

PerformanceResourceTiming.redirectEnd Read only

Một DOMHighResTimeStamp ngay sau khi nhận byte cuối cùng của phản hồi của lần chuyển hướng cuối cùng.

PerformanceResourceTiming.workerStart Read only

Trả về một DOMHighResTimeStamp ngay trước khi phát FetchEvent nếu luồng Service Worker đang chạy, hoặc ngay trước khi khởi động luồng Service Worker nếu nó chưa chạy. Nếu tài nguyên không bị Service Worker chặn, thuộc tính này luôn trả về 0.

PerformanceResourceTiming.fetchStart Read only

Một DOMHighResTimeStamp ngay trước khi trình duyệt bắt đầu tìm nạp tài nguyên.

PerformanceResourceTiming.domainLookupStart Read only

Một DOMHighResTimeStamp ngay trước khi trình duyệt bắt đầu tra cứu tên miền cho tài nguyên.

PerformanceResourceTiming.domainLookupEnd Read only

Một DOMHighResTimeStamp biểu thị thời điểm ngay sau khi trình duyệt hoàn tất tra cứu tên miền cho tài nguyên.

PerformanceResourceTiming.connectStart Read only

Một DOMHighResTimeStamp ngay trước khi trình duyệt bắt đầu thiết lập kết nối tới máy chủ để lấy tài nguyên.

PerformanceResourceTiming.secureConnectionStart Read only

Một DOMHighResTimeStamp ngay trước khi trình duyệt bắt đầu quá trình bắt tay để bảo mật kết nối hiện tại.

PerformanceResourceTiming.connectEnd Read only

Một DOMHighResTimeStamp ngay sau khi trình duyệt hoàn tất thiết lập kết nối tới máy chủ để lấy tài nguyên.

PerformanceResourceTiming.requestStart Read only

Một DOMHighResTimeStamp ngay trước khi trình duyệt bắt đầu yêu cầu tài nguyên từ máy chủ.

PerformanceResourceTiming.firstInterimResponseStart Read only

Một DOMHighResTimeStamp biểu thị thời gian phản hồi tạm thời (ví dụ 100 Continue hoặc 103 Early Hints).

PerformanceResourceTiming.responseStart Read only

Một DOMHighResTimeStamp ngay sau khi trình duyệt nhận byte đầu tiên của phản hồi từ máy chủ (có thể là phản hồi tạm thời).

PerformanceResourceTiming.finalResponseHeadersStart Read only

Một DOMHighResTimeStamp biểu thị thời điểm phản hồi đầu cuối có header bắt đầu (ví dụ 200 Success), sau mọi phản hồi tạm thời.

PerformanceResourceTiming.responseEnd Read only

Một DOMHighResTimeStamp ngay sau khi trình duyệt nhận byte cuối cùng của tài nguyên hoặc ngay trước khi kết nối vận chuyển bị đóng, tùy điều kiện nào đến trước.

Thông tin tài nguyên bổ sung

Ngoài ra, giao diện này còn hiển thị các thuộc tính sau chứa thêm thông tin về tài nguyên:

PerformanceResourceTiming.contentType Read only Experimental

Một chuỗi biểu thị phiên bản rút gọn và chuẩn hóa của MIME type của tài nguyên đã tìm nạp.

PerformanceResourceTiming.decodedBodySize Read only

Một số là kích thước (tính bằng octet) nhận được từ lần tìm nạp (HTTP hoặc cache) của phần thân thông điệp, sau khi loại bỏ mọi content encoding đã áp dụng.

PerformanceResourceTiming.deliveryType Read only

Cho biết tài nguyên được phân phối như thế nào - ví dụ từ cache hoặc từ navigational prefetch.

PerformanceResourceTiming.encodedBodySize Read only

Một số biểu thị kích thước (tính bằng octet) nhận được từ lần tìm nạp (HTTP hoặc cache) của phần thân payload, trước khi loại bỏ mọi content encoding đã áp dụng.

PerformanceResourceTiming.initiatorType Read only

Một chuỗi biểu thị tính năng nền tảng web đã khởi tạo performance entry.

PerformanceResourceTiming.nextHopProtocol Read only

Một chuỗi biểu thị giao thức mạng được dùng để tìm nạp tài nguyên, được xác định bởi ALPN Protocol ID (RFC7301).

PerformanceResourceTiming.renderBlockingStatus Read only

Một chuỗi biểu thị trạng thái chặn kết xuất. Có thể là "blocking" hoặc "non-blocking".

PerformanceResourceTiming.responseStatus Read only

Một số biểu thị mã trạng thái phản hồi HTTP được trả về khi tìm nạp tài nguyên.

PerformanceResourceTiming.transferSize Read only

Một số biểu thị kích thước (tính bằng octet) của tài nguyên đã tìm nạp. Kích thước này bao gồm các trường header phản hồi cộng với phần thân payload phản hồi.

PerformanceResourceTiming.serverTiming Read only

Một mảng các entry PerformanceServerTiming chứa các chỉ số server timing.

Phương thức thể hiện

PerformanceResourceTiming.toJSON()

Trả về biểu diễn JSON của đối tượng PerformanceResourceTiming.

Ví dụ

Ghi nhật ký thông tin resource timing

Ví dụ dùng PerformanceObserver, thông báo các performance entry resource mới khi chúng được ghi trong performance timeline của trình duyệt. Dùng tùy chọn buffered để truy cập các entry từ trước khi observer được tạo.

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

observer.observe({ type: "resource", buffered: true });

Ví dụ dùng Performance.getEntriesByType(), chỉ hiển thị các performance entry resource đang có trong performance timeline tại thời điểm bạn gọi phương thức này:

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(entry);
});

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Resource timing (Overview)