Maison interface Web js tutoriel Fiche Grafana Kheat : tout ce qu'un ingénieur performance doit savoir

Fiche Grafana Kheat : tout ce qu'un ingénieur performance doit savoir

Oct 26, 2024 am 11:26 AM

Aide-mémoire Grafana K6 : tout ce qu'un ingénieur de performance doit savoir (avec exemples et meilleures pratiques)

1. Introduction à Grafana K6

Grafana K6 est un outil open source conçu pour les tests de performances. Il est idéal pour tester les API, les microservices et les sites Web à grande échelle, en fournissant aux développeurs et aux testeurs des informations sur les performances du système. Cette aide-mémoire couvrira les aspects clés que tout ingénieur de performance devrait connaître pour démarrer avec Grafana K6.

Qu’est-ce que le Grafana K6 ?

Grafana K6 est un outil de test de charge moderne destiné aux développeurs et aux testeurs qui rend les tests de performances simples, évolutifs et faciles à intégrer dans votre pipeline CI.

Quand l'utiliser ?

  • Test de charge
  • Tests de résistance
  • Tests de pointe
  • Détection des goulots d'étranglement des performances
  • Tests API
  • Test du navigateur
  • Ingénierie du chaos

2. Aide-mémoire Grafana K6 : aspects essentiels

2.1. Installation

Installer Grafana K6 via Homebrew ou Docker :

brew install k6
# Or with Docker
docker run -i grafana/k6 run - <script.js
Copier après la connexion
Copier après la connexion
Copier après la connexion

2.2. Test de base avec une API REST publique

Voici comment exécuter un test simple à l'aide d'une API REST publique.

import http from "k6/http";
import { check, sleep } from "k6";

// Define the API endpoint and expected response
export default function () {
  const res = http.get("https://jsonplaceholder.typicode.com/posts/1");

  // Define the expected response
  const expectedResponse = {
    userId: 1,
    id: 1,
    title:
      "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
  };

  // Assert the response is as expected
  check(res, {
    "status is 200": (r) => r.status === 200,
    "response is correct": (r) =>
      JSON.stringify(JSON.parse(r.body)) === JSON.stringify(expectedResponse),
  });

  sleep(1);
}
Copier après la connexion
Copier après la connexion
Copier après la connexion
2.2.1 Exécution du test et utilisation du tableau de bord Web

Pour exécuter le test et afficher les résultats dans un tableau de bord Web, nous pouvons utiliser la commande suivante :

K6_WEB_DASHBOARD=true K6_WEB_DASHBOARD_EXPORT=html-report.html k6 run ./src/rest/jsonplaceholder-api-rest.js
Copier après la connexion
Copier après la connexion
Copier après la connexion

Cela générera un rapport dans le dossier des rapports avec le nom html-report.html.

Mais nous pouvons également voir les résultats dans le tableau de bord web en accédant à l'URL suivante :

http://127.0.0.1:5665/
Copier après la connexion
Copier après la connexion
Copier après la connexion

Grafana Kheat sheet: everything a performance engineer should know

Une fois que nous accédons à l'URL, nous pouvons voir les résultats en temps réel du test dans le tableau de bord Web.

Grafana Kheat sheet: everything a performance engineer should know

2.3. Tester avec une API publique GraphQL

Exemple d'utilisation d'une API GraphQL publique.

Si vous ne savez pas ce qu'est une API GraphQL, vous pouvez visiter l'URL suivante : Qu'est-ce que GraphQL ?.

Pour plus d'informations sur l'API GraphQL que nous allons utiliser, vous pouvez visiter la documentation de l'URL suivante : GraphQL Pokémon.

Pour plus d'informations sur la façon de tester les API GraphQL, vous pouvez visiter l'URL suivante : GraphQL Testing.

Il s'agit d'un test simple pour obtenir un pokémon par son nom et vérifier si la réponse est réussie.

import http from "k6/http";
import { check } from "k6";

