Html 为什么Facebook topbar带有位置：修复了不重新绘制的问题

我正在优化我的滚动性能。我对topnav使用了

position:fixed

，当我上下滚动时，我注意到一些性能问题。我使用了

Show paint rectangles

，它清楚地显示了导航一直在被重新绘制。然而，当我查看

Facebook.com

时，他们的导航栏也在使用

position:fixed

，但当我上下滚动时，我没有看到他们的导航栏被重新绘制

我现在无法查看facebook网站（他们目前正在进行技术工作），但我90%确定他们正在为navbar（或任何其他与转换相关的属性）应用

backface visibility:hidden

。这会将元素移动到专用的堆叠上下文层，并防止其连续重新绘制

---

您可以使用

Show paint rectangles

-（只需注释

backface visibility

属性并查看差异）来检查这个丑陋的演示。

它完全可以工作，性能要好得多。但我不知道为什么？如果我把它放进去会有副作用吗？没有，没有副作用。你可以在这里阅读专门针对这个问题的文章，其实我忘了，还有一个副作用——亚像素渲染问题。它使一些元素变得模糊。但95%的时候你看不到任何区别。