css中reflow是什么意思?

什么是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>

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css中reflow是什么意思?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