頁面重排（reflow）是指瀏覽器重新計算頁面的渲染布局，通常是由于元素的尺寸、位置或者視口尺寸發生了變化導致的，重排會影響頁面的性能，應盡量避免，
頁面重繪（repaint）是指瀏覽器對已渲染的頁面進行更新，通常是由于元素的樣式發生了變化導致的，重繪不會影響布局，但會消耗更多的 CPU 資源，
通常情況下，瀏覽器會在重排后自動觸發重繪，但有時候也需要手動觸發重繪，重排和重繪的程序是非常消耗性能的，所以，在網頁開發程序中，應該盡量避免過多的重排和重繪，
建議一：
為了避免頁面重排和重繪帶來的性能問題，你可以采取以下措施：
-
盡量減少對 DOM 的操作，特別是對頻繁操作的元素，
-
避免使用遞回，盡量使用回圈，
-
使用快取，盡量避免重復計算，
-
使用 CSS3 的影片和過渡，避免使用 JavaScript 來控制影片，
-
盡量使用相對定位，避免使用絕對定位，
-
盡量使用輕量級的元素，如
div和span，避免使用重量級的元素，如table和form，
當你要在 JavaScript 中操作 DOM 時，應該盡量避免使用過多的 DOM 操作，特別是對頻繁操作的元素，這是因為，每次 DOM 操作都會導致瀏覽器進行重排和重繪，這會消耗大量的 CPU 資源，導致頁面性能下降，
建議二：
為了避免過多的重排和重繪，有以下幾點建議：
- 盡量減少對布局的修改，尤其是在頁面加載后的修改，因為這會導致瀏覽器的重排，
- 使用 CSS 選擇器的級別盡量低，因為瀏覽器在渲染時會從上到下匹配選擇器，越深層的選擇器匹配越慢，會導致更多的重排，
- 使用 CSS 前處理器，可以減少代碼量，從而減少重排的次數，
- 使用計算屬性或者函式計算樣式，而不是直接使用字串拼接的方式，
- 使用影片時，盡量使用 CSS3 影片，因為 CSS3 影片可以通過硬體加速來提升性能，而 JavaScript 影片則不行，
- 使用 requestAnimationFrame() 來控制影片的重繪率，這可以有效減少不必要的重繪，
- 使用 transform 屬性來進行位移和縮放，因為 transform 屬性會觸發硬體加速，而 left、top 等屬性則不會，
- 盡量避免使用 table 布局，因為 table 的布局會導致瀏覽器進行大量的重排，
通過這些方法，你就可以在 JavaScript 中有效地避免頁面重排和重繪帶來的性能問題了，
為了避免過多的 DOM 操作，你可以使用以下方法：
-
使用檔案片段（document fragment）：檔案片段是一個輕量級的容器，可以存盤多個 DOM 元素，你可以先將所有要操作的元素放入檔案片段中，然后再將檔案片段添加到頁面中，這樣做可以減少對 DOM 的操作次數，從而提高性能，
-
使用 innerHTML：innerHTML 屬性可以直接將一段 HTML 代碼設定到元素中，你可以先使用字串拼接的方式生成所有要操作的元素，然后再使用 innerHTML 將所有元素一次性添加到頁面中，這樣做可以減少對 DOM 的操作次數，從而提高性能，
-
使用快取：在 JavaScript 中，你可以使用變數來快取 DOM 元素，例如，你可以將常用的 DOM 元素存盤在變數中，這樣就可以直接使用變數而不必每次都去查找 DOM 元素，這樣做可以減少對 DOM 的操作次數，從而提高性能，
- 使用事件委托：事件委托是指，將事件監聽器添加到父元素上，而不是子元素，這樣，當子元素觸發事件時，父元素也會觸發事件，這樣做可以減少對 DOM 的操作次數，從而提高性能，
- 使用 CSS3 的影片和過渡：CSS3 的影片和過渡可以讓你使用簡單的代碼實作復雜的影片效果，這些影片和過渡是由瀏覽器自動實作的，不會對 DOM 進行操作，因此可以大大提高性能，
通過這些方法，你就可以在 JavaScript 中有效地避免過多的 DOM 操作帶來的性能問題了，
作者：yuzhihui
出處：http://www.cnblogs.com/yuzhihui/ 宣告：歡迎任何形式的轉載，但請務必注明出處！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541610.html
標籤：Html/Css