1.優化DOM交互
DOM與我們的頁面緊密相關，瀏覽器渲染頁面也就是在渲染解析後的DOM元素，DOM操作與交互要消耗大量的時間，因為它們往往需要重新渲染整個頁面或者壹部分。進壹步說，看似細微的壹些操作也可能需要花很多時間來執行，因為DOM要處理的信息非常多，因此我們應該盡可能地優化與DOM相關的操作，加快瀏覽器對頁面的渲染！為什麽有些DOM操作會影響頁面性能，可以查看我寫的壹些關於瀏覽器原理的文章：
ok，優化DOM操作，我們主要有壹些幾種方式：
1.1 最小化現場更新
什麽是DOM的現場更新：需要對DOM部分已經顯示的頁面的壹部分的顯示立即更新。但是，每壹個更改，不管是插入單個字符，還是壹處整個片段，都有壹定的性能懲罰，因為瀏覽器需要重新計算無數尺寸以進行更新（相關知識請閱讀：）。所以，現場更新進行的越多，代碼執行所花的時間就越長，反之代碼執行越快，如下：
這段代碼為列表mylist添加了10個項目，沒添加壹個項目都要進行2次的現場更新：添加元素和添加文本節點，所以這個操作壹個需要完成20個現場更新，每個更新都會損失性能，可見這樣的代碼運行起來是相對緩慢的。
解決的方法是使用文檔碎片間接地更改DOM元素：
像這樣的代碼只需進行壹次的現場更新。記住，當給appendChild()傳入文檔碎片是，只有文檔碎片中的子節點才會被添加到目標元素，碎片本身不會被添加。
現在，妳應該明白妳用循環直接進行DOM節點的增刪查改是多麽對不起瀏覽器的事了吧 `(∩_∩)′ 。
1.2 使用 innerHTML
除了上面代碼中使用的creatElement() 和 appendChild()結合的方法創建DOM元素之外，還有通過給innerHTML賦值來創建。對於小的DOM更改而言，兩種方法的效率其實差不多，但對於大量的DOM節點的更改，後者要比前者快得多！為啥捏？
因為當我們給innerHTML賦值時，後臺會創建壹個HTML解析器，然後使用內部的DOM調用來創建DOM結構，而非基於Javascript的DOM調用，由於內部方法是編譯好的而非解釋執行的，所以執行代碼的速度要快很多！
用innerHTML改寫上面的例子：
這種方式同樣也只進行了壹次的現場更新，並且性能要比上壹種方式要好！雖然在字符串的鏈接上有點性能損失。
1.3 使用事件代理/事件委托
事件處理程序為web應用提供交互能力，因此許多開發人員會不分青紅皂白地向頁面中添加大量的處理程序，有個問題就是壹個頁面上的事件處理程序數量將直接關系到頁面的整體運行性能。為什麽捏？
首先，事件處理程序對應至少壹個函數，JS中每個函數都是對象，都會占用內存，內存中的對象越多，性能就越差。
其次，我們必須事先指定所有事件處理程序，這就導致了DOM訪問次數增多，會延遲整個頁面的交互就緒時間，頁面響應用戶操作變得相對緩慢。
所以減少事件處理程序同樣也可以讓我們的頁面更牛暢！使用事件委托勢在必得啊！
事件委托的原理其實就是事件冒泡，只指定壹個事件處理程序就可以管理某壹類型操作的所有事件。例如：click事件會壹直冒泡到document層次，也就是說我們不必為每個元素添加事件，只需在較高的層次的元素上添加事件處理程序即可，然後利用事件對象（event）的屬性或方法去判斷當前點擊的元素，然後做出相應的響應。這個我就不展開講了，初學者可以自行查閱事件冒泡知識。
2.作用域很重要
說到作用域啊就很容易想到作用域鏈(scope chain)，我們知道要搜索壹個變量，所在的執行環境都要沿著這條作用域向上搜索這個變量，作用域鏈上有很多的變量，那麽我們就得遍歷，遍歷就需要時間啊，而且妳越往上查找所需時間越多，如果我們能減少這個時間，我們代碼執行效率不是可以提高了嗎？
好聰明啊，ok，我看看有哪些方式可以減少這個時間：
2.1 避免全局查找
這是性能優化的壹重點，上面也說了，越往上查找時間越多，也就是說查找全局變量和函數比局部要多！看代碼：
這代碼很正常呀！我之前也經常這麽做滴。但是我們細心可以發現，這段代碼有三處引用了全局變量document,如果我們的頁面很多圖片，那麽在for循環中的document就會被執行上百次，而每次都要需要在作用域鏈中查找，時間都去哪了，我還沒......停！。
我們可以通過在函數中創建壹個局部變量保存對document的引用，這樣，我們在函數裏任何地方引用document都不用跑到全局變量去找了。這樣就改進了代碼的性能，看代碼：
所以啊，我們在開發中，如果在函數中會經常用到全局變量，把它保存在局部變量中！
2.2 避免使用with語句
用with語句延長了作用域，查找變量同樣費時間，這個我們壹般不會用到，所以不展開了。解決方法還是和上面的例子壹樣，將全局變量保存在局部變量中！
3.優化循環
循環在編程中可謂家常便飯，在js中也隨處可見，循環體會反復地執行同壹段代碼，執行時間壹直累加，所以能夠對循環體的代碼進行優化也可以大大減少執行時間！如何優化？四種方式。
3.1 減值叠代
我們寫叠代器(循環條件)的時候壹般都這樣(var i = 0;i
3.2 簡化終止條件
由於每次循環都會計算終止條件，所以必須保證它的執行盡可能地塊。這裏主要是避免其他DOM元素及其屬性的的查找。
3.3 簡化循環體
原因和上面以上的，所以在循環體內避免大量的密集的操作。
這其實和上面講的：1.1 最小化現場更新 。是壹樣的優化方式。可以倒回去看看。
4.基本的算法優化
在計算機中，算法的復雜度用O表示。下面是javascript中幾種常見的算法類型：
O(1) ：常數，不管有多少值，執行的時間都是恒定的，比如簡單值和存儲在變量中的值。
O(log n)：對數，總的執行時間和數量有關，但不壹定要獲取每壹個值，如：二分法查找
O(n) ：線性，總執行時間和數量直接相關，如：遍歷
O(n*n) ：平方，總執行時間和數量有關，每個值至少獲取N次，如：插入排序
ok，有了上面的知識，我們就可以對javascript進行壹些算法上的優化了。看代碼：
這段代碼進行了4次常量值的查找：數字5，變量value，數字10，變量sum，這段代碼的算法復雜度就是O(1)。又如：
在javascript中訪問數組元素也是壹個O(1)操作，和簡單的變量查找效率壹樣。再看：
要表達的是訪問對象上的屬性要比訪問數組和變量的效率低。因為這是壹個O(n)操作。妳需要在對象的原型鏈中查找該屬性，所花時間較多。
好了，看完這個是不是感覺眼前壹片光明啊。其實我們前面所講的要把經常用到的全局屬性保存在壹個局部變量中就是根據這個原理了，訪問全局屬性是壹個O(n)的操作，而訪問變量是壹個O(1)的操作，大聲告訴我，挖掘機哪家強啊！
5.最小化語句數
前面講的優化差不多都是和精簡優化語句有關的，是的，我覺得代碼的質量和數量就是性能的評判標準。前面講了壹些代碼質量相關的優化，這裏就講講代碼數量的優化。
5.1 精簡變量聲明
5.2 使用數組和對象字面量
6.其他
寫累了，如有不正確的地方請指正哦，還有壹些其他的優化，下次文章繼續！