Jank 与速度

Question

我正试图击败此页面上的垃圾：http://mawo.olkusz.pl/。 Jank 仅在移动设备上出现，基本上在所有手机上都出现，甚至在 Samsung Galaxy 6 上也是如此。当页面为 "loaded" 时，我使用 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

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

Answer 2

如果性能是一个问题，我会尝试在没有 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 中对大约 65kb 依赖项的需求和速度。

Jank 与速度

Jank with Velocity

javascript

html

css

velocity.js