【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中一些细节的地方。