1

我必须在不修改其 html 的情况下突出显示 div[contenteditable=true] 中的一些单词，因此我复制 div 并将副本放置在原件后面，然后在我需要突出显示的单词周围应用一些跨度。

原始 div 可能随时修改其类/属性，因此我想使用任何 css 更改来更新副本，为此我有这个函数，每次调用我的突出显示函数时都会调用它。

我的问题是这个函数需要很长时间才能执行，大约 60 毫秒，而我的脚本的其余部分大约需要 1-4 毫秒。

我在这里做错了什么或如何加快速度？

function positionOutputWindow(original,copy)
{
    //console.log("positionOutputWindow");
    //var start = new Date().getTime();
    if ( 
        !original ||
        !copy ||
        original.attr('id') == undefined || 
        copy.attr('id') == undefined
        ) { return; }

    var original_obj = original.get(0);
    var copy_obj = copy.get(0);
    var offset = original.offset();

    copy.offset(offset);
    copy.css({
        'position': 'absolute',
        'z-index': '2',
        'color': 'transparent',
        'flood-color': 'transparent',
        '-webkit-text-fill-color': 'transparent',
        //'overflow': 'hidden',
        'outline': 'solid 0px red'/*,
        'width': original.width() + 'px',
        'height': original.height() + 'px'*/
    });
    copy.css("background",original.css("background"));
    original.css({
        //'overflow': 'hidden',
        'background': 'transparent',
        'position': 'relative',
        'z-index': '3',
        'outline': 'solid 0px green'
    });
    copy.width(original.width());
    copy.height(original.height());

    if ( original.get(0).nodeName == "INPUT" || original.get(0).nodeName == "TEXTAREA" )
    { 
        copy.width(original_obj.scrollWidth); 
        copy.offset({ top: offset.top, left: offset.left - original_obj.scrollLeft });
    }

    copy.offset({ top: offset.top, left: offset.left });
    copy.find('*').css('color','transparent');
    //console.log("runtime position window " + (new Date().getTime() - start));
}
4

1 回答 1

1

首先，您应该阅读回流：

回流在 DOM 环境中何时发生？

我在这个函数中看到了大量的 DOM 操作。多次调用offset, css,width和height. 如果您想提高性能，请尝试将所有这些组合到一个调用中。

其次，这条线真的很突出：

copy.find('*').css('color','transparent');

这可能包含相当数量的元素。您要求 javascript 找到每一个并在用户每次按下键时应用透明颜色。肯定有更好的方法吗？更不用说透明度可能会占用大量 CPU。

最后，为什么每次打字都需要调用这个函数呢？真的有必要吗？你想达到什么目的？

于 2013-10-08T15:46:09.757 回答