Оптимизация JavaScript (innerhtml, вставка элементов в текстовые узлы)

Так что я делаю аддон Firefox, чтобы выделить слова и рег. выражения и у меня возникли проблемы с его оптимизацией. Это была первая попытка:

function highlight (searchText, replacement) {
    var walker = document.createTreeWalker(document.body);
    while(walker.nextNode()){
        if(walker.currentNode.nodeType === 3 && searchText.test(walker.currentNode.nodeValue)){
            var html = walker.currentNode.data.replace(searchText, replacement);
            var wrap = document.createElement('div');
            var frag = document.createDocumentFragment();
            wrap.innerHTML = html;
            while (wrap.firstChild) {
                frag.appendChild(wrap.firstChild);
            }
            walker.currentNode.parentNode.replaceChild(frag,walker.currentNode);            
        }
    }
}

Но walker.currentNode.parentNode.replaceChild(frag,walker.currentNode); линия заменяет текущий узел, поэтому while(walker.nextNode()) перестал работать.

Я решил это так, но я искал более чистое решение:

function highlight (searchText, replacement) {
    var walker = document.createTreeWalker(document.body);
    var nextnode=true;
    while(nextnode){
        if(walker.currentNode.nodeType === 3 && searchText.test(walker.currentNode.nodeValue)){
            //1~2 ms
            var html = walker.currentNode.data.replace(searchText, replacement);
            //~11-12 ms           
            var wrap = document.createElement('div');
            var frag = document.createDocumentFragment();
            //~11-12 ms
            wrap.innerHTML = html;
            //~36-37 ms          
            while (wrap.firstChild) {                
                frag.appendChild(wrap.firstChild);    
            }
            //73~74 ms
            var nodeToReplace=walker.currentNode;
            nextnode=walker.nextNode();
            nodeToReplace.parentNode.replaceChild(frag,nodeToReplace);
            //83~85 ms            
        }else{
            nextnode=walker.nextNode();
        }
    }
}

Также я пытаюсь улучшить производительность, поэтому я сделал несколько тестов для поиска более медленных частей кода (я тестировал с использованием lorem ipsum объемом 1,64 Мб), поэтому вот мои вопросы:

  1. Есть ли более быстрая альтернатива для wrap.innerHTML = html; что добавляет 25 мс к коду?

  2. Я уверен, что это не может быть оптимизировано while (wrap.firstChild) {frag.appendChild(wrap.firstChild);} но это добавляет 37 мс, поэтому предложения приветствуются.

Не стесняйтесь использовать этот код. Фрагмент кода является рабочим примером кода и показывает, как его использовать. Отредактированный для отображения последних изменений, вам может потребоваться изменить исключения, чтобы они были менее строгими.

var regexp = /lorem|amet/gi;
highlight (regexp,'<span style="Background-color:#33FF33">$&</span>');

function highlight (searchText, replacement) {
    var excludes = 'html,head,style,title,link,script,noscript,object,iframe,canvas,applet';
    var wrap = document.createElement('div');
    var frag = document.createDocumentFragment();
    
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
    var nextnode=true;
    while(nextnode){
        if(searchText.test(walker.currentNode.nodeValue)
           && (excludes + ',').indexOf(walker.currentNode.parentNode.nodeName.toLowerCase() + ',') === -1
          ){
            var html = walker.currentNode.data.replace(searchText, replacement);
            wrap.innerHTML = html;
            while (wrap.firstChild) {                
                frag.appendChild(wrap.firstChild);    
            }
            var nodeToReplace=walker.currentNode;
            nextnode=walker.nextNode();
            nodeToReplace.parentNode.replaceChild(frag,nodeToReplace);            
        }else{
            nextnode=walker.nextNode();
        }
    }
}
<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
  placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
  tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer lorem adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
    elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>

<h3>Header Level 3</h3>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer lorem adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

0 ответов

Другие вопросы по тегам