IE9:我的网站上的CPU利用率一直很低

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

尽管如此,在IE9上并且当很多拖放元素被动态加载(使用.load())并显示时,浏览器总是消耗少量的CPU(~10%)(用于刷新?)即使没有什么是由用户完成很长时间而不触摸鼠标或滚动页面。

我没有任何计时器,Chrome和Safari上的行为也没问题。

以下是我在测试后发现的背景和内容:

上下文

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

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

有谁能解释为什么? 给我一个建议? 是由于很多JQuery事件? 间谍的哪些部分代码占用CPU资源的任何解决方案?

欢迎任何建议!

编辑

当我在加载的视图中删除所有JQuery事件(click,mouseover,…)和所有JQueryUI元素声明(.draggable(),. droppable())时,CPU利用率仍然存在。

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

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

jQuery使用计时器来管理动画。 计时器每运行13ms。

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

编辑

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

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

您应该在Internet Explorer中分析您的网站 – 这将为您提供CPU使用率的起点。 (你问了一个工具。)

这可能不是你的情况,因为我不知道你是否使用Sortable,但是;

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

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

碰巧在开发期间,我在某个时刻指定了’connectWith’选项(所以我可以将所选元素从一个拖到另一个)和’items’选项(所以我可以说元素中的哪些项应该是可排序的)。

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

我在CSS中有一些样式来处理(非滚动页眉,页脚和侧边栏菜单),并且当JQuery UI操纵节点时,它导致浏览器执行布局并重新计算样式请求,从而导致重新应用CSS。 我在页面上看到的元素越多,需要布置和设置的元素就越多。 当有很多插入操作时,这可能成为IE上的一个问题,例如在表中有大量行,但大多数时候它并不明显。 然而,这与由JQuery UI处理/循环引起的布局请求几乎呈指数级增长相结合,我在IE上遇到了一个真正的问题。 我正在使用1920 x 1080的屏幕,因此在CPU停止疯狂之前,它在快速机器上花了大约40秒。 在其他浏览器上它只有大约一秒左右。

改变页眉,页脚和侧边栏的样式有帮助。 但更重要的是,当我从代码框中删除’Items’选项时,样式更新循环显着下降,CPU只会暂停一会儿,然后又回到0-1%。