2012年4月10日 星期二

JavaScript Performance Tip

1. 將所有<script>標籤放在頁面底部,緊靠</body>的上方。這樣可以確保頁面(DOM)在script運行之前完成解析

2. 減少載入太多<script>。頁面的<script>越少,頁面的載入速度就越快。

3. 使用non-blocking方式載入javascript:
(1) 在<script>加入defer屬性 (只適用於Internet Explorer或Firefox 3.5以上)
(2) 動態創造<script>元素,用它下載並執行代碼。例:document.createElement("script")
(3) 使用XHR(XMLHttpRequest)物件下載代碼,並注入到頁面中

4. 減少使用global variable,盡可能使用local variable

5. 若必需用到多次global variable,用local variable存下來,減少呼叫 global variable的次數。例如:var target = document.getElementById('id')

6. 使用innerHTML代替createElement (只適用非webkit-based browser)

7. 在for迴圈時,不要用elements.length當終止條件,因為每次迴圈都要取得一次elements.length的值。應該用一個變數存下elements.length的值

8. 需要多次存取array[index]的值時,用一個變數存下array[index],避免每次都要搜尋array一次

9. 用DOM properties取代elements nodes:
element nodes                property(faster)
-----------------------------------------------------
childNodes                     children
childNodes.length            childElementCount
firstChild                        firstElementChild
lastChild                        lastElementChild
nextSibling                     nextElementSibling
previousSibling                previousElementSibling

(IE只支援children)


10. 需要取得複雜elements時,使用document.querySelectorAll(),而不要用document.getElementById跟document.getElementsByClassName。
例如,要取得所有id="menu"的<a>tag,可以用:
var elements = document.querySelectorAll("#menu a");
//其實有點像jQuery的寫法

而不要用:
var elements = document.getElementById("menu").getElementsByTagName('a');


11. 要改變css,就一次一起改變,或者直接改className:
//這樣會很慢
var el = document.getElementById("mydiv");
el.style.borderLeft = "1px";
el.style.borderRight = "2px";
el.style.padding = "5px";

//這樣快多了
var el = document.getElementById("mydiv");
el.style.cssText = "border-left: 1px; border-right: 2px; padding: 5px";
//若要附加style設定,可以用 el.style.cssText += "border-left: 1px; border-right: 2px; padding: 5px";

//這樣也快
var el = document.getElementById("mydiv");
el.className = "newClass";


12. 減少UI重排。要做大量appendChild到頁面之前,先把style.display = 'none',再進行append,最後再style.display = 'block',以減少畫面一直更新的負擔


13. 盡量不要用for-in 的迴圈,改用for或while改寫


14. 在if-else的判斷條件中,比較容易出現的條件放在前面,以減少執行判斷的時間


15. 少用遞迴


16. 避免產生暫時字串:
//這樣會先產生一個"onetwo"的暫時字串,會很慢
str += "one" + "two";

//這樣快多了
str = str + "one" + "two"



沒有留言:

張貼留言