HTML5视频导致chrome卡住CSS过渡

时间：2014-05-08 04:23:26

标签： jquery html5 google-chrome video

我有一个循环播放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;
}
}

1 个答案:

答案 0 :(得分：7)

每个卷轴上的整个屏幕都是painting。

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

  

绘画

     

在绘画阶段，遍历渲染树，渲染器＆＃34; paint（）＆＃34;调用方法以在屏幕上显示内容。绘画使用UI基础设施组件   source

您可以做一些事情：

  1. 通过使容器不是fixed来保持您的视频包含在您的div和页面的顶部。
  2. 如果可以，请使用较少的固定元素。
  3. 使用css转换translate()而不是position上的转换。
  4. 使用translateZ(0);或css will-change
    5. 将固定元素宣传到自己的图层

    以性能为准的代码

    .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);
    }
}

    将元素提升为图层

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

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

    之前和之后的表现。

    我已经在chrome中的开发者工具中更改了网站上的代码，经过一些小的css更改后，我们从<30到60fps，继承图表：

    之前：

    before

    后：

    after

    在丢失一些固定元素后，你会从＆lt; 30fps 变为稳定的 60fps ，将视频包含在div中，提升图层并使用translate()代替position: left对过渡的影响。

    请注意，您不希望将所有内容放在图层上，因为过多使用此图也会影响您的效果。所以请适度使用

    结账单

      

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

    我不同意你的看法，如果你对网站的性能进行编码，那么即使有本机性能问题（我不认为html5 / chrome有），你的性能也会更好或更好。如果我错了，请纠正我。

    进一步阅读的链接：

相关问题
最新问题