Applications AJAX de test de charge

Créez des scripts de scénarios utilisateur pour vos applications AJAX afin d’examiner le comportement de l’utilisateur
sous charge, identifier les problèmes et valider les performances.

Vue d’ensemble du contenu

 


 

Qu’est-ce qu’AJAX?

 

Ceux d’entre vous qui ont dû faire face à des tests de charge des applications Web AJAX (JavaScript asynchrone et XML) ont appris que cela peut souvent être un défi difficile de développement et d’automatisation. Cet article fournira un peu plus d’informations sur la technique de développement AJAX, les avantages et les inconvénients d’AJAX, et une approche recommandée ajax test de performance.

Il y a des décennies, les pages Web et les applications étaient ennuyeuses, mais extrêmement légères, faciles à entretenir, et leur testabilité était fantastique par rapport aux frameworks d’applications Web utilisés aujourd’hui. Les utilisateurs passaient souvent plus de temps à attendre devant un écran blanc qu’à interagir avec ces premières applications Web. En raison de cette facilité d’utilisation limitée, les entreprises ont évité de dépenser de l’argent pour de nouveaux services web.

À partir de 2005, une nouvelle technologie appelée AJAX a permis aux développeurs de construire des sites Web modernes, ce qui a réduit au minimum le temps que les utilisateurs passaient devant un écran blanc à attendre qu’une page se charge. AJAX est une abréviation pour et c’est plus qu’une technologie parce qu’il se compose de HTML, CSS, JavaScript, XMLHttpRequest, et un langage de script côté serveur tels que PHP.

Au début de l’ère d’Internet, la popularité des pages Web riches en contenu et interactives était mauvaise parce qu’il n’y avait pas d’option pour mettre à jour une page Web sans recharger toute la page. Au fur et à mesure que les nouvelles technologies et techniques évoluaient, AJAX a contribué à combler cet écart et a introduit le concept de charge de données asynchrone, permettant à un utilisateur final d’interagir avec la page pendant que les données se chargent en arrière-plan. Aujourd’hui, ce concept est largement utilisé car il permet la mise en œuvre d’applications Web interactives et dynamiques, ce qui contribue à améliorer l’expérience utilisateur globale.

 

Une demande AJAX typique se compose du processus suivant :

  1. L’utilisateur clique sur la page Web ou l’application Web.
  2. Le gestionnaire de cette page Web crée un objet XMLHttpRequest.
  3. XMLHttpRequest objet demande un document à partir du serveur.
  4. Le serveur récupère les données appropriées et les renvoie.
  5. XMLHttpRequest déclenche un événement pour aviser la page Web ou l’application que les données sont arrivées.
  6. Le gestionnaire traite et affiche les données.

 


 

Quels défis viennent avec les applications AJAX ?

 

Il y a quelques pièges communs impliqués dans les applications Web dynamiques basées sur AJAX, qui sont déjà bien connues dans la communauté des développeurs. Nous couvrirons quelques-uns des domaines les plus problématiques de l’AJAX ci-dessous.

Tout d’abord, comme nous l’avons mentionné ci-dessus, l’un des composants qui composent AJAX est JavaScript. Si vous désactivez JavaScript dans votre navigateur, cela rendra votre application ou votre site inutile. Il y a plusieurs années, il était courant que les organisations verrouent les navigateurs pour leurs employés et désactivé JavaScript à des fins de sécurité. Ces jours sont maintenant passés, mais il est toujours bon de garder cela à l’esprit que même des changements comme ceux-ci pourraient avoir des conséquences imprévues.

Deuxièmement, les données chargées et affichées dynamiquement ne font pas partie de la page, en particulier pour les pages créées en tant que SPA (Application d’une seule page) Si un moteur de recherche a indexé votre page Web basée sur AJAX, le résultat, du point de vue du RÉFÉRENCEMent, peut être insatisfaisant parce qu’une grande partie du contenu n’est pas visible par ces moteurs d’indexation.

Troisièmement, les mises à jour dynamiques en cours de la page peuvent déranger les utilisateurs avec une faible durée d’attention. Plus les éléments dynamiques apparaissent sur ces pages, plus la probabilité que votre utilisateur soit interrompu et ne puisse pas terminer son travail dans un délai acceptable.

Enfin, en raison de la communication client-serveur basée sur le rappel, la latence peut être plusieurs fois plus élevée que d’autres technologies, comme WebSockets, par exemple. Les clients Web tirent pour les mises à jour de données, ce qui est également un défi pour les tests automatisés.

 


 

Test de charge AJAX : Techniques de simulation utilisateur

 

