Jank with Velocity

Question

私はこのページのゴミを倒そうとしています：http://mawo.olkusz.pl/。 Jankは基本的に携帯電話&にのみ、すべての携帯電話、サムスンギャラクシー6でさえ。ページが読み込まれるとき、私はVelocityで初期のブルースクリーンを隠す。ここではそれをしないコードは次のとおりです。

function fn_siteLoader() { 
    var $siteLoader = $('.site-loader'); 

    $siteLoader.velocity({ 
     translateZ: 0, 
     translateY: '-100%' 
    }, { 
     queue: false, 
     delay: 500, 
     duration: 1500, 
     easing: [0.710, 0.100, 0.3, 1.000], 
     complete: function() { 
     $(this).remove(); 
     $body.addClass('is-loaded'); 
     } 
    }); 
    } 
    $(window).on('load', function() { 
    fn_siteLoader(); 
    }); 

私はウェインでwill-changeのように、数多くのハックを試してみました。また、私はGoogleのタイムラインから何の洞察も得られなかった。このシンプルなアニメーションが大変な理由は何ですか？私はデバッグのためにページの最小化されていないバージョンをアップロードしました。

Answer 1

パフォーマンスが懸念される場合は、私はそのことについてはベロシティせずにこれをやって、さらにjQueryの試してみた：

function whichTransitionEvent(){ 
    var t; var el = document.createElement('fakeelement'); 
    var transitions = { 
    'transition':'transitionend', 
    'OTransition':'oTransitionEnd', 
    'MozTransition':'transitionend', 
    'WebkitTransition':'webkitTransitionEnd' 
    } 
    for(t in transitions){ 
    if(el.style[t] !== undefined){ 
     return transitions[t]; 
    } 
    } 
} 

function fn_siteLoader() { 
    var siteLoader = document.querySelector('.site-loader'); 
    siteLoader.classList.add('animating'); 

    var transitionEvent = whichTransitionEvent(); 
    transitionEvent && e.addEventListener(transitionEvent, function() { 
    siteLoader.parentNode.removeChild(siteLoader); 
    document.body.classList.add('is-loaded'); 
    }); 
} 

document.addEventListener('DOMContentLoaded', fn_site loader); 

次に、あなたのCSSにあなただけの「.site-のスタイルを追加する必要がありますローダー '（明らかにあなたが好きな緩和やタイミング機能を使用）：

transition: transform 1.5s 0.5s ease; 

そしてのための' .site-loader.animating '：

transform: translateY(-100%); 

プロダクションでは、CSSに必要なブラウザプレフィックスを確実に追加してほしいでしょう。必要に応じて、そのプロセスを自動化するツールやリソースがたくさんあります。

私たちはGPU対応のCSS3アニメーションを使用しているので、今はジャンクフリーでなければなりません。また、jQueryとVelocityで約65kbの依存関係を削除する必要があります。

Answer 2

window.onloadイベントで0秒のsetInterval（）を使用してみてください。これはハッキーに見えるかもしれませんが、過去にいくつかの負荷に関する問題を回避するために使用されてきました。別のスレッドを作成します。マルチコアCPUでは、別のレンダリングが行われている間にアニメーションがフリーズされません。しかし、これはうまくいかないかもしれませんが、自分のサーバー上で問題を再現できないため、テストするのは難しいです。さらに、その主観的な効果がどういうものなのかもわかりません。