css的重排與重繪

一直在做pc頁面的部分，由於網速快，看上去css的寫法並沒有什么影響所以對css的要求也沒怎么注意過，最近在做一些手機端的東西，發現真的差好多，特別是再搭配上js效果時一些延遲更是讓人接受不了。在這個快餐的時代，確實導致手機端更具有市場，搭乘地鐵的時間變成人們瀏覽新聞，玩游戲，甚至是購物的時間，此時用戶應用的設備多數會是手機，而手機與電腦比起來最大的差距就是硬件環境，其中包括網速，內存等等，這對開發者的要求也就提高了，如何能夠減少內存的消耗，使動畫不會變的越來越卡就變成了開發者永恆不變的話題。目前雖然有很多的前輩們已經針對這個現狀提出了很多的解決方式（最近看到一個博客http://www.williamlong.info/archives/3457.html），但是我認為細節決定成敗，盡量的減少重繪和重排就會減少內存消耗，從而減少動畫卡卡。

好了廢話說多了，轉入正題，如何寫好css減少重繪與重排這個問題困擾我這個小菜鳥很久了，前兩天看了一篇博客，略有收獲，拿出來分享一下，不知道自己理解的對不對，歡迎拍磚。

 

首先區分一下概念：

重繪是一個元素的外觀變化所引發的瀏覽器行為；

重排是引起DOM樹重新計算的行為；

 

然后來看一段經常會看到的css代碼段：

 

.wrap {
    width: 392px;
    height: 224px;
    overflow: hidden;
}
.wrap .slider {
    width: 1645px;
    height: 224px;
}
.wrap .slider .items {
    width: 329px;
    height: 224px;
    float: left;
}    

 

這個是一個slider的簡單外框，配上js以后

 

<script type="text/javascript">
    var slider = $('ul.slider'),
          li_width = slider.find('li.items');
    $('div.left_btn').unbind('click').bind('click',function(){
        slider.animate({'margin-left':'-=' + li_width+ 'px'},'fast',function(){
            slider.css('margin-left','-li_width');
            slider.children().first().appendTo(slider);
        });
    });
</script>    

每次滾動的時候都會引起重排，改進：slider改為絕對定位操作，這樣他脫離了普通文檔流，當他重排時不會引起其他元素的重排；

 

再舉個栗子：

<script type="text/javascript">
    var html = [];
    for(var i = 0; i < 5; i++){
        html.append('<li>' + i + '</li>');
    }
    $('ul.slider').html(html.join(''));
</script>

看得出他與循環裝填的好處嗎？是的就是他只引起了一次重排！

還有很多小的細節例如：

1.多次改變樣式合並成一個，用一個class來操作

2.多次操作取值會引起重排重繪的屬性時緩存變量例如offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

3.需要多次重排的元素用絕對或是固定定位，例如動畫元素、彈窗、返回頂部的那個圖標

自己深知還有很多方面是自己還沒有注意到的，但是致命的問題，歡迎提出建議！