Плагин markjs - тормозит страницу

Question

Для выделения определенных слов на странице я использую плагин markjs.io

var words = [...очень много слов...];
words.forEach(function(item, i) {
    hiLight(item.word, item.class_name);
});

function hiLight(word, class_name) {
    let context = document.querySelector("body");
    let instance = new Mark(context);

    instance.mark(word, {
        accuracy: {
            'value': 'exactly',
            'limiters': ['!', '.']
        },
        separateWordSearch: false,
        'element': 'span',
        'className': 'highlight '+class_name,
        'debug': false
    });
}

И когда приходит большой массив со словами - то заметно что страница зависает пока markjs не выделит все найденные на странице слова.

Можно ли как-то организовать его работу чтобы он не тормозил страницу?

Answer 1

Один из вариантов оптимизации вынести создание instance и context из forEach, т.к. инстанс один на все слова. И еще, если слов больше 600 библиотека падает из-за переполнения стека.

const words = [...очень много слов...];
const context = document.querySelector("body");
const instance = new Mark(context);

words.forEach((item) => {
    hiLight(item.word, item.class_name);
});

function hiLight(word, class_name) {
    instance.mark(word, {
        accuracy: {
            'value': 'exactly',
            'limiters': ['!', '.']
        },
        separateWordSearch: false,
        'element': 'span',
        'className': 'highlight '+class_name,
        'debug': false
    });
}

БЛОГ НА HUSL

Плагин markjs - тормозит страницу

Ответы (1 шт):