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

How to improve performance of javascript tooltips for large strings?

本文关键字：JavaScript 性能 工具提示 字符串 何提高 大型      更新时间：2023-09-26

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

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

这工作正常，但有时输入文本是数千个单词，所有这些标签似乎都会减慢浏览器的速度（至少会减慢 IE）。我使用事件委托，因此没有附加数千个事件处理程序，并且一旦呈现就足够快。问题是当我通过 innerHTML 设置单独标记的单词时，首先可能需要 8+ 秒来呈现单独标记的单词，在此过程中冻结浏览器。

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

有没有可以更改为<span id="line1">word1 word2 word3</span>并且仍然有效？有没有办法知道用户将鼠标悬停在哪个特定单词上，而无需在每个单词周围放置单独的标签？

在看到这个页面之后，事实证明这是可能的，至少在某种程度上是可能的。下面的解决方案仅适用于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>
在将

长 HTML 注入文档之前使用文档片段。

阅读 John Resig（jQuery 库的创建者）关于使用文档片段的好处的长篇文章

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

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

相关文章：