jquery - HTML5 视频导致 chrome 停顿 CSS 过渡

Question

我有一个页面正在循环播放 HTML5 视频。当您向下滚动页面时，jQuery 会向 nav 元素添加一个类。然后 CSS 将过渡应用到 th 的 left 属性。在 Firefox 中，它运行良好，但 Chrome 会断断续续地播放动画，除非您继续滚动，否则无法完成动画。

我知道 Chrome 和 HTML5 视频存在很多性能问题。 Like this但我还没有找到很好的解决方案。

删除背景视频会导致 Chrome 中出现流畅的动画。但是，这不是一个非常沉重的视频(360p，~1MB)我想知道是否有比我正在做的更好的方法来应用类或执行动画，这可能有助于 Chrome 的性能。

这是一个正在进行中的网站的链接(它大部分没有样式，所以请不要讨厌 :)

My Project

我的 HTML

<!-- Left Bar Menu -->
<div class="leftbar scrollHandle">
</div>

<!-- Contains Header Video on Loop -->
<div class="videocontainer">
<video class="videobackground" poster="{{ "assets/video/poster.jpg" | asset_url }}" autoplay="true" loop="true">
    <source type="video/mp4" src="{{ "assets/video/360.mp4" }}" />
    <source type="video/webm" src="{{ "assets/video/360.webm" }}" />
</video>
</div>

我的Javascript:

var containerPosition = $( ".container" ).offset();

$( window ).scroll(function() {
if ( $( window ).scrollTop() > containerPosition.top ) {
    $( ".scrollHandle" ).addClass( "show" );
} else {
    $( ".scrollHandle" ).removeClass( "show" )
};
});

我的 CSS:

.leftbar {
position: fixed;
top: 0;
left: -$leftbarwidth;
transition: left 500ms;
z-index: 2;
width: $leftbarwidth;
height: 100%;
background-color: $grey;
&.show {
    left: 0;
    transition: left 500ms;
}
}

Answer 1

整个屏幕是painting在每个卷轴上。

这是(在您的情况下)由页面上的 fixed 元素引起的。固定元素会导致在每次滚动时都进行绘制，因为固定元素保持在原位，而下方的内容会移动，导致浏览器必须重新绘制屏幕才能正确显示内容。

Painting

In the painting stage, the render tree is traversed and the renderer's "paint()" method is called to display content on the screen. Painting uses the UI infrastructure component.
source

您可以做几件事:

1. 通过使容器不固定，将您的视频包含在您的 div 和页面的顶部。
2. 尽可能少用固定元素。
3. 使用 css 转换 translate() 而不是 position 上的转换。
4. 使用 translateZ(0); 或 css will-change 将固定元素提升到它们自己的层

考虑性能的代码

.leftbar {
    position: fixed;
    top: 0;
    left: -$leftbarwidth;
    z-index: 2;
    width: $leftbarwidth;
    height: 100%;
    background-color: $grey;
    
    /* for performance improvements: */
    -webkit-transition: -webkit-transform 0.5s ease;
    -webkit-transform: translateZ(0); /* promotes to a layer */
    &.show {
        -webkit-transform: translate3d($leftbarwidth, 0, 0);
    }
}

将元素提升到图层

将元素提升到它们自己的层将启动硬件加速而不是使用 CPU，如果 fixed 元素有自己的层，它也不会在每次滚动时重新绘制屏幕。

-webkit-transform: translateZ(0); /* promotes to a layer */

前后的表现。

我已经在 chrome 的开发人员工具中实时更改了网站上的代码，在一些小的 css 更改之后，我们从 <30 到 60fps，下面是图表:

之前:

之后:

在丢失一些固定元素后，您从 <30fps 变为稳定的 60fps，将视频包含到其 div，提升图层并使用 translate() 而不是 position: left 转换。

请记住，您不想将所有内容都放在一个层上，因为使用过多也会影响您的性能。所以要适度使用

结束语

I'm aware there are lots of performance issues with Chrome and HTML5video...

我不同意你的观点，如果你在编写网站时考虑到性能，你将获得更好或更好的性能，即使存在 native 性能问题(我认为 html5/chrome 没有。纠正我如果我错了)

进一步阅读的链接:

• http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
• http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
• http://www.html5rocks.com/en/tutorials/speed/scrolling/
• http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
• http://www.aerotwist.com/blog/bye-bye-layer-hacks/没有更多的图层黑客!