परफ़ॉर्मेंस की सटीक निगरानी के लिए, यह तय करना ज़रूरी है कि कोई पेज शुरुआत में बैकग्राउंड में लोड हुआ था या नहीं. जैसे, नए बैकग्राउंड टैब में खोला गया था. बैकग्राउंड में लोड होने वाले पेजों को रेंडर होने में अक्सर ज़्यादा समय लगता है. साथ ही, उनकी मेट्रिक का समय भी ज़्यादा होता है. जैसे, साइट का पहला एलिमेंट लोड होने में लगने वाला समय. इन पेजों की पहचान करने से, आपको परफ़ॉर्मेंस के आंकड़ों से इन्हें फ़िल्टर करने में मदद मिलती है, ताकि डेटा में गड़बड़ी न हो.
इसे मापने का सबसे सटीक तरीका, VisibilityStateEntry एपीआई का इस्तेमाल करना है. यह ब्राउज़र की परफ़ॉर्मेंस टाइमलाइन पर, विज़िबिलिटी में होने वाले बदलावों को भरोसेमंद तरीके से रिकॉर्ड करता है. इससे कोई फ़र्क़ नहीं पड़ता कि आपकी स्क्रिप्ट असल में कब लागू होती है.
शुरुआती विज़िबिलिटी और बैकग्राउंड में बिताए गए समय का पता लगाना
ज़रूरी: सटीक विज़िबिलिटी हिस्ट्री ऐक्सेस करने के लिए, performance.getEntriesByType('visibility-state') का इस्तेमाल करें. एक्ज़ीक्यूशन के समय, सिर्फ़ document.visibilityState की जांच करने पर भरोसा न करें, क्योंकि इसमें रेस कंडिशन की संभावना होती है.
/**
* Accurately determines visibility state history using the Performance API.
*/
function getVisibilityInfo() {
// Retrieve VisibilityStateEntry members:
const entries = performance.getEntriesByType('visibility-state');
if (entries.length > 0) {
const firstEntry = entries[0];
// If the first performance entry for visibility is 'hidden',
// the page was loaded in the background.
const initiallyBackgrounded = firstEntry.name === 'hidden';
// Find the precise, high-resolution timestamp of when the page
// was first backgrounded.
let timeBackgrounded = null;
for (const entry of entries) {
if (entry.name === 'hidden') {
// entry.startTime is used because it provides the exact browser
// timestamp of the visibility change, which is required for precision
timeBackgrounded = entry.startTime;
break;
}
}
return {
initiallyBackgrounded,
timeBackgrounded
};
}
}
फ़ॉलबैक रणनीतियां
जिन एनवायरमेंट के लिए यह सुविधा उपलब्ध नहीं है उनके लिए, document.visibilityState प्रॉपर्टी की जांच की जा सकती है या visibilitychange इवेंट को सुना जा सकता है.
ज़रूरी जानकारी: आपको यह समझना होगा कि फ़ॉलबैक का यह तरीका, अक्सर बैकग्राउंड की शुरुआती स्थिति का पता लगाने के लिए काफ़ी गलत होता है. स्क्रिप्ट, एसिंक्रोनस तरीके से लोड और एक्ज़ीक्यूट हो सकती हैं. इसलिए, हो सकता है कि आपकी स्क्रिप्ट के डाउनलोड और एक्ज़ीक्यूट होने से पहले, कोई पेज बैकग्राउंड टैब में खोला जाए और फिर उपयोगकर्ता उसे फ़ोरग्राउंड में ले आए. जब आपकी स्क्रिप्ट आखिर में चलती है, तो document.visibilityState को सिंक्रोनस तरीके से 'visible' के तौर पर पढ़ा जाएगा. साथ ही, आपको गलत तरीके से लगेगा कि पेज फ़ोरग्राउंड में लोड हुआ था. इस वजह से, आपको पेज की शुरुआती छिपी हुई स्थिति के बारे में पता नहीं चलेगा. इसके अलावा, फ़ॉलबैक टाइमस्टैंप में परफ़ॉर्मेंस एपीआई की अंदरूनी सटीक जानकारी नहीं होती. अगर सटीक जानकारी देना आपकी प्राथमिकता है, तो फ़ॉलबैक का इस्तेमाल न करें.
/**
* Fallback implementation using document.visibilityState.
* This approach is prone to race conditions if the script loads asynchronously.
*/
function getFallbackVisibilityInfo() {
// Check the state exactly when this script executes.
// This will fail to detect an initial background state if the user
// foregrounded the page before this script executed.
let initiallyBackgrounded = document.visibilityState === 'hidden';
// If it's hidden now, we approximate that it was hidden from load (time 0).
let timeBackgrounded = initiallyBackgrounded ? 0 : null;
// Listen for future visibility changes to capture if it is backgrounded later.
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden' && timeBackgrounded === null) {
// performance.now() is used here as a fallback, but it only gives
// us the time the event listener fired, not the precise internal
// browser time the visibility actually changed.
timeBackgrounded = performance.now();
}
});
return {
get initiallyBackgrounded() { return initiallyBackgrounded; },
get timeBackgrounded() { return timeBackgrounded; }
};
}
// Modern implementation using VisibilityStateEntry API.
function getVisibilityInfo() {
// Code omitted here would be the same modern
// implementation shown earlier in this guide
// ...
}
// DO: Detect if the VisibilityStateEntry API is available
if ('VisibilityStateEntry' in window) {
// DO: If VisibilityStateEntry is available, use it first:
getVisibilityInfo();
} else {
// DO: If VisibilityStateEntry is unavailable, fall back to `document.visibilityState`:
getFallbackVisibilityInfo();
}