IE9:我的网站上的CPU利用率一直很低
我开发了一个使用JQuery的网站和许多拖放元素,这些元素运行良好。
尽管如此,在IE9上并且当很多拖放元素被动态加载(使用.load())并显示时,浏览器总是消耗少量的CPU(~10%)(用于刷新?)即使没有什么是由用户完成很长时间而不触摸鼠标或滚动页面。
我没有任何计时器,Chrome和Safari上的行为也没问题。
以下是我在测试后发现的背景和内容:
上下文
在我的主网页中,我使用load()函数将用户视图加载到div中。 加载的视图包含几个带有可拖动元素的容器。 这些容器是droppables,并在每次drop事件后使用load()函数刷新。
- 如果我首先在我的网页中插入50个
标签,则不会在我的页面中滚动显示图形元素:我的CPU利用率= 0% - 当我滚动显示仅包含图形元素的视图的一半时,我的CPU利用率= 10%
- 显示所有图形元素时:我的CPU利用率= 20%
- 当我减小窗口大小时:我的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毫秒。
您应该在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%。