chrome.loadTimes()
는 로드 측정항목을 노출하고
네트워크 정보를 개발자에게 제공하여
확인할 수 있습니다.
이 API는 2009년에 구현되었기 때문에 API가 보고하는 모든 유용한 정보는 다음과 같은 표준화된 API에서 찾을 수 있습니다.
- 탐색 시간 2
- 페인트 타이밍
nextHopProtocol
탐색 시간 2와 리소스 타이밍 2.
이러한 표준화된 API는 여러 브라우저 공급업체에서 구현되고 있습니다.
따라서 chrome.loadTimes()
가 Chrome 64에서 지원 중단됩니다.
지원 중단된 API
chrome.loadTimes()
함수는
네트워크 정보를 볼 수 있습니다. 예를 들어 다음 객체는
(www.google.com에서 chrome.loadTimes()
호출)
{
"requestTime": 1513186741.847,
"startLoadTime": 1513186741.847,
"commitLoadTime": 1513186742.637,
"finishDocumentLoadTime": 1513186742.842,
"finishLoadTime": 1513186743.582,
"firstPaintTime": 1513186742.829,
"firstPaintAfterLoadTime": 0,
"navigationType": "Reload",
"wasFetchedViaSpdy": true,
"wasNpnNegotiated": true,
"npnNegotiatedProtocol": "h2",
"wasAlternateProtocolAvailable": false,
"connectionInfo": "h2"
}
표준화된 교체
이제 표준화된 API를 사용하여 위의 각 값을 찾을 수 있습니다. 다음 테이블은 각 값을 표준화된 API와 일치시키며, 아래 섹션에서는 최신 코드로 이전 API의 각 값을 가져오는 방법을 보여주는 코드 예시
특성 chrome.loadTimes() 개
| 표준화된 API 대체 |
---|---|
requestTime |
<ph type="x-smartling-placeholder"></ph> 내비게이션 타이밍 2 를 통해 개인정보처리방침을 정의할 수 있습니다. |
startLoadTime |
<ph type="x-smartling-placeholder"></ph> 내비게이션 타이밍 2 를 통해 개인정보처리방침을 정의할 수 있습니다. |
commitLoadTime |
<ph type="x-smartling-placeholder"></ph> 내비게이션 타이밍 2 를 통해 개인정보처리방침을 정의할 수 있습니다. |
finishDocumentLoadTime |
<ph type="x-smartling-placeholder"></ph> 내비게이션 타이밍 2 를 통해 개인정보처리방침을 정의할 수 있습니다. |
finishLoadTime |
<ph type="x-smartling-placeholder"></ph> 내비게이션 타이밍 2 를 통해 개인정보처리방침을 정의할 수 있습니다. |
firstPaintTime |
<ph type="x-smartling-placeholder"></ph> 페인트 타이밍 를 통해 개인정보처리방침을 정의할 수 있습니다. |
firstPaintAfterLoadTime |
해당 사항 없음 |
navigationType |
<ph type="x-smartling-placeholder"></ph> 내비게이션 타이밍 2 를 통해 개인정보처리방침을 정의할 수 있습니다. |
wasFetchedViaSpdy |
<ph type="x-smartling-placeholder"></ph> 내비게이션 타이밍 2 를 통해 개인정보처리방침을 정의할 수 있습니다. |
wasNpnNegotiated |
<ph type="x-smartling-placeholder"></ph> 내비게이션 타이밍 2 를 통해 개인정보처리방침을 정의할 수 있습니다. |
npnNegotiatedProtocol |
<ph type="x-smartling-placeholder"></ph> 내비게이션 타이밍 2 를 통해 개인정보처리방침을 정의할 수 있습니다. |
wasAlternateProtocolAvailable |
해당 사항 없음 |
connectionInfo |
<ph type="x-smartling-placeholder"></ph> 내비게이션 타이밍 2 를 통해 개인정보처리방침을 정의할 수 있습니다. |
아래 코드 예는
chrome.loadTimes()
그러나 새 코드의 경우 이러한 코드 예시는
좋습니다. chrome.loadTimes()
는 시간 값을 에포크 시간(초 단위)으로 제공하는 반면 새로운 성능 API는
일반적으로 해당 페이지의 콘텐츠와 관련된 값을 밀리초 단위로
시간 출처는
성능 분석에 더 유용할 수 있습니다
또한 여러 예에서는 Performance Timeline 2 API (예:
performance.getEntriesByType()
)를 사용하지만 이전
Navigation Timing 1 API와
더 광범위한 브라우저 지원을 제공합니다. 앞으로는 Performance Timeline API를 사용하는 것이 좋습니다.
일반적으로 더 높은 정밀도로 보고됩니다.
requestTime
function requestTime() {
// If the browser supports the Navigation Timing 2 and HR Time APIs, use
// them, otherwise fall back to the Navigation Timing 1 API.
if (window.PerformanceNavigationTiming && performance.timeOrigin) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return (ntEntry.startTime + performance.timeOrigin) / 1000;
} else {
return performance.timing.navigationStart / 1000;
}
}
startLoadTime
function startLoadTime() {
// If the browser supports the Navigation Timing 2 and HR Time APIs, use
// them, otherwise fall back to the Navigation Timing 1 API.
if (window.PerformanceNavigationTiming && performance.timeOrigin) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return (ntEntry.startTime + performance.timeOrigin) / 1000;
} else {
return performance.timing.navigationStart / 1000;
}
}
commitLoadTime
function commitLoadTime() {
// If the browser supports the Navigation Timing 2 and HR Time APIs, use
// them, otherwise fall back to the Navigation Timing 1 API.
if (window.PerformanceNavigationTiming && performance.timeOrigin) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return (ntEntry.responseStart + performance.timeOrigin) / 1000;
} else {
return performance.timing.responseStart / 1000;
}
}
finishDocumentLoadTime
function finishDocumentLoadTime() {
// If the browser supports the Navigation Timing 2 and HR Time APIs, use
// them, otherwise fall back to the Navigation Timing 1 API.
if (window.PerformanceNavigationTiming && performance.timeOrigin) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return (ntEntry.domContentLoadedEventEnd + performance.timeOrigin) / 1000;
} else {
return performance.timing.domContentLoadedEventEnd / 1000;
}
}
finishLoadTime
function finishLoadTime() {
// If the browser supports the Navigation Timing 2 and HR Time APIs, use
// them, otherwise fall back to the Navigation Timing 1 API.
if (window.PerformanceNavigationTiming && performance.timeOrigin) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return (ntEntry.loadEventEnd + performance.timeOrigin) / 1000;
} else {
return performance.timing.loadEventEnd / 1000;
}
}
firstPaintTime
function firstPaintTime() {
if (window.PerformancePaintTiming) {
const fpEntry = performance.getEntriesByType('paint')[0];
return (fpEntry.startTime + performance.timeOrigin) / 1000;
}
}
firstPaintAfterLoadTime
function firstPaintTimeAfterLoad() {
// This was never actually implemented and always returns 0.
return 0;
}
navigationType
function navigationType() {
if (window.PerformanceNavigationTiming) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return ntEntry.type;
}
}
wasFetchedViaSpdy
function wasFetchedViaSpdy() {
// SPDY is deprecated in favor of HTTP/2, but this implementation returns
// true for HTTP/2 or HTTP2+QUIC/39 as well.
if (window.PerformanceNavigationTiming) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return ['h2', 'hq'].includes(ntEntry.nextHopProtocol);
}
}
wasNpnNegotiated
function wasNpnNegotiated() {
// NPN is deprecated in favor of ALPN, but this implementation returns true
// for HTTP/2 or HTTP2+QUIC/39 requests negotiated via ALPN.
if (window.PerformanceNavigationTiming) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return ['h2', 'hq'].includes(ntEntry.nextHopProtocol);
}
}
npnNegotiatedProtocol
function npnNegotiatedProtocol() {
// NPN is deprecated in favor of ALPN, but this implementation returns the
// HTTP/2 or HTTP2+QUIC/39 requests negotiated via ALPN.
if (window.PerformanceNavigationTiming) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return ['h2', 'hq'].includes(ntEntry.nextHopProtocol) ?
ntEntry.nextHopProtocol : 'unknown';
}
}
wasAlternateProtocolAvailable
function wasAlternateProtocolAvailable() {
// The Alternate-Protocol header is deprecated in favor of Alt-Svc
// (https://www.mnot.net/blog/2016/03/09/alt-svc), so technically this
// should always return false.
return false;
}
connectionInfo
function connectionInfo() {
if (window.PerformanceNavigationTiming) {
const ntEntry = performance.getEntriesByType('navigation')[0];
return ntEntry.nextHopProtocol;
}
}
삭제 계획
chrome.loadTimes()
API는 Chrome 64에서 지원 중단되며
2018년 말에 삭제되었습니다. 개발자는 최대한 빨리 코드를 이전해야 합니다.
데이터 손실을 방지하는 데 도움이 됩니다