web 前端優化之reflow(減小頁面的迴流)

reflow字面意思就是迴流，這裏舉一個例子：

咱們這裏有個dom樹：

 1 <p>  2 <span class="title"></span>  3 <label class="checkbox">  4 <input type="checkbox" value="足球" />  5  red  6 </label>  7 <label class="checkbox">  8 <input type="checkbox" value="籃球" />  9  black 10 </label> 11 <label class="checkbox"> 12 <input type="checkbox" value="乒乓" /> 13  english中文 14 </label> 15 </p>

咱們若是刪除了其中一個節點，好比第四行的節點，這棵樹確定不會就這麼倒了，因此會造成一個新的dom樹，這就是迴流：

 迴流是指瀏覽器爲了從新渲染部分或者所有的文檔而從新計算文檔中元素的位置和幾何構造的過程。 由於迴流可能致使整個dom樹的從新構造，因此是性能的一大殺手

如下操做會引發迴流：

① 改變窗口大小

② font-size大小改變

③ 增長或者移除樣式表

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

⑤ 激活CSS僞類（:hover）

⑥ 操做class屬性，新增或者減小

⑦ js操做dom

⑧ offset相關屬性計算

⑨ 設置style的值

......

reflow與repaint是減緩js的幾大主要緣由，尤爲是reflow更是性能殺手，因此咱們應該想法避免。

① 一塊兒變化

若是要改變一個元素的樣式，能夠將全部樣式集中在一個class上面一次變化，而不是變化幾回：

 1 <style type="text/css">  2  .changeStyle { width: 100px; height: 100px; }  3 </style>  4 <script type="text/javascript">  5  $(document).ready(function () {  6 var el = $('id');  7 //1  8  el.css('width', '100px');  9  el.css('height', '100px'); 10 //2 11  el.css({ 'width': '100px;', 'height': '100px;' }); 12 //3  13  el.addClass('changeStyle'); 14 15  }); 16 </script>

如下幾種作法，我這裏弱弱的推薦第三種，避免第一種。

② 具備動畫效果請使用absolute

由於absolute元素的改變對其它元素的迴流影響不大，因此咱們的動畫效果的元素仍是將他搞成absolute吧。

③ 避免使用表格佈局（記住只是佈局哦，咱們數據仍是應該用表格的）

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

⑤ 在最末改變元素

由於迴流是自上而下的，因此下不及上，咱們在最後面修改信息對全局影響越少。

⑥ 動畫移動時候，要控制

好比咱們拖動元素時候，我是在他x或者y座標改變5px才操做，這樣雖然說下降了平滑度，可是對性能有提升。