Тяжелый расчет скрипта контента приводит к низкой производительности (расширение Chrome)

Question

У меня есть простое расширение для Chrome, и я пытаюсь провести некоторый анализ страницы через content.js.это код:

console.log("content.js running.."); //debug

    var fromDOM = new XMLSerializer().serializeToString(document);
    console.log(fromDOM)
    var i = 0;
    var item;

    for (item in fromDOM) {
        var x = fromDOM[item];
        if (x == "/"){
            i++;
            console.log(i);
            chrome.runtime.sendMessage({lala: i});
        }

    }

Этот код ищет любое вхождение символа "/" на странице и отправляет сообщение фоновому скрипту (который в данный момент ничего не делает).

Это дляОдин цикл приводит к тому, что загружаемая вкладка загружается медленнее, чем обычно ... что влияет на производительность пользователя.

Что я здесь не так делаю?Я не могу выполнять тяжелую работу со скриптами content.js?или есть лучший способ, который я скучаю.

Answer 1

Если вы хотите обработать текущий HTML-код страницы:

1. Использование document.documentElement.innerHTML
2. Используйте строковые методы, такие как indexOf, чтобы получить позицию каждого /, не перечисляя длинную строку HTML символ за символом.
3. Соберите все позиции в массиве и отправьте его в одном сообщении, поскольку отправка сообщения является дорогостоящей операцией, которая включает в себя внутренний JSON.stringify + JSON.parse.
4. Не используйте console.log, когда devtools открыт, так как он выполняет много дополнительной обработки для форматирования сообщений. И обычно предпочитают отладку в интерактивном режиме - в devtools есть панель для проверки и установки точек останова в скриптах содержимого, чтобы вы могли отлаживать код, просматривать переменные и т. Д.

const html = document.documentElement.innerHTML;
const slashes = [];

let pos = -1;
do {
  pos = html.indexOf('/', pos + 1);
  if (pos >= 0) {
    slashes.push(pos);
  }
} while (pos >= 0);

chrome.runtime.sendMessage({lala: slashes});

Теперь ваш фоновый слушатель получит массив позиций символов - на самом деле он не очень полезен, но это всего лишь пример. Вы можете поместить больше информации в массив, чтобы сделать его более значимым.