什么是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是什么意思?的详细内容,更多请关注易知道|edz.cc其它相关文章!