静态定位会大大降低性能（？）
Static positioning drastically slows performance (?)
当我突然偶然发现一些奇怪的渲染性能问题时，我正在构思一个想法。
我创建了一个 CodePen 来说明这个想法，它是一个导航元素，当它带有页脚 "collides" 时，它会从 position: fixed 变为 position: static。所以它看起来像是页脚将其向上推。
当位置模式改变时，没有错误的 JS（我试过没有 JS）会降低性能。这是我发现 CSS 属性 的原因
滚动时浏览器渲染更重。
在 IE10/Firefox 中它似乎工作正常，在 Chrome 中可以在 webinspectors fps-meter 中看到它的渲染要重得多。
虽然，这是我发现的最奇怪的；在 Safari 中，渲染速度很多。 BUT 添加一个带有 position: fixed 的额外元素使 Safari 渲染效果最好。 (Safari 版本 9.0.1 (11601.2.7.2))
带有额外的固定元素：http://codepen.io/slebbo/pen/GpPRQX
没有额外的固定元素：http://codepen.io/slebbo/pen/avPZxy
我的 google 技能对这个没有帮助，任何人都知道这种行为的答案。尤其是 Safari，这真的很时髦。
您应该是出现这些问题的硬件加速元素，特别是需要在滚动上重新绘制的固定元素。当您将背景图像设置为覆盖等时也是如此。
您可以使用：
backface-visibility: hidden;
甚至：
will-change: transform;
当我突然偶然发现一些奇怪的渲染性能问题时，我正在构思一个想法。
我创建了一个 CodePen 来说明这个想法，它是一个导航元素，当它带有页脚 "collides" 时，它会从 position: fixed 变为 position: static。所以它看起来像是页脚将其向上推。
当位置模式改变时，没有错误的 JS（我试过没有 JS）会降低性能。这是我发现 CSS 属性 的原因 滚动时浏览器渲染更重。
在 IE10/Firefox 中它似乎工作正常，在 Chrome 中可以在 webinspectors fps-meter 中看到它的渲染要重得多。
虽然，这是我发现的最奇怪的；在 Safari 中，渲染速度很多。 BUT 添加一个带有 position: fixed 的额外元素使 Safari 渲染效果最好。 (Safari 版本 9.0.1 (11601.2.7.2))
带有额外的固定元素：http://codepen.io/slebbo/pen/GpPRQX
没有额外的固定元素：http://codepen.io/slebbo/pen/avPZxy
我的 google 技能对这个没有帮助，任何人都知道这种行为的答案。尤其是 Safari，这真的很时髦。
您应该是出现这些问题的硬件加速元素，特别是需要在滚动上重新绘制的固定元素。当您将背景图像设置为覆盖等时也是如此。
您可以使用：
backface-visibility: hidden;
甚至：
will-change: transform;