html - 为什么 Facebook topbar 的位置是 :fixed not doing repaint

Question

我正在优化我的滚动性能。我使用 position:fixed 作为我的顶部导航，我注意到当我上下滚动时会出现一些性能问题。我使用 Show paint rectangles，它清楚地表明导航一直在重新绘制。但是，当我查看 Facebook.com 时，他们的导航栏也在使用 position:fixed 但当我上下滚动时，我没有看到他们的导航栏被重新绘制。

Answer 1

我现在无法查看 facebook 网站(他们目前有技术工作)，但我 90% 确定他们正在为导航栏(或任何其他与转换相关的属性)。这会将元素移动到专用的堆叠上下文层，并防止它连续重绘。

您可以使用 Show paint rectangles- http://codepen.io/suez/pen/fe2e45b3a4b17b723aa8b797178416b7?editors=010 检查这个丑陋的演示(只需注释 backface-visibility 属性并查看区别)。