什么影响浏览器页面渲染性能？

Question

通过浏览器呈现性能我的意思是：滚动，以动画方式移动元素，z顺序更改。

特别是当我在页面上移动带有左上样式的图像时，我在Firefox 3.6和IE8中得到了极大的减速。我对Chrome 8没有任何问题。

使用firebug我尝试逐个隐藏页面元素，迄今为止最大的改进来自我使用的页面宽背景Jpeg。我想知道它是如何影响性能的，因为图像正在移动到另一个遮挡背景的元素之上。另一个元素是部分透明的PNG（但不是在运动发生的部分），也许这与它有关？我使用了很多透明度和CSS3效果，不知怎的，它们减慢了一切，甚至看起来完全不相关的东西。

总的来说，我得到的结论是，当某些内容正在移动时，浏览器会重新渲染整个页面，而不仅仅是受影响的像素。

有关为什么会发生这种情况的任何有根据的猜测？

编辑位于我的动态影像下方的任何图片或文字都会导致它在经过时减慢很多。运动图像本身具有透明背景，但将其更改为不透明几乎没有效果。

Answer 1

在固定背景上移动透明元素（特别是带阴影的元素）会强制每帧重新构建它。另一方面，不透明的无影元素可以用简单的blit移动。

如果你想在大多数浏览器中看到一个巨大的减速，请创建一个包含border-radius和box-shadow元素的页面，然后将页面背景设置为background-attachment：fixed。