2012-08-03 83 views
4

我开发了一个使用JQuery和大量拖放元素的网站,这些元素工作得非常好。尽管如此,在IE9上,当大量的拖放元素动态加载(使用.load())并显示时,浏览器总是会消耗少量CPU(〜10%)(用于刷新?)即使用户没有长时间没有触摸鼠标或在页面上滚动也没有做任何事情。IE9:我的网站上的CPU利用率始终很低

我没有任何计时器,并且Chrome和Safari上的行为是确定的。

这里的环境和我经过我的测试中发现:

语境

在我的主网页,我使用load() function加载用户意见纳入一个div。加载的视图包含多个带有可拖动元素的容器。这些容器是可放置的,并且在每次放置事件之后使用load()函数进行刷新。

  1. 如果我插入第50个<br>标签在我的网页,图形元素不会显示没有在我的网页scroling:我的CPU利用率= 0%
  2. 当我滚动显示只有一半我包含图形元素视图,我的CPU利用率= 10%
  3. 当显示所有我的图形元素:
  4. 当减少我窗口大小我的CPU利用率= 20%:根据窗口大小我的CPU利用率下降

任何人都可以解释为什么?给我一个建议?是否由于很多JQuery事件?任何解决方案来窥探我的代码的哪一部分正在占用CPU资源?

欢迎任何建议!

编辑

当我删除所有的JQuery事件在我加载视图(点击,鼠标悬停,...)和所有jQueryUI的元素声明(.draggable(),.droppable())的CPU利用率还在。

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

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

+1

有关IE9和JQuery的一些错误。像http://bugs.jquery.com/ticket/9341 ..你使用的是什么版本的jQuery? – ShaunOReilly 2012-08-09 06:08:28

+0

感谢您的回复。我正在使用最后一个:JQuery版本1.7.2 – sdespont 2012-08-09 06:39:59

+0

我最近升级到JQuery 1.8.2和JQuery UI 1.8.24,但问题仍然存在。 – sdespont 2012-11-03 18:21:24

回答

2

您应该在您的网站在Internet Explorer中profile - 这会让您开始了解CPU使用情况。 (你问了一个工具。)

+0

感谢您的提示+1!我跑了2分钟的探查器,我什么都看不到,没有任何配置文件报告生成,因为没有发生任何事情。 – sdespont 2012-08-03 18:21:17

+0

奇怪..所有其他标签都关闭了,是吗? – 2012-08-03 18:53:50

+0

是的。请检查我上面的编辑。 – sdespont 2012-08-07 09:42:39

3

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

您可以下载开发jQuery代码,请认准 “间隔:13”,它改变,例如,间隔:150

编辑

从JQuery的1.4。3,可以操纵jQuery.fx.interval属性来调整动画将运行的每秒帧数。默认值是13毫秒。

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

+0

为什么在这里倒票? – TheBlackBenzKid 2012-08-06 15:58:25

+0

也许他正在IE9中寻找一个bug。我想知道Bouillou是否尝试过它。我只是试图提供一个已经帮助我一次的解决方案。 – user1154664 2012-08-06 17:56:58

+1

修改JQuery源代码听起来很奇怪。但是,花一些时间挖掘一下之后,你的解决方案不是一个坏主意,但对我来说并不合适。顺便说一句,正确的方法来改变这个值:http://api.jquery.com/jQuery.fx.interval/ – sdespont 2012-08-07 04:48:45

1

这可能不是你的情况,因为我没有,如果your're使用可排序或没有,但知道的;

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

我在Chrome中完成了大部分开发工作,这很好。当我切换到IE进行一些测试时,结果如您所述。在开发过程中,我曾在某些时候指定了'connectWith'选项(这样我就可以将所选元素从一个拖到另一个元素)和'items'选项(这样我就可以说明元素应该是可排序的)。

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

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

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

+0

非常感谢您有充分记录的答案(+1)!不幸的是,我不使用JQueryUI排序但是你的评论让我有更多新的探索方式来了解我的问题来自哪里。 – sdespont 2012-08-10 18:06:20