IE9：我的网站上的 CPU 使用率总是很低

Question

我使用 JQuery 和许多拖放元素开发了一个网站，效果很好。

然而，在 IE9 上，当大量拖放元素被动态加载（使用 .load()）并显示时，浏览器总是消耗少量 CPU（~10%）（用于刷新？）甚至如果用户长时间没有触摸鼠标或在页面上滚动没有任何操作。

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

这是我在测试后发现的背景和发现：

上下文

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

1. 如果我首先在网页中插入 50 个 <br> 标签，则图形元素不会在我的页面中不滚动显示：我的 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，但这并没有改变任何东西。

Answer 1

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

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

编辑

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

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

Answer 2

您应该在 Internet Explorer 中 profile 您的网站 - 这将使您了解 CPU 使用率的去向。 （你要了一个工具。）

Answer 3

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

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

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

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

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

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

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