เข้าถึงประสิทธิภาพสูงสุด

ส่วนขยายเป็นส่วนเสริมของเบราว์เซอร์ ซึ่งออกแบบมาให้เป็นส่วนเสริมและปรับแต่ง ส่วนขยายที่ทำให้ประสบการณ์การท่องเว็บช้าลงหรือแย่ลงเป็นปัญหาที่ ผู้ใช้และโต้แย้งวัตถุประสงค์ของส่วนขยาย Chrome นอกจากนิสัยที่ดีในการเขียนโค้ดแล้ว นักพัฒนาซอฟต์แวร์ควรปฏิบัติตามแนวทางปฏิบัติเหล่านี้เพื่อให้มั่นใจว่าส่วนขยายจะทำงานได้อย่างมีประสิทธิภาพสูงสุด

เลื่อนทุกสิ่งที่เป็นไปได้

อย่าโหลดทรัพยากรจนกว่าจะจำเป็น ระบุเฉพาะข้อมูลที่จำเป็นในการเปิด ในฟังก์ชันการเริ่มต้น อย่าโหลดสิ่งต่างๆ ในช่วงเริ่มต้นโปรแกรมซึ่งจำเป็นต้องใช้เฉพาะในกรณีต่อไปนี้ ผู้ใช้คลิกปุ่ม หรือคุณลักษณะที่จะทำงานเฉพาะเมื่อผู้ใช้ลงชื่อเข้าใช้ก่อนที่จะมี ในการทำเช่นนั้น

จัดการกิจกรรมสำคัญ

สคริปต์พื้นหลังที่มีประสิทธิภาพจะมีเหตุการณ์ที่บันทึกไว้ซึ่งมีความสำคัญต่อ ส่วนขยาย ผู้ป่วยจะนอนไม่หลับจนกว่าผู้ฟังจะถูกเรียกให้แสดง ดำเนินการให้สอดคล้องกัน แล้วก็กลับไปไม่มีความเคลื่อนไหว เป็นการลดการใช้ทรัพยากรของระบบเพื่อให้สคริปต์ที่ไม่จำเป็นทำงานอยู่

สคริปต์พื้นหลังควรลงทะเบียนในไฟล์ Manifest โดยตั้งการถาวรเป็น false หาก เท่าที่จะเป็นไปได้

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

โอกาสเดียวที่จะทำให้สคริปต์พื้นหลังทำงานตลอดเวลาคือเมื่อส่วนขยายใช้ chrome.webRequest API เพื่อบล็อกหรือแก้ไขคำขอของเครือข่าย WebRequest API ใช้ร่วมกันไม่ได้ ที่มีหน้าเว็บพื้นหลังที่ไม่ถาวร

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

มีสคริปต์เนื้อหา

สคริปต์เนื้อหาควรทำหน้าที่เป็นตัวแทนลับของส่วนขยาย อ่านหรือ การแก้ไขหน้าเว็บโดยที่ใช้แกนของส่วนขยายในการทำงานหนักขึ้น ควรมี เป้าหมายที่ชัดเจนเพื่อหลีกเลี่ยงการบุกรุกหน้าเว็บที่ไม่เกี่ยวข้อง ตามหลักการ สคริปต์เนื้อหาควร ไม่ได้สังเกตเห็นในการท่องเว็บ นอกเหนือไปจากพฤติกรรมที่มีจุดประสงค์

ประกาศเป้าหมาย

ส่วนขยายที่ใช้งานสคริปต์เนื้อหาในตำแหน่งที่ไม่จำเป็น หรือในช่วงเวลาที่ไม่เหมาะสมอาจทำให้ เบราว์เซอร์ทำงานช้าลงและอาจทำให้เกิดข้อผิดพลาดด้านฟังก์ชันการทำงาน หลีกเลี่ยงปัญหานี้โดยการระบุ Match รูปแบบ ในไฟล์ Manifest และเรียกใช้สคริปต์ที่ 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"'
  });
});

ใช้สคริปต์เนื้อหาเมื่อจำเป็นเท่านั้น

ส่วนขยายจำนวนมากอาจไม่จำเป็นต้องใช้สคริปต์เนื้อหาเลยเพื่อให้ทำงานตามที่ต้องการ การใช้ declarativeContent API จะตั้งกฎสำหรับส่วนขยายให้จดจำเมื่อมีเงื่อนไขที่เกี่ยวข้อง ตรงกันหรือไม่ วิธีนี้มีประสิทธิภาพมากกว่าสคริปต์เนื้อหาและใช้โค้ดน้อยกว่า

หากส่วนขยายจำเป็นต้องแสดงการทำงานของหน้าเว็บต่อผู้ใช้เมื่อผู้ใช้เข้าชมเว็บไซต์ด้วย 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 เพื่อประเมินประสิทธิภาพส่วนขยายและพื้นที่เป้าหมายที่ ปรับปรุงหน้าส่วนขยายภาพให้ดีขึ้นได้