Javascript工具提示性能

我有一个条目列表，对于每个条目，我必须用javascript创建一个工具提示，考虑到性能，您认为做什么更好

1） 为弹出窗口创建一个div，为包含弹出窗口内容的每个条目创建另一个隐藏div，每次创建工具提示时，将相应div的内容复制到弹出窗口的div中并显示它

2） 为每个条目创建一个div，当它必须显示工具提示时，执行Ajax调用以检索弹出窗口的内容并将其放入div（如果以前没有这样做）并显示工具提示

编辑：

---

工具提示应该显示一个复杂的HTML，客户端可以是移动的，也可以是计算机。列表很小，因为它是分页的

我实际上会用所有加载的工具提示值创建一个javasrcript数组或对象，然后在显示时替换工具提示DIV中的文本。创建一堆div对性能没有帮助。

不要重新发明轮子，使用诸如或之类的jQuery插件。

选择很大程度上取决于工具提示中存储了多少元素和多少内容

如果您认为人们倾向于多次打开工具提示，那么ajax调用是昂贵的，但是如果它们可能包含图像、视频、facebook喜欢的内容、大量文本和/或其他昂贵的资源，那么使用某种缓存策略可能是一个好主意，这样每个工具提示只需要一次ajax调用（例如，在现代浏览器上使用

localstorage

）

---

如果工具提示中包含的段落不超过两段，则会增加ajax调用、服务器端安全问题和额外javascript的应用程序复杂性。只需静态插入这些段落就很难回答此问题。您有多少个列表项？如果数量少，则1.如果数量多（100+），可能是2。这归结为加载页面时下载的HTML页面的大小，以及下载该内容所需的时间。您需要查看何时感觉到请求花费的时间太长。您的客户端通过什么连接？移动用户会比其他人更容易感受到更大的传输。您的服务器有多慢？用户是否会感到不适点击一个或多个？如果他们点击每一个，#1会变得更有利（可能）。如果工具提示中的内容不需要任何HTML/CSS格式，请使用div上的HTML title属性你想要的工具提示是目前为止最快的方式。我最近不得不在里面用google maps编写工具提示代码，所以很自然地想到了这一点。工具提示应该显示一个“复杂”的HTML（它不是丰富的图像，但至少是一个简单的文本），客户端也可以是移动的，列表很小，因为在移动设备上分页，即使请求也可能很昂贵（您不知道离线/在线状态和速度连接）。Dojo从外观上看有一个工具提示：