grunt.js_使用Grunt.js自动化性能测试

最新推荐文章于 2024-10-02 10:53:34 发布

dingshi7798

最新推荐文章于 2024-10-02 10:53:34 发布

阅读量82

点赞数

文章标签： python java linux vue 大数据 ViewUI

原文链接：https://www.sitepoint.com/automate-performance-testing-grunt-js/

版权

grunt.js

在这个2 MB的网页时代，性能预算已成为我们Web开发流程中必不可少的部分。与项目的利益相关者一起工作，为网站性能设定目标已成为每个人的责任，包括设计人员和开发人员。

您可以为许多不同的指标设置预算：例如，目标页面权重为500 KB，项目中的任何页面都不能超过该大小。必须将要添加到页面中的元素超过500kb的元素与页面上的其他元素进行比较，以确定它们是否包含在设计中。正如Tim Kadlec所述，您的决定必须采用以下三种方法之一：

优化页面上的现有功能或资产
从页面中删除现有功能或资产
不要添加新功能或资产

您还可以根据WebPageTest.org设置下载总图像的预算（以千字节为单位），每个请求的产品图像数或网站的平均下载时间。

不过，一旦设定好预算，这是一项额外的任务，只是衡量整个开发阶段的网站性能。如何在不增加质量检查流程繁琐的手动测试的情况下实现这一目标？输入Grunt.js！

Grunt.js + WebPageTest.org =自动化性能测试极乐

尽管有许多Grunt插件可以帮助您衡量网站的性能，但我专注于找到的最准确的插件： Grunt Perfbudget 。这个出色的Grunt任务使用WebPageTest.org API根据大量有用的指标（例如页面权重，图像大小，脚本权重和渲染时间）来衡量您的网站。您还可以为这些指标设置明确的预算，然后插件将根据这些预算来衡量您的网站！

获取API密钥

在设置Grunt任务之前，您需要向WebPageTest.org发送电子邮件，以获取包含在Gruntfile中的API密钥。（好消息：作品中还有此过程的替代方法！）

安装Grunt Perfbudget插件

如果这是您第一次使用Grunt，请查看有关使用Grunt 入门和运行的教程。

如果您已经在计算机上安装了 Grunt，则只需在我们设置性能测试之前安装Perfbudget插件即可。通过命令行导航到您的项目文件夹并运行：

npm install grunt-perfbudget --save-dev

或者，如果您想使用一个示例项目，请派生我的Github存储库， grunt-perfbudget-demo并运行npm install进行操作。

配置Perfbudget任务

一旦安装了插件，就需要设置插件选项并在Gruntfile.js中创建一个任务。我已经创建了一个演示Gruntfile ，它作为默认Grunt命令的一部分运行perfbudget任务，只有很少的开始选项–一个要测试的URL和您的API密钥：

module.exports = function(grunt){
  require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    perfbudget: {
      default: {
        options: {
          url: 'http://cfarman.com',
          key: 'APIKEY'
        }
      }
    }
  });

  grunt.registerTask('default', ['perfbudget']);
};

当我使用API密钥集运行默认的grunt任务时，在控制台中得到以下输出：

性能预算任务失败

为什么我的任务失败了？因为我的网站未通过默认预算：在不到1000毫秒的时间内呈现。它也因“ SpeedIndex ”指标而失败。如何查找有关网页性能的更多信息？幸运的是，WebPageTest有一个我可以引用的非常详细的URL，可以直接从我的Perfbudget测试中的控制台链接！

为了使我的网站通过并且不导致Grunt任务失败（因此在自动构建环境中停止任何网站构建），我有两种选择：我可以编辑预算直到通过（可以用于测试，不需要太多）以获得性能！），也可以遵循我的性能预算规则：优化，删除内容或停止添加内容，直到我通过默认指标。现在，让我们玩一下Grunt任务，看看通过测试的样子。

Perfbudget选项和WebPageTest指标

像大多数Grunt任务一样，Perfbudget任务使我可以自定义一系列选项。而且由于WebPageTest测量的指标非常详细，因此我可以为性能预算测试各种指标，以查看是否通过。

首先，我将更改选项，以使我的网站停止失败，并且Grunt任务报告我预算不足。这在我的预算任务中需要一个名为“预算”的附加属性：

perfbudget: {
  default: {
    options: {
      url: 'http://cfarman.com',
      key: 'APIKEY',
      budget: {
        render: '3000',
        SpeedIndex: '5500'
      }
    }
  }
}

我的网站目前很慢，因此为了通过测试，我的价值很高。

结果？我通过了！

性能预算任务已通过

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

这意味着Grunt任务不会失败，并且如果我的Gruntfile中还有其他任务，它们将照常进行-成功！

除了默认指标外，我们还能衡量什么？各种东西，包括：

loadTime：总加载时间（以毫秒为单位）
请求：请求的文件总数
bytesIn：页面总权重（以字节为单位）

最后一个指标是我最常报告的指标，并希望出于预算目的对其进行跟踪，因此让我们看一下如何衡量它：

perfbudget: {
  default: {
    options: {
      url: 'http://cfarman.com',
      key: 'APIKEY',
      budget: {
        render: '3000',
        SpeedIndex: '5500',
      bytesIn: '2000000'
      }
    }
  }
}

我选择的总字节预算为200万，因为此时的平均页面权重徘徊在2兆字节左右。编辑预算选项后，可以再次运行grunt任务来查看操作方法：

网站太大