jQuery选项卡和Firefox性能问题

Question

考虑在页面上有几千个常规输入按钮（带有jQuery.button（）UI）和输入文本。

在Firefox上，如果我点击一个按钮，点击事件即刻触发。

但是，如果我把所有这些对象放入一个jQuery选项卡，需要一些时间来打开选择菜单或触发点击按钮。

在Chrome浏览器中，无论有没有标签，一切都会立即触发。

请在Firefox上检查此链接http://jsbin.com/awubo3/5/edit，然后删除标签上的评论，然后重试。当选项卡启用时，按钮会稍微晚一些。

在我的页面上更糟，有时需要3-4秒才能触发点击或打开选择菜单。

可以解决这个问题吗？

Answer 1

该页面肯定有一些性能问题。由于您正在进行大量工作，您将亲眼目睹JavaScript引擎实现之间的性能差异。除了尝试找到更有效的方法来做你想做的事情之外，你可以做的不多。

例如，您可以保持您的代码架构相同，但减少页面上的元素数量。实施某种分页解决方案，让用户获得所有记录，但限制查看的数量，以便表现可以接受。

如果您必须同时显示所有这些信息，请考虑实施您正在使用的jQuery UI元素的轻量级版本。实现“标签”系统可以非常轻量（here is an example，这是在很少的代码行中完成的）。如果纯粹出于风格原因使用UI按钮，请参阅单独使用CSS可以实现多少。

Answer 2

jQuery，所有它的优点，需要很长的时间来做事情。考虑$（＃元素）与getElementByID。后者是建立在JavaScript，如果你有很多，运行纯JavaScript更快。但jQuery选择器经历了一堆jQuery函数调用。另外，通过我发现，jQuery也克隆了很多。假设你在一个点击处理程序中给它一个匿名函数.jQuery不只是附加事件并且完成它。相反，它使用该函数，通过一堆isString，isObject，isArray，最后是isFunction。一旦发现它是一个函数，它将它分开并在私有内部函数中重建整个事物，然后它可以将它附加到事件中。