4

我已经使用 JQuery 和许多运行良好的拖放元素开发了一个网站。

然而，在 IE9 上，当大量拖放元素被动态加载（使用 .load()）并显示时，浏览器总是消耗少量 CPU（~10%）（用于刷新？），即使什么都没有由用户长时间不触摸鼠标或滚动页面完成。

我没有任何计时器，Chrome 和 Safari 上的行为还可以。

这是上下文以及我在测试后发现的内容：

语境

在我的主网页中，我使用load() 函数将用户视图加载到 div 中。加载的视图包含几个带有可拖动元素的容器。这些容器是可放置的，并且在每次放置事件后使用 load() 函数进行刷新。

  1. <br>如果我首先在我的网页中插入 50 个标签，则在我的页面中不滚动就不会显示图形元素：我的 CPU 利用率 = 0%
  2. 当我滚动以仅显示包含图形元素的一半视图时，我的 CPU 利用率 = 10%
  3. 当显示我的所有图形元素时：我的 CPU 利用率 = 20%
  4. 当我减小窗口大小时：我的 CPU 利用率根据窗口大小而降低

任何人都可以解释为什么？给我一个建议？是因为很多 JQuery 事件吗？有什么解决方案可以监视我的代码的哪一部分占用了 CPU 资源？

欢迎任何建议！

编辑

当我删除加载视图中的所有 JQuery 事件（单击、鼠标悬停...）和所有 JQueryUI 元素声明（.draggable()、.droppable()）时，CPU 利用率仍然存在。

但请记住，视图始终使用 .load() 函数动态加载。仅供参考，我也尝试使用 $.post() 加载我的视图。

我今天早上尝试使用新的 JQuery 版本 1.8.0 和 JQueryUI 1.8.22，但这并没有改变任何东西。

4

3 回答 3

3

jQuery 使用计时器来管理动画。计时器每 13 毫秒运行一次。

您可以下载开发 jquery 代码，查找“interval: 13”并将其更改为，例如，interval: 150。

编辑

从 JQuery 1.4.3 开始，jQuery.fx.interval可以操作该属性来调整每秒运行动画的帧数。默认值为 13 毫秒。

http://api.jquery.com/jQuery.fx.interval/

于 2012-08-03T18:13:16.677 回答
2

您应该在 Internet Explorer 中分析您的网站 - 这将使您开始了解 CPU 使用情况。（你要了一个工具。）

于 2012-08-03T18:05:36.583 回答
1

这可能不是您的情况，因为我不知道您是否正在使用 Sortable，但是；

当我使用 JQueryUI Sortable 处理拖放时，我遇到了与 IE 类似的问题。我在页面上有多个 UL 元素，每个元素都有几个 LI 元素，我在各种 UL 元素之间拖放。

我的大部分开发都是在 Chrome 中完成的，这很好。当我切换到 IE 进行一些测试时，结果如您所述。

碰巧在开发过程中，我在某个时候指定了“connectWith”选项（这样我可以将选定的元素从一个拖到另一个）和“items”选项（这样我可以说元素内的哪些项目应该是可排序的）。

现在，当我通过 JQuery UI 的源代码进行调试时，它在后台进行了大量的 DOM 操作，例如删除和插入节点以及绑定各种事件等等。事实证明，当我在代码中设置了上面提到的两个选项时，JQuery UI 在循环类型的东西中做了某种循环，它设置相同元素的位置和样式的次数是（项目计数 * ConnetWith 计数）。

我在 CSS 中处理了一些样式（非滚动页眉、页脚和侧边栏菜单），并且当 JQuery UI 操作节点时，它导致浏览器执行布局并重新计算样式请求，从而导致重新应用 CSS。我在页面上可见的元素越多，需要布局和样式的元素就越多。当 IE 需要进行大量插入操作时，这可能会成为 IE 上的一个问题，例如表中有大量行，但大多数情况下它并不那么明显。然而，再加上 JQuery UI 处理/循环导致的布局请求几乎呈指数增长，我在 IE 上遇到了一个真正的问题。我使用的是 1920 x 1080 的屏幕，所以在 CPU 停止发疯之前，在一台快速机器上需要大约 40 秒。在其他浏览器上，它只存在大约一秒钟左右。

更改页眉、页脚和侧边栏的样式很有帮助。但对我来说更重要的是，当我从代码外壳中删除“项目”选项时，样式更新循环显着下降，CPU 只是短暂地闪了一下，然后又回到 0-1%。

于 2012-08-10T07:15:59.430 回答