I marcatori e le misure di tempo utente sono due funzionalità relative alle prestazioni disponibili nella maggior parte dei browser moderni. Possono essere utilizzati per raccogliere dati su come la tua pagina web o app viene utilizzata dagli utenti, il che può aiutarti a ottimizzare le prestazioni del tuo sito web.
I marcatori di temporizzazione utente vengono utilizzati per contrassegnare punti specifici nel codice, che possono poi essere misurati tramite il parametro "Temporizzazione utente". Questo può aiutare a identificare i punti in cui si verificano colli di bottiglia nel codice. Ad esempio, è possibile utilizzare un marcatore di temporizzazione utente per contrassegnare l'inizio di un JavaScript e quindi utilizzare una misura di temporizzazione utente per vedere quanto tempo è stato necessario per il caricamento di quel file.
Le misure di temporizzazione utente misurano il tempo tra due indicatori di temporizzazione utente. Questo può aiutare a misurare le prestazioni di specifiche parti di codice. Ad esempio, è possibile utilizzare una misura di temporizzazione utente per vedere quanto tempo ha impiegato una particolare AJAX per essere completata.
Per saperne di più sui tempi e sulle misure degli utenti, visita il sito web del W3C.
Cosa sono i tempi di marcatura dell'utente?
Questi due indicatori, indicatori e misure di temporizzazione utente, sono metriche di performance che possono essere utilizzate per identificare problemi e ottimizzare le applicazioni web. Gli indicatori di temporizzazione utente possono misurare il tempo tra due eventi o il tempo necessario per completare un evento. Le misure di temporizzazione utente possono misurare la durata dell'evento o il numero di eventi che si verificano in un determinato periodo.
Come aggiungere i contrassegni di tempo utente?
Aggiungere indicatori e misure di temporizzazione degli utenti è un ottimo modo per ottenere informazioni sulle prestazioni delle tue pagine web. Il temporizzazione degli utenti ti consente di monitorare la durata di determinati eventi sulle tue pagine, ad esempio quando un utente clicca su un pulsante o un link.
Per aggiungere indicatori di tempo e misure personalizzati, devi prima creare un nuovo file JavaScript. Quindi, dovrai includere il seguente codice nel file:
var startTime = Date.now();
funzione faiQualcosa() {
var endTime = Date.now();
var timeTaken = endTime – startTime;
console.log('Ci sono voluti ' + timeTaken + 'ms per l'esecuzione della funzione doSomething.');
}
Il codice sopra ti permetterà di monitorare il tempo impiegato dalla funzione "do Something" per essere eseguita. Puoi usare questa tecnica anche per monitorare altri eventi sulla tua pagina. Per farlo, sostituisci il nome della funzione nel codice sopra con il nome dell'evento che desideri monitorare.
Suggerimenti per segnare il tempo nel codice
1. Quando vuoi misurare il tempo impiegato da un'azione nel tuo codice, puoi usare il performance.now() . Questo ti fornirà un timestamp preciso al millesimo di millisecondo.
2. Se non hai bisogno di una precisione così elevata, puoi anche usare il metodo Date.now().
3. Se si desidera misurare il tempo impiegato per un'azione in unità specifiche (ad esempio secondi, minuti, ecc.), è possibile utilizzare i metodi performance.mark() e performance.measure().
4. Infine, se vuoi conoscere nel dettaglio cosa sta succedendo nel tuo codice e quanto tempo ha impiegato ciascuna parte per essere eseguita, puoi usare i metodi mark() e measure() dell'API User Timing.
Conclusione
L'API User Timing è un ottimo modo per ottenere informazioni su come gli utenti interagiscono con le applicazioni web. Utilizzando indicatori e misure, è possibile monitorare eventi specifici e informazioni temporali per individuare eventuali colli di bottiglia o problemi. Inoltre, l'API User Timing può essere utilizzata per raccogliere dati sulle prestazioni utili a migliorare l'esperienza utente complessiva.
