与Grunt.js自动化性能测试

钥匙要点

• > grunt.js任务跑步者可用于在网络开发过程中自动化性能测试，确保在不将繁重的手动测试添加到QA流程的情况下满足性能目标或“预算”。
>
• > Grunt Perfbudget插件利用WebPagetest.org API来测量网站，以针对页面重量，图像大小，脚本重量和渲染时间等指标进行测量。开发人员可以为这些指标设置明确的预算，然后插件将对网站进行测量。
grunt.js对于性能测试至关重要，因为它可以自动执行确保代码有效运行且无错误的任务，节省时间并减少人为错误的风险。这会导致更可靠和更高质量的软件。
• >
在这个2 MB网页的年龄中，绩效预算已成为我们网络开发过程的必要部分。与您项目的利益相关者合作，已成为每个人的责任 - 设计师和开发人员都可以为您的网站绩效设定目标。

>您可能会为许多不同的指标设置预算：例如，目标页面重量为500千元，项目中的单个页面无法超过。将需要在页面上添加到超过500kb的页面上的元素，以确定其包含在设计中的其他元素。正如蒂姆·卡德克（Tim Kadlec）所描述的那样，您的决定必须采取3条途径之一：>

优化页面上的现有功能或资产

>从页面上删除现有功能或资产

不要添加新功能或资产
2. >您还可以根据WebPagetest.org。
设定预算后，这是一项整个额外任务，只是为了在整个开发阶段衡量您的网站的性能。您如何在不添加质量质量检查过程中繁重的手动测试的情况下实现这一目标？输入grunt.js！
grunt.js webpagetest.org =自动化性能测试Bliss

>虽然有许多GRUNT插件可以帮助您衡量网站性能，但我专注于我发现的最准确的插件：Grunt Perfbudget。这项出色的GRUNT任务使用WebPagetest.org API来测量您的网站，以相对大量有用的指标，例如页面重量，图像大小，脚本重量和渲染时间。您还可以为这些指标设置明确的预算，然后插件将对您的网站进行测量！

>

获取API键

>在设置Grunt任务之前，您需要向WebPagetest.org发送电子邮件，以获取API密钥以包含在Gruntfile中。 （好消息：工作中有一个替代方法！）

>

安装grunt perfbudget插件

如果这是您第一次使用咕unt声，请查看我的教程，以与grunt grunt一起运行。

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

npm install grunt-perfbudget --save-dev

，或者如果您想使用一个示例项目，请分叉我的GitHub存储库，Grunt-perfbudget-demo并运行NPM安装以进行。

配置perfbudget任务

安装插件后，您需要设置插件选项并在gruntfile.js中创建一个任务。我创建了一个Demo Gruntfile，它作为默认grunt命令的一部分运行PerfBudget任务，只需最少的选项即可开始 - 用于测试的URL和您的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>

>使用API​​键集运行默认的grunt任务时，我在控制台中获得以下输出：

为什么我的任务失败了？因为我的网站没有通过默认预算：渲染少于1000ms。它在称为“ SpeedIndex”的度量上也失败了。我如何找到有关网页性能的更多信息？幸运的是，WebPagetest有一个我可以参考的非常详细的URL，直接从我的Perfbudget Test中的控制台链接！

>！

>为了使我的网站通过并不会导致怪异的任务失败（因此停止在自动化构建环境中构建任何网站），我有两个选择：我可以编辑预算直到通过（用于测试，不太适合性能！），或者我可以遵循我的绩效预算规则：优化，删除东西或停止添加内容，直到通过默认指标为止。目前，让我们玩弄我们的艰苦任务，看看传球测试的外观。

>

> perfbudget选项和WebPagetest Metrics

>像大多数笨拙的任务一样，Perfbudget任务使我可以自定义一系列选项。而且，由于WebPagetest衡量了惊人的详细指标，我可以测试我的性能预算的各种指标，以查看我是否通过还是失败。

>

首先，我要更改我的选项，以便我的网站停止失败，而咕unt的任务报告我在预算之下。这需要我的perfbudget任务中的额外属性，称为“预算”：

目前我的网站非常慢，因此我的值很高以通过测试。

<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>

结果？我通过！

这意味着grunt的任务不会失败，如果我在Gruntfile中有其他任务，它们将正常进行 - 成功！> 除默认指标外，我们还能测量什么？各种各样的东西，包括：

• loadTime：毫秒
的总加载时间
• >请求：请求的文件总数
>
• bytesin：字节中的总页面

最后一个指标是我最常见的报告，并且想跟踪预算目的，所以让我们看一下如何衡量它：

