什么类型的活动会触发使用DOM的网页回流?
似乎有不同的观点。根据http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/的说法,这种情况时有发生
添加或删除DOM节点时的
然而,根据http://dev.opera.com/articles/view/efficient-javascript/?page=3的说法,只有在已经有回流操作排队时,进行测量才会触发回流。
还有没有人有更多的想法?
发布于 2009-08-14 14:33:38
这两篇文章都是正确的。可以放心地假设,当您正在做一些合理地要求DOM中元素的尺寸的事情时,您将触发回流。
此外,据我所知,这两篇文章都说了同样的话。
第一篇文章说在以下情况下会发生回流:
当您检索必须计算的度量时,例如访问 offsetWidth、clientHeight或任何计算的CSS值(通过符合DOM的浏览器中的getComputedStyle()或IE中的currentStyle ),而DOM更改正在排队等待进行。
第二篇文章说:
如前所述,浏览器可能会为您缓存多个更改,并且仅在这些更改都已完成时回流一次。但是,请注意,对元素进行测量的将强制它回流,因此测量将是正确的。这些变化可能会也可能不会明显地重新绘制,但回流本身仍然必须在幕后发生。
此效果是在使用offsetWidth,等属性或getComputedStyle.等方法进行测量时产生的即使不使用这些数字,只要在浏览器仍在缓存更改时使用这些数字中的任何一个,就足以触发隐藏的回流。如果重复进行这些测量,您应该考虑只进行一次测量,并存储结果,以便以后使用。
我认为这和他们之前说的意思是一样的。Opera将尽最大努力为您缓存值并避免回流,但您不应该依赖它这样做的能力。
对于所有的意图和目的,只要相信他们说的话,当他们说所有三种类型的交互都会导致回流时。
干杯。
发布于 2010-09-21 23:20:53
查看Understanding Internet Explorer Rendering Behaviour的“由属性读取访问触发的渲染”部分,其中IE中的以下代码将导致渲染活动。
function askforHeight () {
$("#lower").height();
}
发布于 2009-02-04 07:45:02
document.body.style.display = 'none';
document.body.style.display = 'block';
这通常会解决那些令人费解的布局错误。
https://stackoverflow.com/questions/510213
复制相似问题