Lorsque vous travaillez sur du code côté client dans le cœur de Discourse, les plugins ou les thèmes, il est important de considérer l’impact sur les performances. Le projet ‘Tachometer’ de Google fournit un outil d’étalonnage statistiquement rigoureux que nous pouvons utiliser pour mesurer de manière définitive l’effet des changements.
Essentiellement, cet outil prend une liste d’URL et les charge de manière ‘rondes-points’ (round-robin). Pour chaque chargement de page, il prend une mesure de performance. Après des centaines/milliers d’itérations, il produit un tableau comparatif.
La beauté de cette approche ‘rondes-points’ est qu’elle aide à réduire l’impact des facteurs externes sur les mesures.
Étape 1 : Ajouter performance.measure()
L’approche ici variera en fonction de ce que vous testez. Mais fondamentalement : vous devez introduire une valeur performance.measure() pour que Tachometer puisse la lire.
Si vous souhaitez mesurer le temps qu’il faut à Discourse pour démarrer et se rendre, vous pouvez utiliser la mesure intégrée "discourse-init-to-paint". Pour tout le reste, vous pouvez introduire votre propre performance.measure et l’utiliser.
Vous pouvez vérifier que cela fonctionne en utilisant l’onglet performance dans les outils de développement de votre navigateur :
Si vous essayez de mesurer une activité qui nécessite une interaction utilisateur (par exemple, ouvrir un menu), vous pourriez y parvenir en ajoutant quelque chose comme ceci dans un initialisateur pour cliquer sur le bouton 1 seconde après le chargement de la page :
setTimeout(() => document.querySelector(".my-button").click(), 1000);
Étape 2 : Identifier les URL à tester
Tout d’abord, assurez-vous de compiler les actifs Ember en mode production. Ceci peut être réalisé en lançant le serveur avec EMBER_ENV=production.
Pour obtenir deux URL différentes, il existe deux approches principales :
Si votre changement est suffisamment petit pour être facilement contrôlé par un feature flag, vous pourriez ajouter une logique pour le basculer en fonction d’un paramètre de requête d’URL. Vos deux URL pourraient alors être
http://localhost:4200?flag=before
http://localhost:4200?flag=after
Si le changement est trop important pour cela, vous pourriez cloner Discourse dans un deuxième répertoire et lancer une deuxième copie d’ember-cli. Elle peut être redirigée vers le même serveur Rails en utilisant une commande comme
EMBER_ENV=production pnpm ember serve --port 4201 --proxy http://localhost:3000
Et ensuite, vos deux URL seraient
http://localhost:4200
http://localhost:4201
Si vous choisissez cette approche, assurez-vous que les deux copies de l’application ont la télémétrie de performance que vous avez introduite à l’étape 1 de ce guide
Étape 3 : Configurer Tachometer
Voici mon fichier bench.json, qui prendra 300 échantillons de chaque cible :
{
"timeout": 5,
"sampleSize": 300,
"benchmarks": [
{
"measurement": {
"mode": "performance",
"entryName": "discourse-init-to-paint"
},
"expand": [
{
"url": "http://localhost:4200",
"name": "before"
},
{
"url": "http://localhost:4201",
"name": "after"
}
]
}
]
}
Étape 4 : Exécuter l’étalonnage
Pour réduire le bruit, arrêtez toute activité non liée sur votre poste de travail, puis démarrez l’étalonnage avec une commande comme :
npx tachometer@latest --config ./bench.json
Une fois terminé, vous devriez voir une comparaison des performances avant/après.
Limites
Comme pour toute expérience de ce type, il est utile de considérer les limites. Par exemple :
-
Les différences de performance sur votre poste de travail de développement ne correspondent pas directement à celles d’autres navigateurs/appareils
-
Le processus de démarrage de Discourse via le proxy Ember-CLI n’est pas exactement le même qu’en production. Lors de modifications structurelles (par exemple, mises à jour de framework), cela peut être important
-
La performance varie souvent en fonction de l’état de l’application (par exemple, le nombre de sujets rendus), vos résultats pourraient donc ne pas être exactement reproductibles dans d’autres environnements
Ce document est contrôlé par version - suggérez des modifications sur github.