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

Question

我正在为一个网页开发一个工具提示式应用程序,并希望每次用户移动一个单词时都会触发一个Javascript事件.

目前我通过<span>单独在每个单词周围放置一个标签来工作,例如<span id="word1">word1</span> <span id="word2">word2</span> <span id="word3">word3</span>然后处理每个单词 的鼠标悬停/输出事件.

这样工作正常,但有时输入文本是数千个单词,所有这些标签似乎都会减慢浏览器的速度(至少慢下来IE).我使用事件委托,因此没有附加数千个事件处理程序,并且一旦渲染就足够快.问题是当我通过innerHTML设置它时,首先渲染单独标记的单词可以花费8秒多的时间,冻结浏览器.

(编辑:只是为了澄清我的意思 - 用户输入一串文本,它通过ajax发送到服务器,HTML标签添加到服务器端.在ajax成功回调中,我通过设置元素设置新的HTML innerHTML直接.延迟全部在innerHTML设置上,而不是服务器端.)

反正有没有可以改为公正<span id="line1">word1 word2 word3</span>和仍然有效？有没有办法知道用户拖过哪个特定单词而不在每个单独的标记周围？

Answer 1

浏览此页面后发现这是可能的，至少在某种程度上是这样。下面的解决方案仅适用于 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>