chrome.loadTimes()
est une API non standard qui fournit aux développeurs des métriques de chargement et des informations sur le réseau afin de les aider à mieux comprendre les performances de leur site en situation réelle.
Depuis la mise en œuvre de cette API en 2009, toutes les informations utiles qu'elle génère sont disponibles dans les API standardisées, telles que:
- Navigation Timing 2
- Paint Timing
- Ajout de
nextHopProtocol
à Navigation Timing 2 et Resource Timing 2.
Ces API standardisées sont implémentées par plusieurs fournisseurs de navigateurs. Par conséquent, chrome.loadTimes()
sera abandonné dans Chrome 64.
L'API obsolète
La fonction chrome.loadTimes()
renvoie un seul objet contenant toutes ses informations de chargement et de réseau. Par exemple, l'objet suivant est le résultat de l'appel de chrome.loadTimes()
sur www.google.com:
{
"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"
}
Remplacements standardisés
Vous pouvez désormais trouver chacune des valeurs ci-dessus à l'aide d'API standardisées. Le tableau suivant fait correspondre chaque valeur à son API standardisée, et les sections ci-dessous montrent des exemples de code qui montrent comment obtenir chaque valeur dans l'ancienne API avec des équivalents modernes.
chrome.loadTimes() caractéristique
| Remplacement standardisé de l'API |
---|---|
requestTime |
Navigation Timing 2 |
startLoadTime |
Navigation Timing 2 |
commitLoadTime |
Navigation Timing 2 |
finishDocumentLoadTime |
Navigation Timing 2 |
finishLoadTime |
Navigation Timing 2 |
firstPaintTime |
Paint Timing |
firstPaintAfterLoadTime |
N/A |
navigationType |
Navigation Timing 2 |
wasFetchedViaSpdy |
Navigation Timing 2 |
wasNpnNegotiated |
Navigation Timing 2 |
npnNegotiatedProtocol |
Navigation Timing 2 |
wasAlternateProtocolAvailable |
N/A |
connectionInfo |
Navigation Timing 2 |
Les exemples de code ci-dessous renvoient des valeurs équivalentes à celles renvoyées par chrome.loadTimes()
. Toutefois, pour le nouveau code, ces exemples de code ne sont pas recommandés. En effet, chrome.loadTimes()
donne les valeurs de l'heure de l'epoch en secondes, tandis que les nouvelles API de performances signalent généralement des valeurs en millisecondes par rapport à l'origine temporelle d'une page, ce qui est plus utile pour l'analyse des performances.
Plusieurs exemples privilégient également les API Performance Timeline 2 (par exemple, performance.getEntriesByType()
), mais fournissent des solutions de secours pour l'ancienne API Navigation Timing 1, car elle est plus compatible avec les navigateurs. À l'avenir, il sera préférable d'utiliser les API Performance Timeline et leurs rapports seront généralement plus précis.
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;
}
}
Plan de suppression
L'API chrome.loadTimes()
sera obsolète dans Chrome 64 et devrait être supprimée fin 2018. Les développeurs doivent migrer leur code dès que possible pour éviter toute perte de données.
Intention d'abandon | Outil de suivi de l'état Chrome | Bug Chromium