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密集型。

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

非常慢的JS脚本：我做错了什么或者我怎样才能加快速度？

1 个答案: