Dans cette pages Web d'âge de 2 MB, les budgets de performance deviennent les éléments nécessaires de notre processus de développement Web. En travaillant avec les parties prenantes de votre projet, c'est devenu la responsabilité de tout le monde - les concepteurs et les développeurs - pour fixer des objectifs pour les performances de votre site Web.
Vous pouvez définir des budgets pour un certain nombre de mesures différentes: par exemple, un poids de page cible de 500 kilo-kilo-kilo-kilo-kilo-kilo-paragraphes, qu'aucune page dans votre projet ne peut dépasser. Les éléments qui seraient ajoutés à la page pour dépasser 500 Ko devraient être évalués par rapport à d'autres éléments de la page pour déterminer leur inclusion dans la conception. Comme le décrit Tim Kadlec, votre décision doit prendre l'un des 3 chemins:
Vous pouvez également définir des budgets pour le total des images téléchargées en kilobytes, le nombre d'images de produit par demande ou le temps de téléchargement moyen de votre site selon webpagest.org.
Une fois que vous avez établi votre budget, c'est toute une tâche supplémentaire juste pour mesurer les performances de votre site tout au long de la phase de développement. Comment pouvez-vous y parvenir sans ajouter de tests manuels onéreux à votre processus d'AQ? Entrez grunt.js!
Bien qu'il existe un certain nombre de plugins grognés qui vous aident à mesurer les performances de votre site Web, je me concentre sur le plus précis que j'ai trouvé: Grunt Perfbudget. Cette merveilleuse tâche grogn utilise l'API WebPageTest.org pour mesurer votre site à une tonne de mesures utiles comme le poids de la page, la taille des images, le poids du script et le temps de rendu. Vous pouvez également définir des budgets explicites pour ces mesures contre lesquelles le plugin mesurera ensuite votre site!
Avant de pouvoir configurer votre tâche de grognement, vous devez envoyer un e-mail à webpagest.org pour une clé API à inclure dans votre gruntfile. (Bonne nouvelle: il y a une alternative à ce processus en cours!)
Si c'est la première fois que vous utilisez Grunt, consultez mon tutoriel sur la mise en service avec Grunt.
Si vous avez déjà installé Grunt sur votre ordinateur, il vous suffit d'installer le plugin Perfbudget avant de configurer nos tests de performances. Accédez à votre dossier de projet via la ligne de commande et exécutez:
npm install grunt-perfbudget --save-dev
Ou si vous souhaitez qu'un exemple de projet pour travailler, Fork mon référentiel GitHub, grunt-perfbudget-Demo et exécutez l'installation de NPM pour commencer.
Une fois que vous avez installé le plugin, vous devrez configurer vos options de plugin et créer une tâche dans votre gruntfile.js. J'ai créé une démo gruntfile qui exécute la tâche perfudget dans le cadre de la commande grunt par défaut, avec juste le minimum d'options à commencer - une URL à tester et votre clé API:
module<span>.exports = function(grunt){
</span> <span>require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
</span>
grunt<span>.initConfig({
</span> <span>pkg: grunt.file.readJSON('package.json'),
</span>
<span>perfbudget: {
</span> <span>default: {
</span> <span>options: {
</span> <span>url: 'http://cfarman.com',
</span> <span>key: 'APIKEY'
</span> <span>}
</span> <span>}
</span> <span>}
</span> <span>});
</span>
grunt<span>.registerTask('default', ['perfbudget']);
</span><span>};</span>Lorsque j'exécute la tâche de grognement par défaut avec mon ensemble de touches API, j'obtiens la sortie suivante dans la console:
Pourquoi ma tâche a-t-elle échoué? Parce que mon site Web n'a pas réussi le budget par défaut: rendu en moins de 1000 ms. Il a également échoué sur une métrique appelée «SpeedIndex». Comment puis-je en savoir plus sur les performances de ma page Web? Heureusement, WebPageTest a une URL très détaillée que je peux référencer, liée directement à partir de la console dans mon test à perfudget!
Afin de faire passer mon site Web et de ne pas faire échouer la tâche de grognement (donc arrêter tout site Web construit dans un environnement de construction automatisé), j'ai deux options: je peux modifier mes budgets jusqu'à ce que je passe (utile pour les tests, Pas tant pour les performances!) Ou je peux suivre mes règles de budget de performance: optimiser, supprimer des trucs ou arrêter d'ajouter des choses jusqu'à ce que je passe les mesures par défaut. Pour l'instant, jouons avec notre tâche grogn pour voir à quoi ressemble un test de passage.
Comme la plupart des tâches grognées, la tâche perfudget me permet de personnaliser une gamme d'options. Et en raison des mesures incroyablement détaillées mesurées par WebPageTest, je peux tester toutes sortes de mesures pour mon budget de performance pour voir si je passe ou échoue.
Tout d'abord, je vais modifier mes options afin que mon site Web arrête d'échouer et que les rapports de tâches de grognement je suis sous le budget. Cela nécessite une propriété supplémentaire dans ma tâche à perfudget appelée «budget»:
<span>perfbudget: {
</span> <span>default: {
</span> <span>options: {
</span> <span>url: 'http://cfarman.com',
</span> <span>key: 'APIKEY',
</span> <span>budget: {
</span> <span>render: '3000',
</span> <span>SpeedIndex: '5500'
</span> <span>}
</span> <span>}
</span> <span>}
</span><span>}</span>Mon site est assez lent à ce stade, donc mes valeurs sont élevées afin de passer le test.
les résultats? J'ai passé!
Cela signifie que la tâche de grognement n'échoue pas et si j'ai d'autres tâches dans mon gruntfile, ils procéderont comme d'habitude - succès!
Outre les mesures par défaut, que pouvons-nous mesurer d'autre? Toutes sortes de choses, y compris:
La dernière métrique est celle que je signale le plus souvent et que je souhaite suivre à des fins de budgétisation, alors regardons comment la mesurer:
npm install grunt-perfbudget --save-dev
J'ai choisi un budget total d'octets de 2 millions, car le poids moyen de la page à cette époque oscille autour d'un peu moins de 2 mégaoctets. Une fois que j'ai modifié les options de budget, je peux voir comment je fais en exécutant à nouveau la tâche de grognement:
Mon site Web se compose à 3 mégaoctets, en mettant bien le budget! On dirait que j'ai du travail à faire. Mais avoir ces informations à portée de main est incroyablement utile en tant que développeur. Aucun autre plugin Grunt ne fournit des informations sur le poids total de la page d'une manière aussi légère et facile à tester. La mesure de ces mesures importantes me permet de voir l'impact réel des décisions de développement car je codage - et m'aide à améliorer les performances en conséquence.
Grunt.js est un coureur de tâche JavaScript qui automatise des tâches répétitives comme la minification, la compilation, les tests unitaires et la libellule. Il est construit sur Node.js et utilise une interface de ligne de commande pour exécuter des tâches personnalisées définies dans un fichier appelé gruntfile. Grunt.js est crucial pour les tests de performances car il permet aux développeurs d'automatiser les tâches qui garantissent que le code s'exécute efficacement et sans erreurs. Cela fait gagner du temps et réduit le risque d'erreur humaine, conduisant à des logiciels plus fiables et de meilleure qualité.
pour installer grunt.js, vous Besoin d'abord d'installer Node.js et NPM (Node Package Manager) sur votre système. Une fois que vous en avez, vous pouvez installer grunt.js en exécutant la commande npm install -g grunt-cli dans votre terminal. Cela installe l'interface de ligne de commande grunt globalement sur votre système. Après cela, vous pouvez ajouter des plugins grogn et grogn à votre projet en les définissant comme des dépendances dans un fichier package.json et en exécutant NPM Installer.
Un gruntfile est un fichier javascript qui va dans le répertoire racine de votre projet et contient la configuration des tâches grogn. Il s'appelle gruntfile.js ou gruntfile.coffee et est écrit en JavaScript ou CoffeeScript. Pour créer un gruntfile, vous définissez une fonction de wrapper qui obtient une instance de Grunt Runtime et à l'intérieur de cette fonction, vous pouvez charger des plugins grognés, configurer des tâches et enregistrer des tâches personnalisées.
grunt.js peuvent automatiser une large gamme de tâches liées aux tests de performances et à l'optimisation du code. Il s'agit notamment des fichiers JavaScript et CSS en minimisation pour réduire leur taille, compiler moins et les fichiers SASS dans CSS, liant le code JavaScript pour attraper des erreurs et appliquer les normes de codage, exécuter des tests unitaires pour s'assurer que le code fonctionne comme prévu, et concaténer les fichiers pour réduire le nombre de Demandes HTTP.
pour automatiser les tests de performances avec Grunt.js, vous pouvez utiliser des plugins comme Grunt-Contrib-Uglify pour la minification, Grunt-Contrib-CSSmin pour la minification CSS, Grunt-Contrib-Jshint pour la line et grunt-contrib-qunit pour les tests unitaires. Vous installez ces plugins via NPM, chargez-les dans votre gruntfile avec grunt.loadnpmtasks () et configurez-les en ajoutant une propriété à la méthode grunt.initconfig (). Vous pouvez ensuite exécuter les tâches à partir de la ligne de commande avec Grunt
Oui, vous pouvez exécuter plusieurs tâches à la fois avec une fois avec Grunt.js en définissant une tâche qui appelle d'autres tâches. Dans votre gruntfile, vous pouvez utiliser grunt.registerTask () pour définir une tâche qui exécute plusieurs tâches dans l'ordre où elles sont spécifiées. Par exemple, grunt.registerTask ('Default', ['jshint', 'Qunit', 'uglify']); Exécuterait les tâches Jshint, Qunit et Uglify dans cet ordre.
Vous pouvez personnaliser le comportement des tâches de grognement en passant des options aux grognements .InitConfig () dans votre gruntfile. Chaque tâche a un ensemble d'options qui contrôlent son comportement et celles-ci peuvent être spécifiées dans l'objet de configuration de la tâche. Par exemple, la tâche UGLIFY a des options pour le mangle, la compresse et embellit ce contrôle comment le code JavaScript est minifié.
Le fichier package.json dans un projet Grunt est utilisé pour gérer les dépendances du projet. Il répertorie les plugins grognés et les autres packages NPM que le projet doit exécuter. Lorsque vous exécutez NPM Installer, NPM examine le fichier package.json et installe les packages répertoriés. Cela facilite la gestion et le partage des dépendances de votre projet.
Oui, Grunt.js est compatible avec une large gamme de cadres de test. Il existe des plugins grognés pour les cadres de test populaires comme Mocha, Jasmine et Qunit, et vous pouvez également écrire des tâches personnalisées pour exécuter des tests avec d'autres frameworks. Cela fait de Grunt.js un outil polyvalent pour automatiser les tests de performances.
Certaines meilleures pratiques pour utiliser Grunt.js pour les tests de performances incluent la propreté de votre grunt-file propre et organisé en le divisant en plusieurs fichiers, en utilisant le - Verboseur Verbose lors de l'exécution de tâches pour obtenir une sortie détaillée et en utilisant l'indicateur - Force pour continuer à exécuter les tâches même si l'on échoue. C'est aussi une bonne idée de mettre à jour régulièrement vos plugins grogn pour obtenir les dernières fonctionnalités et corrections de bogues.
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!
Comment télécharger des vidéos de Douyin
tableau_push
Introduction aux cordes
Analyse coût-efficacité de l'apprentissage de Python et C++
La différence entre grande fonction et max
Solution au code d'erreur d'affichage de l'ordinateur 651
Plateforme de trading de devises numériques
Qu'est-ce que le réseau local
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
