我必须突出显示 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));
}
最佳答案
首先,您应该阅读有关回流的内容:
When does reflow happen in a DOM environment?
我在这个函数中看到了大量的 DOM 操作。多次调用 offset
、css
、width
和 height
。如果您想提高性能,请尝试将所有这些组合到一个调用中。
其次,这一行确实很引人注目:
copy.find('*').css('color','transparent');
这可能包含相当数量的元素。您要求 javascript 找到每一个,并在用户每次按下按键时应用透明颜色。当然有更好的方法吗?更不用说透明度可能相当消耗 CPU 资源。
最后,为什么每次打字都需要调用这个函数呢?真的有必要吗?您想实现什么目标?
关于javascript - JS 脚本非常慢 : what am I doing wrong or how can I speed up?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19252078/