ज़्यादा रिसॉर्स इस्तेमाल करने वाली JavaScript की पहचान करना

ज़्यादा डेटा इस्तेमाल करने वाली JavaScript, पेज लोड होने की परफ़ॉर्मेंस और इंटरैक्टिविटी, दोनों पर बुरा असर डाल सकती है. आधुनिक वेब ऐप्लिकेशन, पहले की तुलना में अब कई सोर्स से JavaScript पर ज़्यादा निर्भर हैं. इनमें ऐप्लिकेशन कोड (और फ़्रेमवर्क कोड जिस पर यह निर्भर करता है) के साथ-साथ तीसरे पक्ष की स्क्रिप्ट भी शामिल हैं. ये स्क्रिप्ट, चैट विजेट और वीडियो प्लेयर जैसी सुविधाएं जोड़ती हैं. बैकग्राउंड में चलने वाले आंकड़े और मार्केटिंग स्क्रिप्ट भी आम तौर पर योगदान देते हैं. इन्हें भूलना बहुत आसान है.

जवाब न देने वाले वेब पेज की असल वजहों का पता लगाना मुश्किल हो सकता है. इसके लिए, वेब की परफ़ॉर्मेंस को ट्रेस करने या प्रोफ़ाइल बनाने और नतीजों को समझने के लिए, कुछ खास विशेषज्ञता की ज़रूरत होती है. इसके अलावा, फ़ील्ड डेटा अक्सर लैब डेटा से काफ़ी अलग होता है. लैब डेटा, असल उपयोगकर्ता के अनुभवों के सिर्फ़ एक छोटे सबसेट को दोहराता है. इस वजह से, खराब परफ़ॉर्मेंस की असल वजहों का पता लगाना मुश्किल हो सकता है. खास तौर पर, इंटरैक्शन के लिए.

Long Animation Frames API एक लाइटवेट एपीआई है. इसका इस्तेमाल, फ़ील्ड में ज़्यादा रिसॉर्स इस्तेमाल करने वाली JavaScript की पहचान करने के लिए किया जा सकता है. ज़्यादा समय लेने वाली स्क्रिप्ट, लंबे समय तक चलने वाली एक स्क्रिप्ट हो सकती है. इसके अलावा, यह ऐसी स्क्रिप्ट भी हो सकती है जो पेज के लाइफ़साइकल के दौरान कई बार चलती है.

इन्हें कैसे लागू करें

लंबे ऐनिमेशन फ़्रेम को PerformanceObserver इंटरफ़ेस का इस्तेमाल करके मॉनिटर किया जाता है. जब किसी ऐनिमेशन फ़्रेम को रेंडर होने में 50 मि॰से॰ से ज़्यादा समय लगता है, तो यह long-animation-frame एंट्री दिखाता है. एंट्री में लंबे ऐनिमेशन फ़्रेम के बारे में जानकारी होती है. इसमें फ़्रेम की अवधि और फ़्रेम के दौरान लागू की गई स्क्रिप्ट शामिल होती हैं.

long-animation-frame एंट्री में scripts प्रॉपर्टी शामिल है. यह PerformanceScript ऑब्जेक्ट का कलेक्शन है. हर PerformanceScript ऑब्जेक्ट में, लंबे ऐनिमेशन फ़्रेम के दौरान लागू की गई स्क्रिप्ट की जानकारी होती है. इसमें स्क्रिप्ट का sourceURL और duration शामिल होता है.

लंबे ऐनिमेशन फ़्रेम में योगदान देने वाली सबसे लंबी स्क्रिप्ट की पहचान करने का उदाहरण

// Accumulate all script entries across the page lifecycle so no
// data is lost between observer callbacks.
const allScripts = [];

const observer = new PerformanceObserver(list => {
  // Collect all script entries across frames to find the biggest offenders.
  allScripts.push(...list.getEntries().flatMap(entry => entry.scripts));

  // Group by sourceURL so you can identify which scripts contribute
  // the most total time, even if each individual invocation is short.
  const scriptSource = [...new Set(allScripts.map(script => script.sourceURL))];
  const scriptsBySource = scriptSource.map(sourceURL => ([sourceURL,
      allScripts.filter(script => script.sourceURL === sourceURL)
  ]));
  const processedScripts = scriptsBySource.map(([sourceURL, scripts]) => ({
    sourceURL,
    count: scripts.length,
    totalDuration: scripts.reduce((subtotal, script) => subtotal + script.duration, 0)
  }));

  // Only include scripts above a certain threshold to reduce noise.
  const heavyScripts = processedScripts.filter(script => {
    return script.totalDuration > 100;
  });

  // Sort by total duration so the worst offenders appear first,
  // making it easier to prioritize optimization efforts.
  heavyScripts.sort((a, b) => b.totalDuration - a.totalDuration);

  // Log to the console for local debugging. In production, replace
  // this with a call to send the data to your analytics service.
  console.table(heavyScripts);
});

// Use buffered: true to capture any long frames that occurred before
// this observer was registered.
observer.observe({type: 'long-animation-frame', buffered: true});

सबसे सही तरीके

• DO: JS सेल्फ़-प्रोफ़ाइलिंग एपीआई जैसे विकल्पों के बजाय, Long Animation Frames API को प्राथमिकता दें. JS सेल्फ़-प्रोफ़ाइलिंग एपीआई में रनटाइम ओवरहेड ज़्यादा होता है.
• Long Animation Frames API में बहुत ज़्यादा जानकारी होती है. इसलिए, मुख्य जानकारी को कम शब्दों में लिखें.
• प्रॉडक्शन में मौजूद किसी Analytics सेवा को ज़रूरी जानकारी भेजें.

ब्राउज़र से जुड़ी सहायता और फ़ॉलबैक रणनीतियां

Long Animation Frames API को ऐसे ब्राउज़र अनदेखा कर देते हैं जो इसके साथ काम नहीं करते. इसलिए, इसे फ़ॉलबैक के बिना सुरक्षित तरीके से इस्तेमाल किया जा सकता है. ज़्यादातर मामलों में, परफ़ॉर्मेंस को बेहतर बनाने के लिए जो अवसर यह पहचानता है वे अन्य ब्राउज़र पर भी लागू होंगे.