// Define the query and variables
const query = `
  query getPokemon($name: String!) {
    pokemon(name: $name) {
      id
      name
      types
    }
  }`;

const variables = {
  name: "pikachu",
};

// Define the test function
export default function () {
  const url = "https://graphql-pokemon2.vercel.app/";
  const payload = JSON.stringify({
    query: query,
    variables: variables,
  });

  // Define the headers
  const headers = {
    "Content-Type": "application/json",
  };

  // Make the request
  const res = http.post(url, payload, { headers: headers });

  // Define the expected response
  const expectedResponse = {
    data: {
      pokemon: {
        id: "UG9rZW1vbjowMjU=",
        name: "Pikachu",
        types: ["Electric"],
      },
    },
  };

  // Assert the response is as expected
  check(res, {
    "status is 200": (r) => r.status === 200,
    "response is correct": (r) =>
      JSON.stringify(JSON.parse(r.body)) === JSON.stringify(expectedResponse),
  });
}
Copier après la connexion
Copier après la connexion
Copier après la connexion

3. Bonnes pratiques pour structurer des projets de performance

3.1. Configuration centralisée

Définissez les options de configuration globales telles que les seuils de performances, le nombre d'utilisateurs virtuels (VU) et les durées en un seul endroit pour une modification facile.

brew install k6
# Or with Docker
docker run -i grafana/k6 run - <script.js
Copier après la connexion
Copier après la connexion
Copier après la connexion

3.2. Modularité des codes

3.2.1. Constantes et requêtes pour l'API REST

Séparez le code en modules réutilisables, par exemple en séparant les constantes et les requêtes de la logique de test.

Pour notre exemple d'API REST, nous pouvons créer un fichier constants.js pour stocker l'URL de base de l'API et un fichier requêtes-jsonplaceholder.js pour stocker les fonctions permettant d'interagir avec l'API.

import http from "k6/http";
import { check, sleep } from "k6";

// Define the API endpoint and expected response
export default function () {
  const res = http.get("https://jsonplaceholder.typicode.com/posts/1");

  // Define the expected response
  const expectedResponse = {
    userId: 1,
    id: 1,
    title:
      "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
  };

  // Assert the response is as expected
  check(res, {
    "status is 200": (r) => r.status === 200,
    "response is correct": (r) =>
      JSON.stringify(JSON.parse(r.body)) === JSON.stringify(expectedResponse),
  });

  sleep(1);
}
Copier après la connexion
Copier après la connexion
Copier après la connexion

Nous pouvons maintenant créer le fichier request-jsonplaceholder.js pour stocker les fonctions permettant d'interagir avec l'API.

K6_WEB_DASHBOARD=true K6_WEB_DASHBOARD_EXPORT=html-report.html k6 run ./src/rest/jsonplaceholder-api-rest.js
Copier après la connexion
Copier après la connexion
Copier après la connexion

3.2.2. Intégration des Requêtes dans le Script de Test de l'API REST

Enfin, nous pouvons créer notre script de test jsonplaceholder-api-rest.js pour utiliser les fonctions que nous avons créées dans le fichier request-jsonplaceholder.js.

http://127.0.0.1:5665/
Copier après la connexion
Copier après la connexion
Copier après la connexion

Notre code de script est désormais beaucoup plus simple à comprendre, et si quelque chose change dans l'URL, les paramètres ou si une nouvelle méthode doit être ajoutée, l'endroit où les modifications doivent être apportées est centralisé, ce qui rend notre solution plus simple à étendre au fil du temps.

Nous pourrions encore améliorer nos scripts en créant davantage de fonctions atomiques que nous pourrons réutiliser pour créer des scénarios plus complexes à l'avenir si nécessaire, il devient plus simple de comprendre ce que fait notre script de test. Par exemple, si nous voulions tester l'existence d'une publication, nous pourrions créer une fonction qui récupère une publication et renvoie la réponse, puis nous pourrions utiliser cette fonction dans notre script de test jsonplaceholder-api-rest.js.

