## **性能優化** 我們知道操作DOM是一個高成本的操作，不僅是因為本身js與DOM的鏈接訪問，還包括操作DOM后悔引起一連串的連鎖反應（重排），因此，從性能優化角度，我們可以從以下幾個方面著手： * 減少DOM操作 * 最小化DOM訪問次數，盡量緩存訪問DOM的樣式信息，避免過度觸發回流。 * 如果在一個局部方法中需要多次訪問同一個dom，則先暫存它的引用。 * 采用更優的API替代消費高的api，轉換優化消費高的集合 * 用querySelectorAll()替代getElementByXX()。 * 開啟動畫的GPU加速，把渲染計算交給GPU。 * 少用HTML集合（類數組）來遍歷，因為集合遍歷比真數組遍歷耗費更高。 * 用事件委托來減少事件處理器的數量。 * 減少重排 * 避免設置大量的style屬性，因為通過設置style屬性改變結點樣式的話，每一次設置都會觸發一次reflow，所以最好是使用class屬性 * 實現元素的動畫，它的position屬性，最好是設為absoulte或fixed，這樣不會影響其他元素的布局 * 動畫實現的速度的選擇。比如實現一個動畫，以1個像素為單位移動這樣最平滑，但是reflow就會過于頻繁，大量消耗CPU資源，如果以3個像素為單位移動則會好很多。 * 不要使用table布局，因為table中某個元素旦觸發了reflow，那么整個table的元素都會觸發reflow。那么在不得已使用table的場合，可以設置table-layout:auto;或者是table-layout:fixed這樣可以讓table一行一行的渲染，這種做法也是為了限制reflow的影響范圍 * css及動畫處理 * 少用css表達式 * 減少通過JavaScript代碼修改元素樣式，盡量使用修改class名方式操作樣式或動畫； * 動畫盡量使用在絕對定位或固定定位的元素上； * 隱藏在屏幕外，或在頁面滾動時，盡量停止動畫；