सबसे अच्छी परफ़ॉर्मेंस पाएं

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

जितना हो सके उतना टालें

जब तक संसाधनों की ज़रूरत न हो, तब तक उन्हें लोड न करें. सिर्फ़ वही जानकारी शामिल करें जो एक्सटेंशन को, उसके स्टार्टअप फ़ंक्शन में लागू करती है. स्टार्टअप के दौरान उन चीज़ों को लोड न करें जिनकी ज़रूरत सिर्फ़ तब होती है, जब उपयोगकर्ता किसी बटन पर क्लिक करता है, या ऐसी सुविधाएं जो सिर्फ़ तब काम करती हैं, जब उपयोगकर्ता ने का मौका नहीं दिया गया है.

ज़रूरी इवेंट मैनेज करना

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

बैकग्राउंड स्क्रिप्ट को मेनिफ़ेस्ट में रजिस्टर किया जाना चाहिए और उनका परसिस्टेंस गलत पर सेट होना चाहिए, अगर किया जा सकता है.

{
  "name": "High Performance Extension",
  "description" : "Sleepy Background Script",
  "version": "1.0",
  ...
  "background": {
   "scripts": ["background.js"],
   "persistent": false
  },
  ...
}

किसी बैकग्राउंड स्क्रिप्ट को लगातार चालू रखने का मौका सिर्फ़ तब होता है, जब एक्सटेंशन नेटवर्क अनुरोधों को ब्लॉक करने या उनमें बदलाव करने के लिए, chrome.webRequest एपीआई. webRequest एपीआई काम नहीं करता है जिसमें लगातार बैकग्राउंड पेज भी नहीं होते.

{
  "name": "High Performance Extension",
  "description" : "Persistent Background Script",
  "version": "1.0",
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "https://<distracting social media site>.com/*"
  ],
 ...
}

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {redirectUrl: "/"};
  },
  {urls: ["https://social.media.distraction.com/*"]},
  ["blocking"]
);

कॉन्टेंट स्क्रिप्ट शामिल हों

कॉन्टेंट स्क्रिप्ट को किसी एक्सटेंशन के सीक्रेट एजेंट के तौर पर काम करना चाहिए, ताकि वह बड़े लॉजिक के साथ काम करने के लिए, एक्सटेंशन कोर पर भरोसा करते हुए वेबपेज में बदलाव करना. उनके पास ताकि काम के पेजों पर अचानक होने वाली गतिविधि को रोका जा सके. आम तौर पर, कॉन्टेंट स्क्रिप्ट को जान-बूझकर किए गए व्यवहार के अलावा, ब्राउज़िंग अनुभव पर किसी का ध्यान नहीं रखा गया है.

टारगेट की जानकारी देना

ग़ैर-ज़रूरी जगहों या गलत समय पर कॉन्टेंट स्क्रिप्ट चलाने वाले एक्सटेंशन की वजह से, को धीमा करने और संभावित रूप से काम की क्षमता संबंधी गड़बड़ियों को पैदा करने के लिए किया जा सकता है. इससे बचने के लिए, मिलते-जुलते वीडियो की जानकारी दें पैटर्न हैं और स्क्रिप्ट को document_start के बजाय document_idle पर चला रहे हैं.

{
  "name": "High Performance Extension",
  "description" : "Superfly Superlight Content Scripts",
  "version": "1.0",
  ...
  "content_scripts": [
    {
      "js": ["content_script.js"],
      "matches": ["/*"],
      "run_at": "document_idle"
    }
  ]
  ...
}

अगर किसी एक्सटेंशन को सिर्फ़ उपयोगकर्ता की कार्रवाई वाले वेबपेज को ऐक्सेस करने की ज़रूरत है, तो उसे इंजेक्ट करने दें प्रोग्रामेटिक रूप से करता है. प्रोग्रामैटिक इंजेक्शन सिर्फ़ तब चलेगा, जब कोई उपयोगकर्ता उसे शुरू करेगा.

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    code: 'document.body.style.fontSize="100px"'
  });
});

ज़रूरत होने पर ही कॉन्टेंट स्क्रिप्ट का इस्तेमाल करें

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

अगर उपयोगकर्ता को HTML5 वाली साइट पर जाने के दौरान, किसी एक्सटेंशन को पेज कार्रवाई दिखाने की ज़रूरत पड़ती है <video> एलिमेंट शामिल है, तो यह एलान वाले नियम के बारे में बता सकता है.

chrome.runtime.onInstalled.addListener(function() {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            css: ["video"],
          })
        ],
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

कोड की परफ़ॉर्मेंस का आकलन करना

वेबसाइट परफ़ॉर्मेंस के लिए यही सामान्य तरीके एक्सटेंशन पर लागू किए जा सकते हैं, जैसे लागू करना और कोड को कम से कम और छोटा रखने की तकनीक के साथ काम करता है.

एक्सटेंशन की परफ़ॉर्मेंस का आकलन करने और उन इलाकों को टारगेट करने के लिए Lighthouse जैसे टूल का इस्तेमाल करें विज़ुअल एक्सटेंशन पेजों पर बेहतर हो सकता है.