Tiện ích là một phần bổ sung cho trình duyệt, được thiết kế để cung cấp chức năng bổ sung và tuỳ chỉnh. Tiện ích làm chậm hoặc làm suy giảm trải nghiệm duyệt web là một vấn đề đối với người dùng và đi ngược lại mục tiêu của tiện ích của Chrome. Ngoài những thói quen lập trình chung tốt, 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 thứ có thể
Không tải tài nguyên cho đến khi cần. Chỉ bao gồm những gì cần thiết để mở một tiện ích trong hàm khởi động của tiện ích đó. Không tải những thứ trong quá trình khởi động mà chỉ cần thiết nếu người dùng nhấp vào một nút, hoặc những tính năng chỉ hoạt động khi người dùng đăng nhập trước khi họ có cơ hội làm như vậy.
Quản lý sự kiện quan trọng
Một tập lệnh nền hiệu quả chứa các sự kiện đã đăng ký quan trọng đối với tiện ích của tập lệnh đó. Chúng ở trạng thái không hoạt động cho đến khi được kích hoạt bởi một trình nghe, sau đó hoạt động cho phù hợp rồi quay lại trạng thái không hoạt động. Việc duy trì một tập lệnh không cần thiết đang chạy sẽ làm tiêu hao tài nguyên hệ thống.
Nếu có thể, bạn nên đăng ký tập lệnh nền trong tệp kê khai và đặt trạng thái duy trì của tập lệnh thành false.
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
Trường hợp duy nhất để giữ cho tập lệnh nền luôn hoạt động là nếu tiện ích sử dụng chrome.webRequest API để chặn hoặc sửa đổi các yêu cầu mạng. API webRequest không tương thích với các trang nền không liên tục.
{
"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ư những đặc vụ bí mật của một tiện ích, đọc hoặc sửa đổi trang web một cách tinh tế trong khi dựa vào lõi tiện ích để xử lý logic nặng hơn. Họ nên có mục tiêu rõ ràng để tránh hoạt động xâm nhập trên các trang không liên quan. Lý tưởng nhất là các tập lệnh nội dung sẽ 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
Tiện ích chạy tập lệnh nội dung ở những vị trí không cần thiết hoặc vào thời điểm không phù hợp có thể khiến trình duyệt hoạt động chậm và có khả năng gây ra lỗi chức năng. Tránh trường hợp này bằng cách cung cấp match
patterns 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 một trang web khi người dùng thực hiện hành động, hãy chèn tiện ích đó theo phương thức lập trình. Hoạt động chèn có lập trình sẽ chỉ chạy khi người dùng gọi hoạt động đó.
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 thiết
Nhiều tiện ích có thể không cần tập lệnh nội dung để hoàn thành chức năng mong muốn. Việc sử dụng API declarativeContent sẽ đặt ra các quy tắc để tiện ích nhận biết khi các điều kiện liên quan được đáp ứng. Cách này hiệu quả hơn so với tập lệnh nội dung và sử dụng ít mã hơn!
Nếu cần một tiện ích để hiển thị một thao tác trên trang cho khách truy cập khi họ truy cập vào một trang web có phần tử <video> HTML5, thì tiện ích đó có thể chỉ định một 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 suất của mã
Bạn có thể áp dụng các phương pháp chung tương tự về hiệu suất trang web cho các tiện ích, chẳng hạn như triển khai các kỹ thuật lập trình không đồng bộ và giữ cho mã 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 một tiện ích và nhắm đến những khu vực có thể cải thiện trên các trang tiện ích hiển thị.