Đạt hiệu suất cao nhất

Tiện ích mở rộng là tính năng bổ sung cho trình duyệt, được thiết kế để cung cấp các tiện ích bổ sung và được tuỳ chỉnh của Google. Tiện ích làm chậm hoặc ảnh hưởng đến trải nghiệm duyệt web sẽ gây ra vấn đề cho người dùng và bộ đếm đối với mục tiêu tiện ích của Chrome. Ngoài thói quen lập trình tốt nói chung, nhà phát triển nên làm theo các phương pháp này để đảm bảo tiện ích của họ đang chạy ở hiệu suất cao nhất.

Trì hoãn mọi việc có thể

Hạn chế tải tài nguyên cho đến khi cần đến. Chỉ bao gồm những thông tin cần thiết để mở trong hàm khởi động của nó. Không tải những thứ chỉ cần thiết trong quá trình khởi động nếu người dùng nhấp vào một nút hoặc các tính năng chỉ hoạt động khi người dùng đăng nhập trước khi họ cơ hội để làm điều đó.

Quản lý sự kiện quan trọng

Tập lệnh nền hiệu quả chứa các sự kiện đã đăng ký và đóng vai trò quan trọng đối với tiện ích. Chúng không hoạt động cho đến khi trình nghe được kích hoạt, hành động phù hợp, sau đó quay trở lại trạng thái không hoạt động trạng thái. Việc này làm tiêu hao tài nguyên hệ thống để giữ cho tập lệnh không cần thiết tiếp tục chạy.

Tập lệnh nền phải được đăng ký trong tệp kê khai với khả năng lưu trữ được đặt là false nếu nhất có thể.

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

Trường hợp duy nhất để tập lệnh nền luôn hoạt động liên tục là khi tiện ích sử dụng API chrome.webRequest để chặn hoặc sửa đổi các yêu cầu mạng. API webRequest không tương thích có các trang nền lâu dài.

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

Chứa tập lệnh nội dung

Tập lệnh nội dung phải hoạt động như một bí mật của tiện ích, có thể đọc một cách tinh tế từ hoặc sửa đổi trang web trong khi dựa vào lõi tiện ích để hoạt động logic nặng hơn. Cần có các mục tiêu rõ ràng để tránh hoạt động xâm phạm trên các trang không liên quan. Tốt nhất là tập lệnh nội dung nên không được chú ý trong trải nghiệm duyệt web ngoài hành vi có chủ đích.

Khai báo mục tiêu

Việc một tiện ích chạy tập lệnh nội dung tại những vị trí không cần thiết hoặc vào những thời điểm không thích hợp có thể khiến khiến trình duyệt chậm lại và có thể gây ra lỗi chức năng. Tránh điều này bằng cách cung cấp kiểu khớp mẫu trong tệp kê khai và chạy tập lệnh tại document_idle thay vì 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"
    }
  ]
  ...
}

Nếu tiện ích chỉ cần truy cập vào trang web có thao tác của người dùng, hãy chèn tiện ích theo phương thức lập trình. Tính năng chèn có lập trình sẽ chỉ chạy khi người dùng gọi.

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

Chỉ sử dụng tập lệnh nội dung khi cần

Nhiều tiện ích có thể không cần tập lệnh nội dung để thực hiện chức năng mong muốn. Sử dụng declarativeContent API sẽ đặt các quy tắc để tiện ích nhận ra khi có các điều kiện liên quan được đáp ứng. Cách này hiệu quả hơn tập lệnh nội dung và sử dụng ít mã hơn!

Nếu tiện ích cần hiển thị một hành động trên trang cho người dùng khi họ truy cập vào một trang web có HTML5 Phần tử <video>, phần tử này có thể chỉ định quy tắc khai báo.

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() ]
      }
    ]);
  });
});

Đánh giá hiệu quả của mã

Bạn có thể áp dụng các phương pháp chung cho hiệu suất trang web cho các phần mở rộng như triển khai các kỹ thuật lập trình không đồng bộ và giữ cho mã ở mức tối thiểu và nhỏ gọn.

Sử dụng các công cụ như Lighthouse, để đánh giá hiệu suất của tiện ích và những khu vực mục tiêu có thể cải thiện trên các trang tiện ích trực quan.