关注前端开发微信微信号web007007

reflow(回流)

作者 管理员 发布时间 2012-10-11 11:56 文章分类 前端文档 文章评论 抢沙发 阅读次数

基本概念

 

浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow(回流)。有时 reflow 页面中的一个元素会 reflow 它的祖先元素以及所有子元素。

 

由于 reflow 的开销非常之大,因此要尽可能的避免 reflow 的发生。

 

产生 reflow 的原因

 

● 调整窗口大小;

● 改变字体;

● 增加或者移除样式表;

● 内容变化,比如用户在 input 框中输入文字;

● 激活 CSS 伪类,比如 :hover (IE 中为兄弟结点伪类的激活);

● 操作 class 属性;

● 脚本操作 DOM;

● 计算 offsetWidth 和 offsetHeight 属性;

● 设置 style 属性的值。

 

如何减少 reflow

 

● 如果想设定元素的样式,通过改变元素的 class 名 (尽可能在 DOM 树的最里层);

● 避免设置多项内联样式;

● 用于表现动画的元素,使用 position 属性的 fixed 值或 absolute 值(脱离文档流);

● 权衡平滑和速度(调大每帧间隔,减少 reflow 次数);

● 避免使用 table 布局;

● 避免使用CSS的 JavaScript 表达式 (仅 IE 浏览器);

● 减少不必要的 DOM 层级,改变 DOM 树中的一级会导致所有层级的改变,上至根部,下至被改变节点的子节点;

 

一些操作引起的 reflow 次数

reflow(回流)-WEB前端开发网

本文固定链接: http://www.web92.net/764.html | WEB前端开发

该日志由 于2012年10月11日发表在 前端文档 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: reflow(回流) | WEB前端开发