Question

所以我正在制作一个firefox插件来突出显示单词和reg。表达式，我有一些麻烦优化它。这是第一次尝试：

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

此外，我还尝试提高性能，因此我已经进行了一些测试，以寻找代码中较慢的部分（我已经使用1.64 mb lorem ipsum进行了测试）所以这是我的问题：

为代码添加25毫秒的wrap.innerHTML = html;是否有更快的替代方案？
我非常确定无法对此进行优化while (wrap.firstChild) {frag.appendChild(wrap.firstChild);}，但会增加37毫秒，因此欢迎提出建议。

随意使用此代码，代码段是代码的一个工作示例，并显示了如何使用它。编辑显示最新更改，您可能需要编辑排除限制较少。

＆＃13;

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

＆＃13;

<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>

＆＃13;

优化javascript（innerhtml，将元素插入到textnodes）

0 个答案: