הגעה לשיא הביצועים

תוספים הם תוספת לדפדפן, שנועדה לספק תוספים משלימים החדשה. תוסף שמאט או פוגע בחוויית הגלישה הוא בעייתי משתמש נגד יעד התוסף ל-Chrome. בנוסף להרגלי תכנות טובים כלליים, מפתחים צריכים לפעול בהתאם לשיטות האלה כדי להבטיח שהתוספים שלהם מניבים ביצועים מיטביים.

דחייה של כל מה שאפשר

צריך להימנע מטעינת משאבים עד שהם נחוצים. צריך לכלול רק את מה שנדרש כדי לפתוח בפונקציית ההפעלה שלו. אל תטען במהלך ההפעלה פריטים שדרושים רק אם משתמש לוחץ על לחצן או תכונות שפועלות רק כשהוא מחובר, לפני הזדמנות לעשות זאת.

ניהול אירועים חשובים

סקריפט רקע יעיל מכיל אירועים רשומים שחשובים להם לתוסף. הם נמצאים רדומים עד שהמאזין מופעל, פועלים בהתאם ואז חוזרים למצב רדום . המשאבים של המערכת גוזלים את הזמן הנדרש כדי להריץ סקריפט שלא נחוץ.

יש לרשום סקריפטים רקע במניפסט, ולהקפיד שהם יהיו מוגדרים כ-False אם ככל האפשר.

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

האירוע היחיד שבו סקריפט הרקע פועל באופן עקבי הוא אם התוסף משתמש API של chrome.webRequest כדי לחסום או לשנות בקשות רשת. ממשק ה-API של 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_idle במקום ב-document_start.

{
  "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"'
  });
});

יש להשתמש בסקריפטים של תוכן רק כאשר יש צורך

לתוספים רבים ייתכן שלא יהיה צורך בסקריפט תוכן בכלל כדי להשיג את הפונקציונליות הרצויה. באמצעות API של 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, כדי להעריך את הביצועים של התוספים ולטרגט תחומים יכולים להשתפר בדפים של תוספים חזותיים.