npm install grunt-perfbudget --save-dev

>我选择了总体预算为200万，因为此时的平均页面徘徊在2兆字节近于2兆字节左右。一旦编辑预算选项，我可以通过再次运行GRUNT任务来了解我的操作：

>

我的网站以3兆字节的价格计算，超出了预算！看起来我有一些工作要做。但是，作为开发人员，拥有此信息对我来说非常有用。没有其他Grunt插件以这种轻巧，易于测试的方式提供有关总页面重量的信息。测量这些重要的指标使我可以看到开发决策的真正影响，因为我正在编码> - 因此，我可以提高性能。

经常询问有关使用grunt.js

自动化性能测试的问题

什么是grunt.js，为什么对于性能测试很重要？

grunt.js是一个JavaScript任务跑者，可以自动化重复性任务，例如缩短，编译，单位测试和linting。它是基于node.js构建的，并使用命令行接口来运行称为gruntfile的文件中定义的自定义任务。 Grunt.js对于性能测试至关重要，因为它允许开发人员自动化确保代码有效运行且无错误运行的任务。这样可以节省时间并降低人为错误的风险，从而导致更可靠和更高质量的软件。

如何安装grunt.js进行性能测试？

>首先需要在系统上安装NODE.JS和NPM（Node Package Manager）。一旦拥有这些，您可以通过在终端中运行命令NPM install -G grunt -cli来安装grunt.js。这将在系统上全球安装Grunt命令行界面。之后，您可以通过将其定义为package.json文件中的依赖项并运行npm install。 > gruntfile是一个JavaScript文件，它在您项目的根目录中包含，并包含用于Grunt任务的配置。它名为gruntfile.js或gruntfile.coffee，用javascript或coffeescript编写。要创建一个GruntFile，您定义了一个包装函数，该功能通过了grunt运行时的实例，并且可以加载grunt插件，配置任务和注册自定义任务。

>使用Grunt.js？

grunt.js可以自动执行哪些常见任务可以自动化与性能测试和代码优化有关的广泛任务。其中包括缩小JavaScript和CSS文件以减小其尺寸，更少的编译和SASS文件，并将sass文件缩小到CSS中，覆盖JavaScript代码以捕获错误和执行编码标准，运行单元测试以确保代码按预期工作，并使文件降低文件的数量，以减少文件的数量http请求。

>如何使用grunt.js自动化性能测试？使用Grunt.js自动化性能测试，您可以使用grunt-contrib-uglify等插件进行缩小，用于CSS缩小的Grunt-Contrib-Cssmin，Grunt-Contrib-Jshint进行覆盖，以及用于单位测试的Grunt-Contrib-Qunit。您可以通过NPM安装这些插件，使用Grunt.loadnpmtasks（）将它们加载到Gruntfile中，然后通过将属性添加到Grunt.initConfig（）方法来配置它们。然后，您可以使用grunt 。通过定义调用其他任务的任务来grunt.js。在您的GruntFile中，您可以使用grunt.registertask（）来定义按照指定的顺序运行多个任务的任务。例如，grunt.registerTask（'默认值'，['jshint'，'qunit'，'uglify']）;可以按照该顺序运行jshint，qunit和uglify任务。

>我如何自定义grunt任务的行为？

您可以通过将选项传递给GRUNT来自定义GRUNT任务的行为.initconfig（）方法中的方法。每个任务都有一组控制其行为的选项，可以在任务的配置对象中指定这些选项。例如，uglify任务具有Mangle，压缩和美化该控制JavaScript代码如何缩小的选项。

>

> package.json文件在grunt project中的作用是什么？ > grunt项目中的package.json文件用于管理项目的依赖项。它列出了该项目需要运行的Grunt插件和其他NPM软件包。运行NPM安装后，NPM查看package.json文件并安装列出的软件包。这使得管理和共享您项目的依赖关系变得容易。

>我可以将grunt.js与其他测试框架一起使用？

>是的，Grunt.js与广泛的测试框架兼容。有用于流行的测试框架（例如摩卡咖啡，茉莉花和Qunit）的Grunt插件，您还可以编写自定义任务以使用其他框架运行测试。这使得grunt.js成为自动化性能测试的多功能工具。

>

使用Grunt.js进行性能测试有哪些最佳实践？ - 在运行任务时，verbose标志以获取详细的输出，并使用-force标志继续运行任务，即使失败。定期更新您的Grunt插件以获取最新功能和错误修复也是一个好主意。

>

以上是与Grunt.js自动化性能测试的详细内容。更多信息请关注PHP中文网其他相关文章！