如何加快Bootstrap工具提示的速度

Question

我有一个每60秒动态重新加载一次的表。这使数据保持最新。 我正在使用此处的脚本 - http://www.michaelfretz.com/2010/04/21/using-ajax-to-load-data-from-php-into-your-website/

在包含大约15条记录的页面上，Twitter Bootstrap工具提示工作正常，速度快，看起来很棒。

在另一页上，我有超过400条记录。每条记录都有一个悬停工具提示，显示数据库中有关该记录的信息。该信息已经输出到标题标签，但是当它悬停时它需要超过一秒才会出现，这使整个页面看起来很迟钝。

我认为造成这种情况的原因是由于使用了'Rel'标签和实时的Twitter javascript（持续更新），因此减慢了速度。但我不确定。

有没有办法解决这个问题.....或者我最好尝试创建一个分页表，每次单击Next时都会加载下一页？

Answer 1

400个记录是期望有人在60秒内遍历的记录。如果没有真正看到任何实际的HTML，建议有点难，但这里有三个：

• 请改用title属性 - 请参阅about the Title attribute。这意味着您使用内置的浏览器代码而不是工具提示的Bootstrap渲染。
• 显示每行的主题/内容片段，而不仅仅是主题，即将内容的初始部分放在实际主题之后的可用空间中。如今大多数人都拥有大型显示器，并且通过响应式设计，您可以在主题后显示大量内容。
• 正如你所说，使用分页。 Bootstrap提供了一个，但它需要你进行接线。

Answer 2

400条记录！太多了！

这与浏览器和系统的性能密切相关。用live()显示400条记录有点疯狂。浏览器肯定会崩溃。相反，你可以做一件事。使用pagination并仅显示一个小子集。此外，用户会发现很难导航和搜索。

另一种方法是使用datatables。在table中加载完整内容，不要担心任何事情。数据表将负责其余部分。分页和搜索是这方面的好功能。

数据表的屏幕截图：

Screenshot of Datatables http://www.webresourcesdepot.com/wp-content/uploads/image/datatables.gif

如果您看到这一点，搜索，排序，提供工具提示的所有内容都在客户端完成，只需最少的数据集。因此，浏览器上的有效负载将更少，用户可以看到他们只需要的部分。