Question

我正在为网页制作工具提示式应用程序，并希望每次用户移动单词时都会触发Javascript事件。

目前我通过在每个单词周围添加标记来实现它，例如： word1 word2 word3然后处理每个的鼠标悬停/输出事件。

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

（编辑：为了澄清我的意思 - 用户输入一串文字，它被ajax发送到服务器，HTML标签被添加到服务器端。在ajax成功回调中，我通过直接设置元素的innerHTML来设置新的HTML。延迟全部在innerHTML设置上，而不是服务器端。）

无论如何可以改为仅仅word1 word2 word3并且仍然有效吗？有没有办法知道用户拖过哪个特定单词而不在每个单独的标记周围？

Answer 1

在遇到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>

Answer 2

在将长HTML注入文档之前使用Document Fragment's。

有关使用文档片段的好处，请阅读John Resig's（jQuery库的创建者）lengthy article

Answer 3

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

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

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

3 个答案: