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

Question

我所说的浏览器渲染性能指的是：滚动、以动画方式移动元素、z 顺序变化。

在 Firefox 3.6 和 IE8 中，当我在页面上移动带有顶部、左侧样式的图像时，速度尤其慢。我对 Chrome 8 没有任何问题。

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

总的来说，我的印象是，当某些东西移动时，浏览器会重新渲染整个页面，而不仅仅是受影响的像素。

对于为什么会发生这一切有任何有根据的猜测吗？

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

Answer 1

在固定背景上移动透明元素（尤其是带有阴影的元素）会强制每帧重新合成它。另一方面，不透明的无阴影元素可以通过简单的 blit 移动。

如果您想在大多数浏览器中看到速度大幅下降，请制作一个包含一堆具有边框半径和框阴影的元素的页面，然后将页面的背景设置为 background-attachment:fixed。