javascript - JS 脚本非常慢 : what am I doing wrong or how can I speed up?

Question

我必须突出显示 div[contenteditable=true] 中的一些单词，而不修改其 html，因此我复制该 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));
}

Answer 1

首先，您应该阅读有关回流的内容:

When does reflow happen in a DOM environment?

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

其次，这一行确实很引人注目:

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

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

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