如何提高大字符串JavaScript工具提示的性能？

问题描述：

我正在为网页提供一个工具提示式应用程序，并且希望每次用户移动一个单词时都会触发一个Javascript事件。如何提高大字符串JavaScript工具提示的性能？

目前，我通过在每个单词周围放置一个标签来工作。 word1 word2 word3，然后处理每个鼠标悬停/跳出事件。

这工作正常，但有时输入文本是数千个单词，所有这些标签似乎减慢浏览器（至少减缓IE，至少）。我使用事件委托，因此不会附加数千个事件处理程序，并且一旦渲染就足够快。问题是，当我通过innerHTML设置单个标记的单词时，首先可能需要8秒以上的时间，并冻结浏览器。为了澄清我的意思 - 用户输入一个文本字符串，它通过ajax发送到服务器，HTML标签添加到服务器端。在ajax成功回调中，我设置了新的HTML通过直接设置元素的innerHTML。延迟是所有的innerHTML设置，而不是服务器端。）

是否有反正可以更改为只是word1 word2 word3仍然有效？有没有什么方法可以知道用户在没有将每个标签放在每个标签周围的情况下使用哪个特定字词？

答

在遇到this page后，事实证明这是可能的，至少在某种程度上是可能的。下面的解决方案仅适用于IE，但这是我所需要的，因为其他浏览器对于单个标签解决方案来说足够快。

<script> 
function getWordFromEvent (evt) 
{ 
    if (document.body && document.body.createTextRange) 
    { 
     var range = document.body.createTextRange(); 
     range.moveToPoint(evt.clientX, evt.clientY); 
     range.expand('word'); 
     document.getElementById("wordMouseIsOver").innerHTML = range.text; 
    } 
} 
</script> 
<span onMouseMove="getWordFromEvent(event)">word1 word2 word3</span> 
<BR> 
<span id="wordMouseIsOver"> </span>

你应该编辑你的问题，而不是回复。 – Anax 2011-04-03 19:10:23

答

看看这个链接（点7）：http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip7。

您将基本上将所有跨度包含在一个span/div中，然后插入该单个DOM元素。

对不起的利益，我应该提到我已经这样做。 – mikel 2011-04-03 12:44:37

答

使用Document Fragment's，然后再将长HTML插入到文档中。

读John Resig's（该jQuery库的创建人）lengthy article使用文档片段

感谢您的链接，AFAIK无论如何，这种技术现在被纳入到jQuery html（）方法中。 – mikel 2011-04-24 08:35:32

如何提高大字符串JavaScript工具提示的性能？

相关推荐