Question

我试图在这个页面上击败垃圾：http://mawo.olkusz.pl/。 Jank只适用于手机和手机基本上在所有手机上，甚至在三星Galaxy 6上。当页面加载＆＃34;时，我用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。此外，我还没有从谷歌的时间轴中获得任何见解。任何想法为什么这个简单的动画是如此janky？我已经上传了非最小化版本的页面以进行调试。

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;

对于'.site-loader.animating'：

transform: translateY(-100%);

对于制作，您需要确保并添加CSS所需的任何浏览器前缀...如果需要，可以使用大量工具和资源来自动执行该过程。

现在这应该是非常无法使用的，因为我们正在使用支持GPU的CSS3动画，并且我们已经在jQuery和Velocity中删除了大约65kb的依赖关系。

Answer 2

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

Jank与Velocity

2 个答案: