web前端優化之reflow(減少頁面的回流)

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