Comprendre l’affichage d’une page Web

Pour appréhender les pistes d’optimisation, il va falloir faire un peu de technique, pour comprendre le séquencement et les processus impliqués dans la construction d’une page Web affichée sur le navigateur.

Tout d’abord les acteurs de la pièce :

  • Le serveur : il est en général très rapide mais il est seul face à tous ses clients !
  • Le réseau : rapide ou lent, il détermine à quel débit les données peuvent être échangées entre le serveur et le client. Intranet à 1 Gb/s ou Edge à 400Kb/s, il y a un facteur 2000 entre les 2.
  • La latence : c’est le temps nécessaire pour le voyage du client au serveur et vice versa.  C’est elle qui conditionne un vrai dialogue entre le client et le serveur. Quand une latence de 1ms permet 500 échanges par seconde, une latence de 50ms demandera près d’ 1 minute pour le même travail.
  • Le navigateur client,  sa capacité à exploiter le matériel (CPU et mémoire),  est le point clé dans la production du résultat final.

 

Les 5 étapes d’un échange navigateur – serveur

Concrètement, voici les étapes clés lors d’un échange entre le navigateur et le serveur Web :

Le navigateur soumet sa requête au serveur

Le serveur construit le résultat

Le serveur met le résultat en forme HTML ou plus simplement JSON

Le client télécharge le résultat

Le client analyse le résultat et l’affiche

Ce processus est invariable, séquentiel, et peu de phases peuvent être traitées en parallèle.

 

Des navigateurs inégaux dans leur capacité de traitement des pages Web

Les premières étapes ne concernent que le serveur, le navigateur n’a pas réellement d’influence.

Néanmoins, une fois le traitement commencé, le serveur va le mener à son terme, quoique que fasse le client, il est donc important que l’ergonomie soit claire pour l’utilisateur : pas de page blanche figée qui pousse l’utilisateur à soumettre à nouveau sa requête.

Une fois le traitement du serveur terminé,  si  votre application a demandé un flux HTML finalisé, le volume transféré vers le client sera de l’ordre de 10 fois la taille des données réelles pour du texte, mais d’un autre coté si le flux est au format JSON, vous allez fortement solliciter le navigateur pour sa mise en forme.

C’est donc là que beaucoup de choses se jouent : les navigateurs ne sont pas égaux dans leur capacité de traitement.

Si l’on s’en tient aux performances JavaScript, une fois bannies les versions anciennes d’Internet Explorer (10 ou moins), le tiercé s’établi (en date de janvier 2017): Chrome 55, Firefox 50 et loin derrière, Internet Explorer 11.

Quant à la consommation mémoire, on y retrouve du plus économe au plus gourmand : Firefox, Internet explorer et Chrome.

Maintenant gardez-vous de prendre les benchmarks au pied de la lettre, ils couvrent bien plus d’aspects que les applications de gestion n’en exploitent, mon conseil est de ne pas hésiter à tester plusieurs navigateurs pour trouver celui qui s’adaptera à votre usage.

Pour finir les navigateurs sont mis à jour de façon très régulière, souvent en mieux mais parfois non. Donc ne vous jetez pas sur les nouvelles versions, laissez à d’autres le soin d’essuyer les plâtres…

* j’ai exclu Edge de ce test pour différentes raisons mais je lui consacrerai prochainement un billet dédié.

 

Olivier Piochaud Président Directeur Général d’Apsynet

 

Newsletter

Categories: Développement & Web