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

1. Bonnes pratiques, optimisations et outils
PERFORMANCES

2. CSS
Can I haz speed?

3. RENDU PAR LE
NAVIGATEURPetit rappel sur le parsing, le layout, les layers et le painting

5. ANIMATIONSForcer l'utilisation du GPU: "Hack" translate3d
.view {
‐webkit‐transform: translateZ(0);
}

6. 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

7. ANIMATIONS (3)Aidez le navigateur :
Propriété CSS will-change
.slide {
will‐change: transform;
}
A l'avenir, l'API Web Animations pourra servir

8. 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

9. 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';

10. JAVASCRIPT
Can I haz speed too?

11. 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

12. 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

13. LEAKS (2)Attention aux event listeners! Si vous
addEventListener, assurez vous que:
Le propriétaire/élement DOM est supprimé
ou que vous removeEventListener

14. class MyComponent {
updateOrientation(event) {
// Whatever
}
componentDidMount(url) {
window.addEventListener("deviceorientation", this.updateOrientation, false);
}
componentWillUnmount(url) {
window.removeEventListener("deviceorientation", this.updateOrientation);
}
}

15. angular.module('myApp')
.controller('MyCtrl', function ($scope, ...) {
var checkInterval = $interval(checkProgress, 700);
function checkProgress() {
// Whatever
}
$scope.$on('$destroy', function() {
$interval.cancel(checkInterval);
});
}

16. LE DEBUGGER
CHROME

17. DEMO TIME
CLICK ME COMPUTE
"Click me" ajoute des objets => Heap timeline, Heap snapshot
"Compute" fait un long calcul => Profiler (Tree & Flamechart)

18. Premature optimization is
the root of all evil
- Donald Knuth
Ne soyez pas
prématurement
pessimistes