Сценарий содержимого расширения Chrome замедляет загрузку страницы на некоторых веб-сайтах (возможно, из-за наблюдателей мутаций) - PullRequest
0 голосов
/ 15 июня 2019

Итак, я сделал расширение для Chrome, чтобы размыть и убрать (когда парил) некоторые ненормативную лексику, которые я храню в файле json.Скрипт отлично работает практически на всех сайтах, которые я тестировал, но замедляет загрузку страниц для некоторых сайтов, таких как Facebook и Twitter (очень плохая производительность)

Я пытался использовать некоторые моменты из этого хорошо описанного ответа, но ни один из них, похоже, неработа для меня: Производительность MutationObserver для обнаружения узлов во всем DOM

let profanityWords='';

var URL= chrome.extension.getURL('../../common/profanity_list_en.json');
var request = new XMLHttpRequest();
request.open('GET', URL , false);  // `false` makes the request synchronous
request.send(null);
if (request.status === 200) {
var msgs = JSON.parse(request.responseText);
//console.log(msgs.list);
profanityWords=msgs.list;
}
console.log(profanityWords);

function newww(){
for(var i = 0, len = profanityWords.length; i < len; i++){
let searchTerm=profanityWords[i];

matchText(document.body, new RegExp("\\b" + searchTerm + "\\b", "i"),   function(node, match, offset) {
    var span = document.createElement("span");
   // span.parentNode.id="bblur";

    span.id = "SSS-blur";
    span.textContent = match;
    span.style.filter="blur(5px)";
    span.addEventListener("mouseover", mouseOver, false);
    span.addEventListener("mouseout", mouseOut, false);
    return span;

        });

    }
}

var targetNode=document.body;
var config = {childList:true,subtree: true};
var callback = function(mutationsList, observer) {
    newww();
}

var observer = new MutationObserver(callback);
observer.observe(targetNode, config);


var matchText = function(node, regex, callback, excludeElements) { 

    excludeElements || (excludeElements = ['script', 'style', 'iframe', 'canvas']);
    var child = node.firstChild;

while (child) {
    switch (child.nodeType) {
    case 1:
        if (excludeElements.indexOf(child.tagName.toLowerCase()) > -1)
            break;
          if (child.id !== 'SSS-blur') {
         matchText(child, regex, callback, excludeElements);
          }

        break;
    case 3:
        var bk = 0;
        child.data.replace(regex, function(all) {
            var args = [].slice.call(arguments),
                offset = args[args.length - 2],
                newTextNode = child.splitText(offset+bk), tag;
            bk -= child.data.length + all.length;

                newTextNode.data = newTextNode.data.substr(all.length);
                tag = callback.apply(window, [child].concat(args));
                child.parentNode.insertBefore(tag, newTextNode);
                child = newTextNode;
            });
            regex.lastIndex = 0;
            break;
        }

        child = child.nextSibling;
    }

    return node;
};




function mouseOver()
{  
    this.style.filter="blur(0px)";
}

function mouseOut()
{  
    this.style.filter="blur(5px)";
}

Буду признателен за ваши предложения о том, как сделать этот скрипт оптимизированным и быстрым любым способом, не влияя на его покрытиена ДОМ.Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...