web前端最佳化之reflow(減少頁面的迴流)

標籤：read   abs   text   put   文檔   操作dom   頁面   css偽類   ext   

1、什麼是reflow?

reflow(迴流)是指瀏覽器為了重新渲染部分或者全部的文檔,重新計算文檔中的元素的位置和幾何構造的過程。

因為迴流可能導致整個Dom樹的重新構造,所以是效能的一大殺手。

 

以下操作會引起迴流：

① 改變視窗大小

② font-size大小改變

③ 增加或者移除樣式表

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

⑤ 啟用CSS偽類（:hover）

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

⑦ js操作dom

⑧ offset相關屬性計算

⑨ 設定style的值

......

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

 

<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才操作，這樣雖說降低了平滑度，但是對效能有提高。

web前端最佳化之reflow(減少頁面的迴流)