import http from "k6/http";
import { check } from "k6";

// Define the query and variables
const query = `
  query getPokemon($name: String!) {
    pokemon(name: $name) {
      id
      name
      types
    }
  }`;

const variables = {
  name: "pikachu",
};

// Define the test function
export default function () {
  const url = "https://graphql-pokemon2.vercel.app/";
  const payload = JSON.stringify({
    query: query,
    variables: variables,
  });

  // Define the headers
  const headers = {
    "Content-Type": "application/json",
  };

  // Make the request
  const res = http.post(url, payload, { headers: headers });

  // Define the expected response
  const expectedResponse = {
    data: {
      pokemon: {
        id: "UG9rZW1vbjowMjU=",
        name: "Pikachu",
        types: ["Electric"],
      },
    },
  };

  // Assert the response is as expected
  check(res, {
    "status is 200": (r) => r.status === 200,
    "response is correct": (r) =>
      JSON.stringify(JSON.parse(r.body)) === JSON.stringify(expectedResponse),
  });
}
Copier après la connexion
Copier après la connexion
Copier après la connexion

3.2.3. Constantes et requêtes pour l'API GraphQL

Nous pouvons modifier le fichier constants.js pour ajouter l'URL de base de l'API GraphQL et les en-têtes que nous devons utiliser.

// ./src/config/options.js
export const options = {
  stages: [
    { duration: '1m', target: 100 }, // ramp up to 100 VUs
    { duration: '5m', target: 100 }, // stay at 100 VUs for 5 mins
    { duration: '1m', target: 0 },   // ramp down
  ],
  thresholds: {
    http_req_duration: ['p(95)<500'], // 95% of requests should complete in under 500ms
  },
};
Copier après la connexion

Nous pouvons maintenant créer le fichier request-graphql-pokemon.js pour stocker les fonctions permettant d'interagir avec l'API GraphQL.

// ./src/utils/constants.js
export const BASE_URLS = {
  REST_API: 'https://jsonplaceholder.typicode.com',
};
Copier après la connexion

3.2.4. Intégration des requêtes dans le script de test de l'API GraphQL

À ce moment, nous pouvons créer notre script de test pour utiliser les fonctions que nous avons créées dans le fichier request-graphql-pokemon.js. Nous allons créer un script de test simple qui obtiendra les données d'un Pokémon et vérifiera si la réponse est réussie.

// ./src/utils/requests-jsonplaceholder.js
import { BASE_URLS } from './constants.js';
import http from 'k6/http';

export function getPosts() {
    return http.get(`${BASE_URLS.REST_API}/posts`);
}

export function getPost(id) {
    return http.get(`${BASE_URLS.REST_API}/posts/${id}`);
}

export function createPost(post) {
    return http.post(`${BASE_URLS.REST_API}/posts`, post);
}

export function updatePost(id, post) {
    return http.put(`${BASE_URLS.REST_API}/posts/${id}`, post);
}

export function deletePost(id) {
    return http.del(`${BASE_URLS.REST_API}/posts/${id}`);
}
Copier après la connexion

De la même manière que pour l'exemple d'api rest, nous pouvons améliorer notre script en créant plus de fonctions atomiques que nous pourrons réutiliser pour créer des scénarios plus complexes dans le futur si nécessaire, cela devient plus simple de comprendre ce qu'est notre script de test fait.

Il existe encore une meilleure façon d'optimiser et d'avoir un meilleur paramétrage des résultats de réponse et de requête, qu'imaginez-vous que nous pourrions faire ?

3.3. Données dynamiques et paramétrage

Utilisez des données dynamiques pour simuler des scénarios plus réalistes et charger différents ensembles de données. K6 nous permet d'utiliser des tableaux partagés pour charger des données à partir d'un fichier. Les tableaux partagés sont un moyen de stocker des données accessibles à tous les VU.

