web頁面的回流和重繪

什麼是回流？

回流也叫重排（reflow），當頁面中的元素發生影響布局的變化，比如：改變寬高，修改顯示影藏。頁面需要重新布局，就會觸發重排。簡單的說就是，頁面布局改變，就會觸發重排。

什麼是重繪（repaint）？

頁面中的元素樣式發生改變注意：

每個頁面只要會發生一次重排和重繪。

重排一定會觸發重繪

前端效能優化的關鍵在於減少dom操作和減少頁面的重排重繪

如何減少頁面重排重繪呢？想要減少重排重繪還要了解瀏覽器自帶的優化，每個瀏覽器都是聰明的，瀏覽器都有自己的優化操作。每個瀏覽器都有乙個維護佇列，它會把引起重排和重繪的操作放到維護佇列中，等維護佇列中的操作到達一定數量或者到達一定的時間間隔，瀏覽器就會清空這個維護佇列，進行批量處理，這樣就會減少重排和重繪的次數。　　注意：對應一些特殊的獲取操作，為了保證獲取數值的準確性，瀏覽器會提前清空維護佇列，將其提前渲染。

所以想要減少重排和重繪，條件允許一定要減少獲取操作，如：

1 在for迴圈中，盡量不要進行樣式的獲取操作（因為一獲取就會flush(清空)瀏覽器維護的佇列）

2 盡量少用sytle修改樣式，通過新增class進行一次性修改樣式

3 使用 translate 代替 left/top等，（translate只會觸發重繪，不會引起重排，可以減少一次重排的時間）

4 使用opacity代替visibility,改透明度渲染效率更高

5 使用絕對定位或者固定定位(absolute fixed),脫離文件流不會引起頁面其它盒子的變化

6 將大量需要重排操作的元素，進行display:none ，（專業術語是' 離線處理'）

這些是減少重排重繪的優化方法。

// gpu 是圖形處理器，使用3d屬性可以觸發gpu硬體加速。

移動端的優化可以給元素新增 3d屬性（比如 transform: translatez(0)），使用3d屬性可以使手機開啟gpu硬體加速，讓手機可以最高效能的進行渲染。

資源搜尋**大全

關於優化還可以

使用css精靈，減少的張數，或者使用iconfont字型圖示

減少ajax請求的次數，使用webpack打包

壓縮/合併js和css**，減少**檔案的個數和體積

關於**排名的優化

京東(jd.com)-**低價、品質保障、配送及時、輕鬆購物！title>
title>
class="logo">
京東a>
h1>
div>
....

在寫html時，使用 div>h1>a 這種結構有優化作用，比如上面的logo區域，a標籤裡面的字也不要刪除，可以使用text-indent：-99999（首行縮排進行隱藏），這樣做可以啟動搜尋優化，可以使自己的**靠前一點

web頁面的回流和重繪

頁面的回流與重繪

頁面的重繪與回流

Web頁面回流與重繪

web頁面的回流和重繪

頁面的回流與重繪

頁面的重繪與回流

Web頁面回流與重繪

相關推薦