javascript - chrome 扩展 - 使用内容脚本减少加载时间的最佳方法

Question

我正在构建一个 chrome 扩展，它应该查看超过 12,000 个值的数组并将其与网页 p 标记进行比较，如果数组中的值在 p 标签应该突出显示文本，悬停时应该显示一些信息。因此，我认为使用内容脚本很简单，但使用 "run_at": "document_end" 使网页加载速度慢了 3 倍，我的扩展程序加载时间多了将近 10 秒。显然不理想。

顺便说一句，这是我的内容脚本代码:

jQuery(document).ready(function($) {

var $all_p = $("p");

$.each(arrayObj, function(key, value) {
      $all_p.highlight(key, {caseSensitive: true, className: 'highlight-882312', wordsOnly:true });
});

$('.highlight-882312').each(function() {    

    var currentKey = $(this).text();
    console.log(currentKey);

        //Create tooltip on hover.
        Tipped.create(this, "<iframe id='cardiFrame' src='https://mywebsite.com/word?q="+footballers[currentKey]+"'></iframe>", {
            skin: "white",
            hook: 'rightmiddle',
            maxWidth: 306,
            maxHeight: 365,
            background: '#eee',
        }); 

});
});

无论如何，这对我来说太慢了，但我仍然想构建扩展，所以我想我可以将所有 p 标签的数组发送到我的背景/弹出窗口，以便在background/popup 它将循环查找关键字，然后在弹出窗口中显示匹配的关键字，并将消息发送回关键字匹配的内容脚本，以便突出显示它们。这会减少加载时间吗？这是解决我的问题的好方法吗，因为额外的 10 秒加载时间根本不理想？

如果有任何建议，我将不胜感激。

编辑:arrayObj:

var arrayObj = {

"word1": 'word_word1',
"word2": 'word_word2',
"word3": 'word_word3',

// extra 12K lines...
}

list .json:

我的 list 很典型，但内容脚本信息是:

 "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "css": ["styles.css", "tipped.css"],
      "js": ["jquery.min.js", "jquery-highlight1.js", "spinners.min.js", "tipped.js", "word.js", "script.js"],
      "run_at": "document_end"
    }
  ],

Answer 1

更新 http://jsfiddle.net/r4bnxemL/3/

这种新方法不那么复杂，它不会将每个单词合并到一个大的正则表达式中。相反，它只是使用使用 setTimeout 技巧的异步循环方法。

var words = ['dolor', 'sit', 'odio'];

var ele = document.getElementById('text'),
    html = ele.innerHTML;


asycnIterator(words,
    function (word) {
        var reg = new RegExp('\\b' + word + '\\b', 'ig');
        html = html.replace(reg, '<span class="marked">' + word + '</span>');
    }, function () {
        ele.innerHTML = html;
});

function asycnIterator(arr, func, cb) {
    var i = 0;

    nextCall();

    function nextCall() {
        func(arr[i++]);
        if (i >= arr.length) {
            if (cb) cb();
            return;
        }
        setTimeout(nextCall, 1);
    }
}

首先，您可以做两件事，首先将循环分成小块，这可能会使整个过程在更多时间内完成，但不会阻塞其他所有内容，Javascript 单线程，因此请使用事件循环。

例如，您可以使用 setTimeout 来完成。 (注意需要使用回调模式，因为它会立即返回，下一行的执行不会等待循环完成)

var arr = [1,2,3....100000];
var i = 0 ;
nonBlockingAsycnLoop(); //will prints all values in console without blocking

function nonBlockingAsycnLoop() {
   console.log(arr[i++]);
   setTimeout(nonBlockingAsycnLoop,0);
}

您可以做的第二件事是加快查找速度。就此而言，您使用的 native 方法越多，它就会越好。这只是我的方法

1. 将所有数组元素连接成一个字符串
2. 然后使用它们作为正则表达式进行搜索
3. 存储索引

下面的这个函数会执行此操作并使用所有出现的列表调用 cb。

function returnOccurences(str, arr, cb) {
    var ele = null,
        index = 0,
        occurences = [],
        regexp = '\\b' + arr.join('\\b|\\b') + '\\b';

    getNextWord();
    function getNextWord() {
        ele = str.substr(index).match(new RegExp( regexp , 'i'));
        if (!ele) {
            cb(occurences);
            return;
        }
        occurences.push({i: ele.index, len: ele[0].length, word: ele[0]});
        index = ele[0].length + ele.index;
        setTimeout(getNextWord,0); //makes it non blocking
    }
}

字符串匹配函数文档 MDN LINK如果不使用正则表达式的参数 g 调用它，它会返回具有不可枚举属性的数组，这些属性是找到的单词的索引和包含原始文本的输入。

第一次匹配后，我们可以使用索引进一步解析前面的字符串。