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 元素引起的（在您的情况下）。固定元素会在每个滚动条上进行绘制，因为固定元素会保持原位，并且下方的内容会移动，导致浏览器必须重新绘制屏幕才能正确显示内容。

绘画

在绘画阶段，遍历渲染树，调用渲染器的“paint()”方法在屏幕上显示内容。绘画使用 UI 基础架构组件。
source

您可以做一些事情：

1. 通过使容器不是 fixed，将视频包含在 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 更改之后，我们从

之前：

之后：

在丢失一些固定元素、将视频包含到其 div、提升图层并使用 translate() 而不是 @987654340 之后，您从 变为稳定的 60fps @ 关于过渡。

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

结束语

我知道 Chrome 和 HTML5 存在很多性能问题 视频...

我不同意你的观点，如果你在编写网站时考虑到性能，你将获得更好或更好的性能，即使存在本机性能问题（我认为 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/ 没有更多的层黑客！