Question

我有一个javascript代码，如果有某个文本（特别是yugioh卡），几乎在论坛帖子上搜索，并用特殊代码替换它。它从一个变量中获取要搜索的卡列表，该变量是在脚本开头定义的数组。

显然这带来了问题，因为有超过7000张yugioh卡，我必须有意大利版和英文版。

搜索的工作方式是它有一个for循环，并且它一次执行一张正则表达式搜索。这意味着它循环7000次，Firefox几秒钟没有响应。它还显着降低了加载时间。

var card_names = [{
        "en": "Primitive Butterfly",
        "ita": "Primitive Butterfly"
    }, {
        "en": "Essha the Frost Vassal",
        "ita": "Essha the Frost Vassal"
    }];
var list = document.getElementsByClassName('post_body');
for (indexa = 0; indexa < card_names.length; ++indexa) {
    var card_name_ita = card_names[indexa].ita;
    var card_name_en = card_names[indexa].en;
    var card_name_ita_regexp = new RegExp(card_name_ita, "gi");
    var card_name_en_regexp = new RegExp(card_name_en, "gi");
    var replaced_first = 0;
    var replaced_second = 0;
    var replaced_third = 0;
    var replaced_forth = 0;
    for (indexb = 0; indexb < list.length; ++indexb) {
        element = list[indexb];
        if (card_name_en !== card_name_ita) {
            element.innerHTML = element.innerHTML.replace(/’/g, "'").replace(card_name_en_regexp, function(token) {
                return '<span style="cursor: help; color: red; text-decoration: underline" class="script-info-carta" title="' + encodeURIComponent(card_name_en) + '">' + card_name_en.replace(/ /gi, ' ') + '</span>'
            });
            element.innerHTML = element.innerHTML.replace(card_name_ita_regexp, function(token) {
                return '<span style="cursor: help; color: red; text-decoration: underline" class="script-info-carta" title="' + encodeURIComponent(card_name_en) + '">' + card_name_ita.replace(/ /gi, ' ') + '</span>'
            });
        }
        if (card_name_en === card_name_ita) {
            element.innerHTML = element.innerHTML.replace(/’/g, "'").replace(card_name_en_regexp, function(token) {
                return '<span style="cursor: help; color: red; text-decoration: underline" class="script-info-carta" title="' + encodeURIComponent(card_name_en) + '">' + card_name_en.replace(/ /gi, ' ') + '</span>'
            });
        }
    }
}

正如您所看到的，阵列中只有两张牌，但通常有7000张以上。我想知道如何让这件事变得更好。我有一个带有所有卡片的外部SQL数据库，所以我想也许有一种方法可以建立一个链：Javascript联系一个php页面，然后获取db并返回卡片组。我不知道我怎么能真正有效地做到这一点，所以非常感谢帮助！

Answer 1

数组分块

    //Copyright 2009 Nicholas C. Zakas. All rights reserved.
    //MIT Licensed
function timedChunk(items, process, context, callback){
    var todo = items.concat();   //create a clone of the original

    setTimeout(function(){

        var start = +new Date();

        do {
             process.call(context, todo.shift());
        } while (todo.length > 0 && (+new Date() - start < 50));

        if (todo.length > 0){
            setTimeout(arguments.callee, 25);
        } else {
            callback(items);
        }
    }, 25);
}

这是此js方法可用的参考站点链接（http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/）。

另请参阅此链接http://snipplr.com/view/46331/process-large-array/以获取定时数组处理

Answer 2

问题是每次在循环中创建正则表达式（这是非常昂贵的），并且在每次迭代中更改dom树，这是昂贵的操作。

如何在javascript中优化长数组

2 个答案:

数组分块