Jank with Velocity

Question

我正在努力打败这个页面上的垃圾：http://mawo.olkusz.pl/。詹只是在移动&基本上在所有手机上，甚至在三星Galaxy 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。此外，我也没能从谷歌的Timeline中获得任何见解。你知道为什么这个简单的动画如此刺耳吗？我已经上传了该页面的非最小化版本以进行调试。

Answer 1

如果性能是一个问题，我会尝试在没有Velocity，甚至没有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-loader"添加样式（显然可以使用你想要的任何宽松或计时功能）：

transition: transform 1.5s 0.5s ease;

对于".站点加载程序.动画"：

transform: translateY(-100%);

对于生产，您需要确保并添加CSS所需的任何浏览器前缀。。。如果需要的话，有大量的工具和资源可以实现这一过程的自动化。

由于我们使用的是GPU支持的CSS3动画，并且我们已经消除了jQuery和Velocity中大约65kb的依赖关系，所以现在应该是非常没有jank了。

Answer 2

尝试在window.onload事件中使用0秒的setInterval（）。这可能看起来很粗糙，但它在过去曾被用于解决其他一些加载问题。它将创建一个单独的线程，在多核CPU中，在进行另一次渲染时不会冻结动画。然而，这可能不起作用，但很难测试，因为我无法在自己的服务器上重现问题，而且我甚至不确定效果有多主观