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才操做，这样虽然说下降了平滑度，可是对性能有提升。