Les spécialistes des tests de charge et les ingénieurs de performance sont responsables du choix d’une approche de simulation utilisateur appropriée, qui convient à la fois à votre application à l’essai et ne génère pas trop d’efforts de votre part. Si vous choisissez la mauvaise méthode de simulation, la chance est très élevée que vous ne pouvez pas aborder les points chauds de performance dans votre application.

Il existe deux méthodes de simulation utilisateur dont nous discuterons ci-dessous.

Simulation des demandes et des réponses basée sur le protocole

La plupart des outils de test open-source, ainsi que les outils commerciaux de test de charge soutiennent cette procédure. Vous enregistrez les interactions client-serveur, et l’outil de test capture toutes les demandes et réponses dans un script de test. Après la paramétrisation des données dynamiques, telles que les ID de session ou les données d’entrée de test, les scripts pourraient être utilisés pour simuler la charge requise sur votre système back-end. Sachez que le traitement ou les interactions côté client ne font pas partie des mesures du temps de réponse au niveau de votre protocole.

Simulation complète par navigateur des interactions utilisateur réelles

Seules quelques-unes des solutions de test de charge les plus complètes sur le marché aujourd’hui fournissent et soutiennent la simulation complète de test de charge basée sur le navigateur. La raison en est que les besoins en ressources du système sont plus élevés et la mise en œuvre d’une relecture fiable peut être quelque peu difficile. Quand vient le temps de créer des scripts de test pour des simulations utilisateur complètes basées sur le navigateur, la création est comme l’approche basée sur le protocole, cependant, cette fois toutes les interactions côté client sont enregistrées et sauvent.

Le testeur ou l’ingénieur navigue à travers la page Web ou l’application Web tandis qu’un enregistreur de script capture toutes les interactions dans le navigateur Web. Lors de l’exécution du test, un navigateur Web sans tête exécute les interactions enregistrées et répond aux rappels de serveurs comme un véritable utilisateur. Ce type de simulation de l’utilisateur est très précis et fournit des mesures réalistes des performances avant.

La première méthode de simulation que nous avons décrite est parfaite pour les applications Web statiques, a une faible simulation au-dessus de votre machine d’injection de charge et est souvent facile à implémenter. La technique ultérieure fournit des temps de réponse précis de bout en bout, mais leurs frais généraux sur le serveur de test de charge sont beaucoup plus élevés. Alors, comment choisiriez-vous la meilleure méthode de simulation utilisateur pour tester la charge des applications web ou des pages ajax?

 


 

Test de charge AJAX en action

 

Quelle est la meilleure approche de test de charge AJAX et comment pouvez-vous valider votre décision ? Évidemment, c’est une bonne idée de commencer une petite expérience si vous n’êtes pas sûr de quelle approche fournirait des résultats précis.

Pour ce scénario, nous couvrirons deux implémentations de tests de charge pour une application d’échantillon AJAX à l’aide ajaxsearchpro.com. Cette application de démonstration est un simple moteur de recherche. Par exemple, supposons qu’un utilisateur tape un terme de recherche dans le champ de recherche et que le contenu correspondant est affiché. Une fois la clé d’entrée tirée ou le bouton de recherche cliqué, la recherche finale sera exécutée et les résultats de recherche correspondants seront affichés à l’écran. Voici le tableau cascade capturé à l’aide du navigateur Chrome DevTools. Le temps de réponse de la demande de recherche « voiture » était de 2,2 secondes.

 

navigateur chromé de diagramme de chute d’eau

 

Nous avons utilisé les outils de développement dans le navigateur Chrome, ce qui nous a aidés à comprendre qu’il exécute cette demande lors de l’exécution de l’action de recherche: ajaxsearchpro.com/?s=car

Nous avons créé un script de test de charge basé sur le protocole et un script de test de charge basé sur le navigateur, exécuté les deux, et comparé les mesures de performances qui en résultent. Qu’en penses-tu? Quelle simulation utilisateur est la meilleure pour une application ajax ?

 

Script de test de charge AJAX basé sur le protocole

 

Étapes scénarisé: https://ajaxsearchpro.com/?s=car temps de réponse: 594 ms
Approche de simulation : Niveau protocole, Chrome Nombre de demandes : 1

 

Carte de chute d’eau
graphique de chute d’eau ajax basé sur le protocole

 

Résumé de l’exécution du script basée sur le Protocole
exécution du script ajax basée sur le protocole

 

Script de test de charge AJAX basé sur le navigateur

 

Étapes scénarisé: https://ajaxsearchpro.com/?s=car temps de réponse: 2.18 sec
Approche de simulation : Niveau protocole, Chrome Nombre de demandes : 32

 

Carte de chute d’eau
graphique de chute d’eau ajax basé sur le navigateur

 

Résumé de l’exécution du script basée sur le Protocole
navigateur basé sur l’exécution du script ajax

 

