如何在JavaScript中优化长数组

Question

I have a javascript code that pretty much searches on a forum post if there is a certain text (a yugioh card, specifically) and replaces it with a special code. It gets the list of cards to search for from a variable that is an array, defined at the beginning of the script.

Obviously this brings problems, as there are over 7000 yugioh cards, and I have to have an italian version and an english version.

The way the searching works is it has a for loop, and it executes a regexp search one card at a time. That means that it loops 7000 times, and Firefox doesn't respond for a few seconds. It also significantly lowers loading times.

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>'
            });
        }
    }
}

As you can see there are only two cards in the array, but normally there are 7000+. I would like to know how I can make this thing run better. I have an external SQL database with all the cards in it, so I thought maybe there is a way of making a chain: Javascript contacts a php page, which in turn gets the db and returns the array of cards. I dont know how I could really do this efficiently, so help is appreciated!

Answer 1

Array Chunking

    //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);
}

This is the reference site link( http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/ ) where this js method is available.

Also refer this link http://snipplr.com/view/46331/process-large-array/ for timed array processing

Answer 2

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