代碼層面瀏覽器優化

一、 減小dom操做：類數組是實時更新的
類數組集合, 在腳本中 document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection類型的集合，常見的類數組還有arguments對象和DOM方法的返回結果。對這些類數組集合操做是儘可能轉爲數組類型再對其進行操做。
Array.prototype.slice.call(arrayLike)
若是不轉化爲數組則應該儘可能在對類數組for循環時對其如length屬性進行緩存成局部變量，避免每次循環都訪問一次。

二、 避免大量的元素重繪（樣式改變）、重排（佈局改變）
注：重排必定會重繪。
具體實現：①樣式合併，如ele.style.borderLeft = '1px';
ele.style.borderRight = '2px'; 改爲
ele.style.padding = '5px';

ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

•
②將須要屢次重排的元素，position屬性設爲absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會影響到其餘元素。例若有動畫效果的元素就最好設置爲絕對定位。

③在內存中屢次操做節點，完成後再添加到文檔中去（可以使用fragment元素）。例如要異步獲取表格數據，渲染到頁面。能夠先取得數據後在內存中構建整個表格的html片斷，再一次性添加到文檔中去，而不是循環添加每一行。（jsRender,arttemple渲染模板的產生）。

三、 每次 eval 或Function 構造函數做用於字符串表示的源代碼時，腳本引擎都須要將源代碼轉換成可執行代碼。這是很消耗資源的操做 —— 一般比簡單的函數調用慢 100倍以上。 使用 eval和 Function也不利於Javascript 壓縮工具執行壓縮。

四、 減小做用域鏈查找
前文談到了做用域鏈查找問題，這一點在循環中是尤爲須要注意的問題。若是在循環中須要訪問非本做用域下的變量時請在遍歷以前用局部變量緩存該變量，並在遍歷結束後再重寫那個變量，這一點對全局變量尤爲重要，由於全局變量處於做用域鏈的最頂端，訪問時的查找次數是最多的。

5 、數據訪問
　　Javascript中的數據訪問包括直接量 (字符串、正則表達式 )、變量、對象屬性以及數組，其中對直接量和局部變量的訪問是最快的，對對象屬性以及數組的訪問須要更大的開銷。當出現如下狀況時，建議將數據放入局部變量：
　　a. 對任何對象屬性的訪問超過 1次
　　b. 對任何數組成員的訪問次數超過 1次
　　另外，還應當儘量的減小對對象以及數組深度查找。
六、 字符串拼接
在 Javascript中使用」+」號來拼接字符串效率是比較低的，由於每次運行都會開闢新的內存並生成新的字符串變量，而後將拼接結果賦值給新變量。與之相比更爲高效的作法是使用數組的 join方法，即將須要拼接的字符串放在數組中最後調用其 join方法獲得結果。不過因爲使用數組也有必定的開銷，所以當須要拼接的字符串較多的時候能夠考慮用此方法。

七、CSS選擇符優化
在大多數人的觀念中，都以爲瀏覽器對 CSS選擇符的解析式從左往右進行的，例如 #toc A { color: #444; }這樣一個選擇符，若是是從右往左解析則效率會很高，由於第一個 ID選擇基本上就把查找的範圍限定了，但實際上瀏覽器對選擇符的解析是從右往左進行的。如上面的選擇符，瀏覽器必須遍歷查找每個 A標籤的祖先節點，效率並不像以前想象的那樣高。根據瀏覽器的這一行爲特色，在寫選擇符的時候須要注意不少事項，有興趣的童鞋能夠去了解一下。