Замена определенных слов ссылками на определения с использованием Javascript

Question

Я пытаюсь создать систему глоссария, которая получит список общих слов и их определений через ajax, а затем заменит любое вхождение этого слова в определенных элементах (классах useGlossary) ссылкой на полную определение и дать краткое определение при наведении мыши. То, как я это делаю , работает , но для больших страниц это занимает 30-40 секунд, в течение которых страница зависает. Я хотел бы либо сократить время, необходимое для выполнения замены, либо сделать так, чтобы замена выполнялась в фоновом режиме, не вешая страницу.

Я использую jquery для большей части javascript и Qtip для наведения мыши. Вот мой существующий медленный код:

$(document).ready(function () {
    $.get("fetchGlossary.cfm", null, glossCallback, "json");
});

function glossCallback(data)
{

    $(".useGlossary").each(function() {
        var $this = $(this);
        for (var i in data)
        {

            $this.html($this.html().replace(new RegExp("\\b" + data[i].term + "\\b", "gi"), function(m) {return makeLink(m, data[i].def);}));
        }
        $this.find("a.glossary").qtip({ style: { name: 'blue', tip: true } })
    });
}

function makeLink(m, def)
{
    return "<a class='glossary glossary" + m.replace(/\s/gi, "").toUpperCase() + "' href='reference/glossary.cfm' title='" + def + "'>" + m + "</a>";
}

Спасибо за любые отзывы / предложения!

Answer 1

Вместо того, чтобы заменять HTML снова и снова, почему бы не изменить свою функцию следующим образом:

function glossCallback(data) 
{ 

    $(".useGlossary").each(function() { 
        var $this = $(this); 
        var html = $this.html();
        for (var i in data) 
        { 

            html.replace(new RegExp("\\b" + data[i].term + "\\b", "gi"), function(m) {return makeLink(m, data[i].def);}); 
        }
        $this.html(html);
        $this.find("a.glossary").qtip({ style: { name: 'blue', tip: true } }) 
    }); 
}

Таким образом, DOM не будет обновляться при каждой замене.