Performanță pe dispozitive mobile

De câteva zile mă tot lupt cu un site cu tot felul de animații, parallax și alte căcaturi eyecandy și consumatoare de resurse. Dacă pe PC nu se simțea nici o problemă, pe iPad totul era extrem (dar EXTREM!) de lent. După ce am optimizat și răs-optimizat codul JS (requestAnimationFrame, caching la greu etc; că tot veni vorba, folosește requestAnimationFrame întotdeauna!) mi-am adus aminte de articolul ăsta. Am mai folosit translate la câteva proiecte înainte, dar mai mult ca fiță, nu din motive de performanță (nu se simțea nici o diferență între top și translate), prin urmare nu prea luasem în calcul varianta asta când lucram la optimizare…

Este incredibil ce diferență de performanță poate exista între cele două modalități de animație! Totul a devenit brusc, extrem de smooth, până și pe iPad 1.

Dacă vrei să oferi un fallback (și nu vrei să încarci Modernizr), iată o modalitate simplă de a detecta suportul pentru transform:

function cssTransformIsSupported() {
  var el = document.createElement('p');
  var has3d;
  var transforms = {
    'webkitTransform':'-webkit-transform',
    'OTransform'     :'-o-transform',
    'msTransform'    :'-ms-transform',
    'MozTransform'   :'-moz-transform',
    'transform'      :'transform'
  };

  document.body.insertBefore(el, null);

  for (var t in transforms) {
    if (el.style[t] !== undefined) {
      el.style[t] = "translate3d(1px,1px,1px)";
      has3d       = window.getComputedStyle(el).getPropertyValue(transforms[t]);
    }
  }

  document.body.removeChild(el);

  return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
}

document.documentElement.className = document.documentElement.className + ( cssTransformIsSupported() ? ' has-css-transform' : ' no-css-transform' );

.has-css-transform div {
  transform:translate3d(0px, 200px, 0px);
}
.no-css-transform div {
  top:200px;
}