【web前端優化之reflow】減少頁面的回流

前言

今天白天的時候我們一起學習了塊級元素，晚上的時候本來想繼續學習CSS，但是發現還是有一點累，所以我們還是來研究點大家都感興趣的東西，前端優化。

什么是reflow？

這個單詞字面意思就是回流，這里舉一個例子：

我們這里有個dom樹：

<p>
    <span class="title"></span>
    <label class="checkbox">
        <input type="checkbox" value="足球" />
        red
    </label>
    <label class="checkbox">
        <input type="checkbox" value="籃球" />
        black
    </label>
    <label class="checkbox">
        <input type="checkbox" value="乒乓" />
        english中文
    </label>
</p>

我們如果刪除了其中一個節點，比如第四行的節點，這棵樹肯定不會就這么倒了，所以會形成一個新的dom樹，這就是回流：

回流是指瀏覽器為了重新渲染部分或者全部的文檔而重新計算文檔中元素的位置和幾何構造的過程。
因為回流可能導致整個dom樹的重新構造，所以是性能的一大殺手

以下操作會引起回流：

① 改變窗口大小

② font-size大小改變

③ 增加或者移除樣式表

④ 內容變化（input中輸入文字會導致）

⑤ 激活CSS偽類（:hover）

⑥ 操作class屬性，新增或者減少

⑦ js操作dom

⑧ offset相關屬性計算

⑨ 設置style的值

......

reflow與repaint是減緩js的幾大主要原因，尤其是reflow更是性能殺手，所以我們應該想法避免。

減少頁面回流

① 一起變化

如果要改變一個元素的樣式，可以將所有樣式集中在一個class上面一次變化，而不是變化幾次：

<style type="text/css">
    .changeStyle { width: 100px; height: 100px; }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        var el = $('id');
        //1
        el.css('width', '100px');
        el.css('height', '100px');
        //2
        el.css({ 'width': '100px;', 'height': '100px;' });
        //3 
        el.addClass('changeStyle');

    });
</script>

以上幾種做法，我這里弱弱的推薦第三種，避免第一種。

② 具有動畫效果請使用absolute

因為absolute元素的改變對其它元素的回流影響不大，所以我們的動畫效果的元素還是將他搞成absolute吧。

③ 避免使用表格布局（記住只是布局哦，我們數據還是應該用表格的）

④ 請絕對不要使用CSS表達式，性能殺手啊，特別是IE

⑤ 在最末改變元素

因為回流是自上而下的，所以下不及上，我們在最后面修改信息對全局影響越少。

⑥ 動畫移動時候，要控制

比如我們拖動元素時候，我是在他x或者y坐標改變5px才操作，這樣雖說降低了平滑度，但是對性能有提高。

結語

好了，今天就到這里啦，后面點我們再看看CSS中一些細節的地方。