Nous pouvons créer un fichier users-config.js pour charger les données des utilisateurs à partir d'un fichier JSON users.json.

brew install k6
# Or with Docker
docker run -i grafana/k6 run - <script.js
Copier après la connexion
Copier après la connexion
Copier après la connexion
import http from "k6/http";
import { check, sleep } from "k6";

// Define the API endpoint and expected response
export default function () {
  const res = http.get("https://jsonplaceholder.typicode.com/posts/1");

  // Define the expected response
  const expectedResponse = {
    userId: 1,
    id: 1,
    title:
      "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
  };

  // Assert the response is as expected
  check(res, {
    "status is 200": (r) => r.status === 200,
    "response is correct": (r) =>
      JSON.stringify(JSON.parse(r.body)) === JSON.stringify(expectedResponse),
  });

  sleep(1);
}
Copier après la connexion
Copier après la connexion
Copier après la connexion

Et ensuite nous pouvons l'utiliser dans notre script de test jsonplaceholder-api-rest.js.

K6_WEB_DASHBOARD=true K6_WEB_DASHBOARD_EXPORT=html-report.html k6 run ./src/rest/jsonplaceholder-api-rest.js
Copier après la connexion
Copier après la connexion
Copier après la connexion

4. Structure du projet

Une structure de projet bien organisée aide à maintenir et à faire évoluer vos tests. Voici une structure de dossiers suggérée :

http://127.0.0.1:5665/
Copier après la connexion
Copier après la connexion
Copier après la connexion

Cette structure aide à garder votre projet organisé, évolutif et facile à maintenir, en évitant l'encombrement à la racine du projet.

Une autre option serait de regrouper les scripts de test dans des dossiers par fonctionnalité, vous pouvez tester et comparer ce qui a le plus de sens pour votre contexte. Par exemple, si votre projet concerne un portefeuille qui effectue des transactions, vous pourriez avoir un dossier pour chaque type de transaction (dépôt, retrait, transfert, etc.) et à l'intérieur de chaque dossier vous pourriez avoir les scripts de test pour cette transaction spécifique.

import http from "k6/http";
import { check } from "k6";

// Define the query and variables
const query = `
  query getPokemon($name: String!) {
    pokemon(name: $name) {
      id
      name
      types
    }
  }`;

const variables = {
  name: "pikachu",
};

// Define the test function
export default function () {
  const url = "https://graphql-pokemon2.vercel.app/";
  const payload = JSON.stringify({
    query: query,
    variables: variables,
  });

  // Define the headers
  const headers = {
    "Content-Type": "application/json",
  };

  // Make the request
  const res = http.post(url, payload, { headers: headers });

  // Define the expected response
  const expectedResponse = {
    data: {
      pokemon: {
        id: "UG9rZW1vbjowMjU=",
        name: "Pikachu",
        types: ["Electric"],
      },
    },
  };

  // Assert the response is as expected
  check(res, {
    "status is 200": (r) => r.status === 200,
    "response is correct": (r) =>
      JSON.stringify(JSON.parse(r.body)) === JSON.stringify(expectedResponse),
  });
}
Copier après la connexion
Copier après la connexion
Copier après la connexion

Sur ce deuxième exemple, nous avons une structure de données plus complexe, mais nous pouvons toujours réutiliser les mêmes fonctions de requêtes que nous avons créées pour le premier exemple.

Conclusion

Les tests de performances avec K6 sont essentiels pour identifier les goulots d'étranglement et garantir l'évolutivité des applications. En suivant les meilleures pratiques telles que la modularisation du code, la centralisation des configurations et l'utilisation de données dynamiques, les ingénieurs peuvent créer des scripts de tests de performances maintenables et évolutifs.

Gros câlin.

Charly Automatise

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

