Performance HTML5 : Plus vite pour le client, moins de ressources serveur

Performance HTML5Les nouvelles technologies disponibles dans tous les navigateurs majeurs d’aujourd’hui permettent d’aller au-delà du Web tel qu’on le connaît et de simplifier les applications en ligne en déplaçant plus de logique du côté client.

Prenons par exemple une application web qui génère une image personnalisée pour un concours avec le nom et la photo de l’utilisateur. Autrefois, nous devions absolument générer l’image du côté serveur, en utilisant la librairie GD de PHP.

Le même processus peut désormais être complété du côté client, en Javascript, grâce à un nouvel élément de HTML5, le Canvas. Ce cheminement différent apportera plusieurs avantages, en voici quelques-uns :

Prévisualisation en temps réel
Puisque le rendu de l’image se fait du côté client, cela rend la tâche beaucoup plus simple pour afficher une prévisualisation en temps réel puisqu’on n’a pas à effectuer des requêtes au serveur pour chaque mise à jour.

Diminution du temps de programmation nécessaire
Le code de l’application sera plus léger puisqu’on centralise toute la logique du côté client. Autrement dit, cela nous épargne le développement de la logique de synchronisation entre le client et le serveur. Donc, une fois ces nouvelles technologies maîtrisées, il sera possible de développer des applications complexes de meilleure qualité, de les réaliser plus rapidement et avec moins d’efforts.

Performance serveur améliorée
Le processus de génération, étant déplacé du côté client, permet de diminuer considérablement la charge du serveur, qui n’a désormait plus qu’à recevoir par téléchargement l’image générée. Cela fera la différence pour une application qui pourrait être utilisée par des centaines, voire des milliers d’usagers simultanément.

Performance client souvent améliorée
Considérant la puissance moyenne des postes des utilisateurs pouvant naviguer le Web sous un navigateur HTML5, il est fort probable que l’application répondra plus rapidement en effectuant le processus du côté client.

En effet, la mise à jour du contenu pourra s’effectuer en mémoire et cela sans faire de requête au serveur. Toutefois, certaines applications ayant un traitement plus laborieux à effectuer, pourraient être moins performantes sur un poste client n’ayant pas les ressources nécessaires. Il va donc de soit de toujours effectuer une analyse ainsi que des tests adéquats avant de prendre une telle décision.

Note sur la compatibilité
Si votre projet est admissible à ce genre de procédé, il faut aussi tenir compte du coût de ce choix. En effet, comme pour notre exemple, les anciens navigateurs ne supportent pas tous l’élément Canvas, comme Internet Explorer 8. Toutefois, si comme Google vous adoptez la politique de limiter votre support aux 2 dernières versions des navigateur populaires (source), vous ne rencontrerez pas cette problématique.

Autres fonctionnalités
L’exemple donné traite de l’élement Canvas à contexte 2D, qui est l’un des plus importants dans les nouvelles technologies disponibles avec HTML5. Toutefois, tout un éventail d’outils est aussi disponible pour permettre le même genre d’améliorations côté client, soit le CSS3, le rendu de SVG, les Canvas à contexte 3D, le storage de données local et les base de données SQL locales.

Conclusion
J’espère que ce billet vous a éclairé et fait réfléchir sur le sujet. N’hésitez pas à commenter pour obtenir des précisions ou plus de détails sur certains aspects.

Si vous devez faire un choix technologique pour une autre fonctionnalité, je vous invite à consulter http://caniuse.com/, qui est une source rapide et fiable pour connaitre les technologies supportées par les différentes versions de navigateurs.

Laisser un commentaire

Votre adresse courriel ne sera pas publiée. Entrez votre nom, courriel et votre commentaire.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">