速度Jank

Question

我试着在这个页面上打败垃圾：http://mawo.olkusz.pl/。Jank只在手机上运行&基本上在所有手机上，甚至在三星Galaxy 6上。当页面被“加载”时，我会隐藏初始的蓝色屏幕。下面是执行此操作的代码：

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

我尝试了无数次黑客攻击，比如wain的will-change。而且，我也没有从谷歌的“时间线”中获得任何洞察力。知道为什么这个简单的动画这么简陋吗？我已经上传了不最小化版本的页面进行调试。

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 loader”的样式(显然可以使用您想要的任何简化或计时功能)：

transition: transform 1.5s 0.5s ease;

以及“..site loader.animating.动画”：

transform: translateY(-100%);

对于生产，您需要确保并添加工具和资源存在的CSS...plenty中所需的任何浏览器前缀，以便在需要的情况下自动化该过程。

现在这应该是完全免费的，因为我们使用的是支持GPU的CSS3动画，并且我们已经消除了对jQuery和jQuery中大约65 in的依赖项的需求。

Answer 2

尝试在您的setInterval事件中使用0秒钟的window.onload ()。这可能看起来很麻烦，但是在过去，它已经被用来解决一些其他的负载问题。它将创建一个单独的线程，在多核CPU中，当另一个呈现发生时，它不会冻结您的动画。然而，这可能不起作用，但很难测试，因为我无法在自己的服务器上重现问题，而且我甚至不确定其效果有多主观。