随笔- 76  评论- 42  文章- 1 

浏览器回流。

基本概念

浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(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 树中的一级会导致所有层级的改变,上至根部,下至被改变节点的子节点;

 

重绘(repaints)是一个元素外观的改变所触发的浏览器行为,例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。重绘不会带来重新布局,并不一定伴随回流。 

回流(reflow)是更明显的一种改变,可以理解为渲染树需要重新计算。 

1,为什么我们讨厌回流? 

     回流这家伙,只要出现,就会重新对DOM树进行渲染,而大多数时候,这种全局性的渲染是无必要的。就像你花钱买了门票去景区玩,进门查票,出门查票,都可以理解是吧?但是你吃饭也查票,上厕所也查票,就完全没必要了对吧?浏览器虽然不是人,但是没准也有脾气,回流的次数多了,性能跟不上了,就是立马崩溃掉也是有可能的事儿。回流=查票 

2,我们怎样搞定回流? 

2.1 CSS中的定位、隐藏 

   前面说到,回流的危害在于重新对DOM树进行渲染,那么,脱离文档流之后,进行的任何操作,都不会造成回流了!如果有需要经常进行复杂操作的地方,不妨使用position:absolute/fixed定位;或者是display:none,使之脱离文档流后进行操作,操作完成后再进入到文档流之中。 

2.2 CSS中的顽固属性 

   以下这些属性,只要是改动了他们的值,就会造成回流,建议将他们合并到一起操作,可以减少回流的次数。这些属性包括:offsetTop、offsetLeft、 offsetWidth、offsetHeight;scrollTop、scrollLeft、scrollWidth、scrollHeight;clientTop、clientLeft、clientWidth、clientHeight;getComputedStyle() 、currentStyle()。 

2.3 Javascript控制样式的最优解 

   我们在利用Javascript进行样式控制的时候,不妨只是改变被控制者的class,而非在函数内部直接修改具体的样式。因为浏览器在我们用Javascript修改每一个具体样式的时候,都会进行一次重绘,如果是修改了2.2中的顽固属性,还会进行回流,这给浏览器造成了巨大的负担。例如,我们需要用这样的代码: 
坏代码:
function selectAnchor(element){ 
var changeDiv = document.getElementById(element);
changeDiv.style.color = ‘#093′;
changeDiv.style.background = ‘#eee’;
changeDiv.style.height = ’200px’;
}

好代码:

CSS:
changeDiv {
background: #eee;
color: #093;
height: 200px;
}

JavaScript:
function selectAnchor(element) {
document.getElementById(element).className = ‘changeDiv’;
}

回流(回顾下东西都是转载的)

 

posted on 2013-08-03 09:50 无觉-李敏 阅读(...) 评论(...) 编辑 收藏