HTML5视频导致chrome卡住CSS过渡

Question

我有一个页面正在循环播放HTML5视频.当您向下滚动页面时,jQuery会向nav元素添加一个类.然后CSS将转换应用于th的left属性.在Firefox中它运行得很好,但是除非你继续滚动,否则Chrome会破坏动画并且无法完成动画.

我知道Chrome和HTML5视频存在很多性能问题. 像这样但我没有找到一个很好的解决方案.

删除背景视频会导致Chrome中的动画流畅.但是,它不是一个非常沉重的视频(360p,~1MB)我想知道是否有更好的方式来应用课程或执行动画,而不是我正在做的可能有助于Chrome的性能.

这是一个正在进行中的网站的链接(它主要是非风格的,所以请不要讨厌:)

我的项目

我的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

整个屏幕都在每个卷轴上绘画.

这是因为fixed您的页面上有元素(在您的情况下).固定元素将在每个滚动上导致绘制,因为固定元素保持在原位并且下面的内容移动导致浏览器必须重新绘制屏幕以便正确显示内容.

绘画

在绘画阶段,遍历渲染树并调用渲染器的"paint()"方法以在屏幕上显示内容.绘画使用UI基础结构组件.
资源

你可以做一些事情:

1. 通过不使用容器,将视频包含在div和页面的顶部fixed.
2. 如果可以,请使用较少的固定元素.
3. 使用css转换translate()而不是转换position.
4. 使用translateZ(0);或css 将固定元素提升到自己的图层

代码兼顾性能

.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转换.

请记住,您不希望将所有内容放在图层上,因为过多地使用它也会影响您的性能.所以要适度使用

结束笔记

我知道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/不再是层层黑客!