2010-02-26 82 views
3

作爲一名Web開發人員,我注意到我創建的任何東西在所有瀏覽器中都絕對優秀,但始終始終如此總是在Internet Explorer中存在速度問題。請注意我指的是速度,因爲我總是注意它在所有瀏覽器中顯示和工作。爲Internet Explorer優化

是否有任何地方,或者沒有人有Internet Explorer的良好編程技巧?我的意思是如何做事情,因此它或多或少地針對Internet Explorer進行了優化。

我的意思是我最近的例子是,我從數據庫返回JSON數據(通過AJAX),然後構建頁面的結果。來自服務器的響應很少,並且它在aaaaall瀏覽器中加載instantaneoulsy,但在Internet Explorer中需要5-10秒,具體取決於操作系統和版本。

我迷失了方言,我只是想知道我能做些什麼。

例子: http://msdn.microsoft.com/en-us/library/ms533019(VS.85).aspx http://www.quirksmode.org/dom/innerhtml.html http://blog.dynatrace.com/2009/12/12/understanding-internet-explorer-rendering-behaviour/

-theo

+2

嗯,我建議你在IE中預覽你的設計,然後一旦在IE中工作,它很容易得到它在Firefox或任何工作.. – ant 2010-02-26 14:03:24

+0

我也注意到,當我用IE瀏覽Gmail和Facebook,我仍然有類似的問題。 – 2010-02-26 14:03:28

+0

很好的評論,但我的問題是它不起作用,但它始終在IE中工作緩慢。 – 2010-02-26 14:06:54

回答

7

簡短回答:不要在IE中使用像document.createElement(「div」)這樣的DOM方法來創建標記。改爲使用字符串構建您的HTML。

如果您必須使用DOM方法,請確保不要多次向頁面添加元素。也就是說,創建一個主容器,添加所有內容,然後作爲最後一步調用document.body.appendChild(「div」)(其中「div」是您的主容器)。這將最大限度地減少將繼續的重新渲染量。

+1

另外,不要將您的字符串作爲innerHTML多次添加到頁面。 – Robusto 2010-02-26 14:12:28

+0

謝謝你關於主題 – 2010-02-26 14:12:40

+2

+1 - createElement令人驚訝的慢 – 2010-02-26 15:12:04

3

你可以使用dynaTrace AJAX Edition來分析你的網站在IE中看到什麼是減緩下來。

+0

剛剛發現,thnx – 2010-02-26 14:13:03

1

IE中的Javascript性能目前是所有流行瀏覽器中最差的。建議使用IE作爲您的性能基準,並有充分的依據。我會補充說,使用公認的js/ajax庫(jQuery,YUI等)將確保大量針對瀏覽器的優化已經完成並經過嚴格測試。

如果您在自己的Web應用程序中執行了很多自定義j,並且只是尋找一些最佳實踐,我可以推薦幾個網站:jspatterns.com,IE + JavaScript Performance Recommendations。這是插入Douglas Crockford'sJavascript: The Good Parts作爲一般js禪的好機會。

+0

你好,我使用mootools並已經擁有這本書。我會再次開始閱讀它,謝謝。將刪除鏈接 – 2010-02-26 14:24:58

1

任何DOM操作總是很昂貴(添加元素,刪除元素)。所以你可以通過在頁面上隱藏隱藏的元素並在其中添加可見性來最小化DOM操作。

我認爲this是值得一看的東西。

0

當在IE 6中構建一個頁面時,我遇到了類似的問題,最後做了純串連接以使性能可以接受。我第一次嘗試使用jquery(當時的1.2.6)來構建元素並添加屬性,但事實證明它太慢了。手動構建html作爲字符串,然後在元素上設置innerHtml屬性以顯示錶格要快得多。關於IE6的jQuery 1.4+要快得多,所以這可能不再適用。

在for循環中使用中間字符串似乎也有性能提升,即不要在一個大字符串上繼續使用「+ =」。在for循環中有一個表格行的字符串,並將其附加到每個循環的大字符串中。這可能是一些嘗試。

我已經遇到了與IE6有關的性能方面的兩個問題: - 切換css類在IE6中速度較慢,最好設置一個元素的style屬性中的背景顏色。 - 如果您在表中的tr或td標籤上進行鼠標懸停,則在除IE以外的所有其他瀏覽器中都可以正常工作。您必須在表級處理mouseover和mouseout事件,並找到作爲事件源的tr或td標記,並在此時執行任何操作。