javascript - Jank 与速度

Question

我正试图击败此页面上的垃圾:http://mawo.olkusz.pl/ . Jank 仅在移动设备上出现，基本上在所有手机上出现，甚至在三星 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 。我也没有设法从谷歌的时间轴中获得任何见解。知道为什么这个简单的动画如此简陋吗？我已上传非最小化版本的页面以进行调试。

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 的依赖项的需求。