2012-08-03 82 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