提升網站的性能----迴流與重繪

之前在寫網頁的時候不多關注到網站的性能，時間進入今天，一個網站不在是單純幾張圖片或者幾段文字，組成一個網站，今天的用戶更加註重網站體驗，因此寫一個頁面的時候網站的性能優化變得格外重要，做爲一個前端的開發人員，必定的要對網站的每個頁面作到最大性能優化，今天的學習了一下若是提升網站性能重要的知識：

迴流與重繪

----------------------------------------讓你的網頁快點在快點-----------------------------------------------

html中的每一個tag都是dom 樹中的1個節點，document（根節點）。

迴流：

當視圖中的一部分（或所有）由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就叫着迴流（也能夠叫作從新佈局）

重繪:

當視圖中的有些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，就叫着重繪

這裏提到重要的一點： 迴流必定會重繪，而重繪未必迴流。

會產生迴流或者重繪的操做：

1、添加、刪除元素（迴流+重繪）

2、隱藏元素 display：none,(迴流+重繪)，visibility：hidden（重繪，不迴流）

3、移動元素：改變top,left,或者移動元素到另外1個父元素中（重繪+迴流）

4、對style的操做（）

5、改變瀏覽器的大小（迴流+重繪）

瀏覽器在處理迴流和重繪的時候，會把全部的引發迴流、重繪的操做放入一個隊列裏面，必定數量或者時間間隔就會flush對象，這樣就會讓屢次的迴流、重繪變成一次迴流重繪

減小回流、重繪

1.不要改變一個元素的樣式屬性，最後直接改變類名，類名是預先定義好的樣式，不是動態的，你要動態的改變一些樣式，可使用字符串拼接形式進行改變

示例：

// 很差的寫法
var left = 1;var top = 1;
el.style.left = left + "px";
el.style.top  = top  + "px";// 比較好的寫法 
el.className += " className1";// 比較好的寫法 
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

2.讓要操做的元素的進行「離線處理」，

3.不要常常訪問會引發瀏覽器fiush隊列的屬性，若是確實要訪問，能夠先對變量進行緩存，應聘哪的時候就能夠直接讀取變量

示例：

// 別這樣寫，大哥
for(循環) {
    el.style.left = el.offsetLeft + 5 + "px";
    el.style.top  = el.offsetTop  + 5 + "px";
}// 這樣寫好點
var left = el.offsetLeft,top  = el.offsetTop,s = el.style;for(循環) {
    left += 10;
    top  += 10;
    s.left = left + "px";
    s.top  = top  + "px";
}

4.必定要思考清除，操縱元素會影響到多少個節點，儘可能減小對節點的影響，影響越多，就越耗費資源、