当我突然偶然发现一些奇怪的渲染性能问题时,我正在草拟一个想法。
我创建了一个 CodePen 来说明这个想法,它是一个导航元素,当它与页脚“碰撞”时,它会从 position: fixed
更改为 position: static
。所以它看起来像是页脚将其向上推。
当位置模式改变时,没有错误的 JS(我试过没有 JS)会降低性能。这就是我发现的 CSS 属性,它使它变得很多 滚动时浏览器呈现的重量更重。
在 IE10/Firefox 中,它似乎工作正常,在 Chrome 中,可以在 webinspectors fps-meter 中看到渲染要重得多。
虽然,这是我发现的最奇怪的;在 Safari 中,渲染速度很多慢。 但是 添加一个带有position: fixed
的额外元素可以让Safari 渲染得最好。 (Safari 版本 9.0.1 (11601.2.7.2))
带有额外的固定元素:http://codepen.io/slebbo/pen/GpPRQX
没有额外的固定元素:http://codepen.io/slebbo/pen/avPZxy
我的谷歌技能对这个没有帮助,任何人都可以回答这种行为。特别是对于 Safari,这真的很时髦。
最佳答案
你应该是硬件加速元素,它会产生这些问题,特别是固定元素需要在滚动上重新绘制。当您将背景图像设置为覆盖等时也是如此。
您可以使用:
背面可见性:隐藏;
甚至:
will-change: transform;
关于html - 静态定位会大大降低性能(?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33676987/