什么是 reflow?
reflow(回流) 是指浏览器为了重新渲染部分或者全部的文档, 重新计算文档中的元素的位置和几何构造的过程.
因为回流可能导致整个 Dom 树的重新构造, 所以是性能的一大杀手.
以下操作会引起回流:
1 改变窗口大小
2 font-size 大小改变
3 增加或者移除样式表
4 内容变化 (input 中输入文字会导致)
5 激活 CSS 伪类 (:hover)
6 操作 class 属性, 新增或者减少
7 JS 操作 dom
8 offset 相关属性计算
9 设置 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 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17174.html