Comparaison des deux méthodes de simulation

 

En raison de son ous asynchron mode de communication AJAX– lesapplications basées nepeuventpas être automatisées à la niveau de protocole. Seuls les vrais browsersimulation basée fournit des résultats précis etgénérers une charge réaliste sur votre système back-end.

Considérez un test de charge de notre

application ajaxsearchpro.com de démonstration avec 100 utilisateurs simultanés et 10,000 recherches par heure. Si vous décidez d’utiliser la simulation basée sur le protocole, vous volonté manquer 10000 x 31 = 310 000 demandes. Évidemment, cela conduirait à des résultats de test de charge totalement inexacts.

 


 

Comment loadview solution aborde les tests de charge avec AJAX

 

LoadView, notre plate-forme de test de charge basée sur le cloud, est conçu pour tester toutes les applications web 2.0 modernes telles que AJAX, Flash, Angular, Knockout, HTML5, jQuery, et bien d’autres. Sa facilité d’utilisation est exceptionnelle. Vous pouvez enregistrer des scénarios complets basés sur le navigateur et simuler plus de 40 appareils mobiles ou basés sur navigateur tels qu’Internet Explorer, Chrome, iPhone, Samsung, Blackberry, et bien d’autres.

Comme nous l’avons mentionné précédemment, de nombreuses solutions de test de charge ne fournissent qu’une approche de simulation utilisateur basée sur le protocole, ce qui ne suffit pas. Vous pouvez mettre l’accent sur votre back end avec des tests de niveau protocole, mais une partie importante des demandes client-serveur et le traitement côté client est laissé de côté. La plate-forme LoadView vous donne tout ce dont vous avez besoin quand il s’agit de simulation utilisateur précise.

 

Cinq étapes pour exécuter vos tests de charge basés sur AJAX avec LoadView

 

1. Enregistrez votre demande AJAX
Vous pouvez utiliser l’enregistreur Web EveryStep pour naviguer manuellement à travers votre application AJAX. EveryStep enregistrera toutes les actions et vous permettra d’ajouter des étapes de temps ou de vérification. Une fois que vous avez cliqué sur votre application et créé un script, vous pouvez effectuer un essai utilisateur unique ou télécharger les actions enregistrées sur notre plate-forme et créer votre appareil de test de charge.

2. Calibrate
L’affectation de machines d’injection de charge est souvent une conjecture. Les machines malsaines de génération de charge falsifient vos résultats d’essai. LoadView exécute un seul test utilisateur de votre appareil et calcule le nombre maximum d’utilisateurs par machine d’injection de charge. Cette étape évite qu’une machine surchargée n’affecte négativement les temps de réponse de votre application.

3. Plan d’exécution
Le volume d’utilisateurs varie souvent le long d’une journée d’affaires typique. Nous avons abordé ce besoin avec notre fonction plan d’exécution. Il vous donne toute la flexibilité de modéliser des scénarios réalistes de test de charge.

4. Distribution virtuelle des utilisateurs
LoadView vous permet de choisir entre une large gamme de machines d’injection de charge à travers le monde. Sélectionnez ceux qui représentent l’emplacement habituel de vos clients.

5. Exécutez le test et consultez vos résultats
Dans cette dernière étape, vous pouvez démarrer l’exécution du test de charge. Une vue en ligne vous donnera des informations en temps réel sur la façon dont votre application AJAX fonctionne sous charge. Une fois l’exécution de votre test terminée, vous recevrez un rapport détaillé avec les indicateurs de performances clés les plus importants.

 

Tout bien considéré, LoadView répond à toutes les exigences d’une plate-forme moderne de test de charge simplifiant les défis d’automatisation des tests et vous aidant à simuler la production réelle comme des scénarios sur vos applications métier complexes. Pour plus d’informations sur LoadView, visitez le site LoadView. Pour plus d’informations techniques et de vidéos, visitez notre base de connaissances.

Vous êtes intéressé par une démo en direct? Planifiez une démo avec l’un de nos ingénieurs de performance. Nos ingénieurs de performance vous feront passer par toute la solution LoadView, de la scriptation et de la configuration d’un test de charge à l’exécution et à l’analyse post-test. Obtenez toutes vos questions de test de charge répondu!

 


 

Outils utilisés

 

LoadView: Plate-forme de test de charge basée sur le Cloud de Dotcom-Monitor

EveryStep Web Recorder: outil de script basé sur le Web et de clic.

Outils de développement Chrome: Outils de développement intégrés dans le navigateur Chrome.

Pour en savoir plus sur la plate-forme Dotcom-Monitor et les solutions de surveillance proposées, visitez www.dotcom-monitor.com