Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Train your dog to do tricks, check out these great dog training tips!
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Performances

Download to read offline

Good practices, optimisations and tools for enhancing performances of Javascript webapp, games and hybrid mobile app.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Performances

  1. 1. Bonnes pratiques, optimisations et outils PERFORMANCES
  2. 2. CSS Can I haz speed?
  3. 3. RENDU PAR LE NAVIGATEURPetit rappel sur le parsing, le layout, les layers et le painting
  4. 4. ANIMATIONSForcer l'utilisation du GPU: "Hack" translate3d .view {    ‐webkit‐transform: translateZ(0);  }
  5. 5. ANIMATIONS (2)Appliquer la propriété backface-visibilitysur les div qui prennent tout l'écran/qui cachent le reste .view {    backface‐visibility: hidden;    ‐webkit‐backface‐visibility: hidden;  } => De 10 à 60 fps sur une tablette Nexus pour un fading
  6. 6. ANIMATIONS (3)Aidez le navigateur : Propriété CSS will-change .slide {    will‐change: transform;  } A l'avenir, l'API Web Animations pourra servir
  7. 7. ASSETSImages énormes + device non retina = ça rame Utilisez des media query: @media  (‐webkit‐min‐device‐pixel‐ratio: 2),  (min‐resolution: 192dpi) {      /* Retina‐specific stuff here */  } ou des mixins pour sass: https://github.com/kaelig/hidpi
  8. 8. ASSETS (2)Au premier affichage d'un écran, les images (notamment backgrounds, boutons...) ne sont pas forcéments prêts Forcer le navigateur à précharger les images: var myImage = new Image(100, 200);  myImage.src = 'picture.jpg';
  9. 9. JAVASCRIPT Can I haz speed too?
  10. 10. LEAKSPas de new, malloc !=ne pas savoir comment on gère la mémoire Identifiez bien qui est le propriétaire de chaque objet delete/ null-ifiez les objets pour qu'ils soient garbage collectés
  11. 11. class SoundManager {    constructor() {      this._sounds = {};    }    playAudio(url) {      this._sounds[url] = new Howler({...});    }    releaseGarbage(url) {      for(var p in this._sounds) {        if (this._sounds[p].canBeDestroyed()) {          delete this._sounds[p];        }      }    }  } On libère régulièrement les objets inutilisés
  12. 12. LEAKS (2)Attention aux event listeners! Si vous addEventListener, assurez vous que: Le propriétaire/élement DOM est supprimé ou que vous removeEventListener
  13. 13. class MyComponent {    updateOrientation(event) {      // Whatever    }    componentDidMount(url) {      window.addEventListener("deviceorientation", this.updateOrientation, false);    }    componentWillUnmount(url) {      window.removeEventListener("deviceorientation", this.updateOrientation);    }  }
  14. 14. angular.module('myApp')  .controller('MyCtrl', function ($scope, ...) {    var checkInterval = $interval(checkProgress, 700);    function checkProgress() {      // Whatever    }    $scope.$on('$destroy', function() {      $interval.cancel(checkInterval);    });  }
  15. 15. LE DEBUGGER CHROME
  16. 16. DEMO TIME CLICK ME COMPUTE "Click me" ajoute des objets => Heap timeline, Heap snapshot "Compute" fait un long calcul => Profiler (Tree & Flamechart)
  17. 17. Premature optimization is the root of all evil - Donald Knuth Ne soyez pas prématurement pessimistes

Good practices, optimisations and tools for enhancing performances of Javascript webapp, games and hybrid mobile app.

Views

Total views

255

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×