# 性能優化
## 避免不必要的 DOM 操作
瀏覽器遍歷 DOM 元素的代價是昂貴的。最簡單優化 DOM 樹查詢的方案是，當一個元素出現多次時，將它保存在一個變量中，就避免多次查詢 DOM 樹了。
~~~
// Recommended
var myList = "";
var myListHTML = document.getElementById("myList").innerHTML;
for (var i = 0; i < 100; i++) {
myList += "<span>" + i + "</span>";
}
myListHTML = myList;
// Not recommended
for (var i = 0; i < 100; i++) {
document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}
~~~
## 緩存數組長度
循環無疑是和 JavaScript 性能非常相關的一部分。通過存儲數組的長度，可以有效避免每次循環重新計算。
注: 雖然現代瀏覽器引擎會自動優化這個過程，但是不要忘記還有舊的瀏覽器。
~~~
var arr = new Array(1000),
len, i;
// Recommended - size is calculated only 1 time and then stored
for (i = 0, len = arr.length; i < len; i++) {
}
// Not recommended - size needs to be recalculated 1000 times
for (i = 0; i < arr.length; i++) {
}
~~~
## 異步加載第三方內容
當你無法保證嵌入第三方內容比如 Youtube 視頻或者一個 like/tweet 按鈕可以正常工作的時候，你需要考慮用異步加載這些代碼，避免阻塞整個頁面加載。
~~~
(function() {
var script,
scripts = document.getElementsByTagName('script')[0];
function load(url) {
script = document.createElement('script');
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);
}
load('//apis.google.com/js/plusone.js');
load('//platform.twitter.com/widgets.js');
load('//s.widgetsite.com/widget.js');
}());
~~~
## 避免使用 jQuery 實現動畫
1. 禁止使用 slideUp/Down() fadeIn/fadeOut() 等方法；
2. 盡量不使用 animate() 方法；