<🎜>: Grow A Garden - Guide de mutation complet
4 Il y a quelques semaines By DDD
<🎜>: Bubble Gum Simulator Infinity - Comment obtenir et utiliser les clés royales
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Système de fusion, expliqué
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers of the Witch Tree - Comment déverrouiller le grappin
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Tutoriel Java
1677
14
Tutoriel PHP
1280
29
Tutoriel C#
1257
24
Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisation Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisation Apr 16, 2025 am 12:12 AM

Python convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.

Javascript et le web: fonctionnalité de base et cas d'utilisation Javascript et le web: fonctionnalité de base et cas d'utilisation Apr 18, 2025 am 12:19 AM

Les principales utilisations de JavaScript dans le développement Web incluent l'interaction client, la vérification du formulaire et la communication asynchrone. 1) Mise à jour du contenu dynamique et interaction utilisateur via les opérations DOM; 2) La vérification du client est effectuée avant que l'utilisateur ne soumette les données pour améliorer l'expérience utilisateur; 3) La communication de rafraîchissement avec le serveur est réalisée via la technologie AJAX.

JavaScript en action: Exemples et projets du monde réel JavaScript en action: Exemples et projets du monde réel Apr 19, 2025 am 12:13 AM

L'application de JavaScript dans le monde réel comprend un développement frontal et back-end. 1) Afficher les applications frontales en créant une application de liste TODO, impliquant les opérations DOM et le traitement des événements. 2) Construisez RestulAPI via Node.js et Express pour démontrer les applications back-end.

Comprendre le moteur JavaScript: détails de l'implémentation Comprendre le moteur JavaScript: détails de l'implémentation Apr 17, 2025 am 12:05 AM

Comprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.

Python vs JavaScript: environnements et outils de développement Python vs JavaScript: environnements et outils de développement Apr 26, 2025 am 12:09 AM

Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.

Le rôle de C / C dans les interprètes et compilateurs JavaScript Le rôle de C / C dans les interprètes et compilateurs JavaScript Apr 20, 2025 am 12:01 AM

C et C jouent un rôle essentiel dans le moteur JavaScript, principalement utilisé pour implémenter des interprètes et des compilateurs JIT. 1) C est utilisé pour analyser le code source JavaScript et générer une arborescence de syntaxe abstraite. 2) C est responsable de la génération et de l'exécution de bytecode. 3) C met en œuvre le compilateur JIT, optimise et compile le code de point chaud à l'exécution et améliore considérablement l'efficacité d'exécution de JavaScript.

Python vs JavaScript: cas d'utilisation et applications comparées Python vs JavaScript: cas d'utilisation et applications comparées Apr 21, 2025 am 12:01 AM

Python est plus adapté à la science et à l'automatisation des données, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python fonctionne bien dans la science des données et l'apprentissage automatique, en utilisant des bibliothèques telles que Numpy et Pandas pour le traitement et la modélisation des données. 2. Python est concis et efficace dans l'automatisation et les scripts. 3. JavaScript est indispensable dans le développement frontal et est utilisé pour créer des pages Web dynamiques et des applications à une seule page. 4. JavaScript joue un rôle dans le développement back-end via Node.js et prend en charge le développement complet de la pile.

Des sites Web aux applications: les diverses applications de JavaScript Des sites Web aux applications: les diverses applications de JavaScript Apr 22, 2025 am 12:02 AM

JavaScript est largement utilisé dans les sites Web, les applications mobiles, les applications de bureau et la programmation côté serveur. 1) Dans le développement de sites Web, JavaScript exploite DOM avec HTML et CSS pour réaliser des effets dynamiques et prend en charge des cadres tels que JQuery et React. 2) Grâce à la réactnative et ionique, JavaScript est utilisé pour développer des applications mobiles multiplateformes. 3) Le cadre électronique permet à JavaScript de créer des applications de bureau. 4) Node.js permet à JavaScript d'exécuter le côté du serveur et prend en charge les demandes simultanées élevées.

See all articles