>您可能会为许多不同的指标设置预算：例如，目标页面重量为500千元，项目中的单个页面无法超过。将需要在页面上添加到超过500kb的页面上的元素，以确定其包含在设计中的其他元素。正如蒂姆·卡德克（Tim Kadlec）所描述的那样，您的决定必须采取3条途径之一：
优化页面上的现有功能或资产
>从页面上删除现有功能或资产>虽然有许多GRUNT插件可以帮助您衡量网站性能，但我专注于我发现的最准确的插件：Grunt Perfbudget。这项出色的GRUNT任务使用WebPagetest.org API来测量您的网站，以相对大量有用的指标，例如页面重量，图像大小，脚本重量和渲染时间。您还可以为这些指标设置明确的预算，然后插件将对您的网站进行测量！
>获取API键
如果这是您第一次使用咕unt声，请查看我的教程，以与grunt grunt一起运行。
>如果您已经在计算机上安装了GRUNT，则只需要在我们设置性能测试之前安装Perfbudget插件即可。通过命令行导航到您的项目文件夹：
npm install grunt-perfbudget --save-dev
，或者如果您想使用一个示例项目，请分叉我的GitHub存储库，Grunt-perfbudget-demo并运行NPM安装以进行。
安装插件后，您需要设置插件选项并在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>
>！
>为了使我的网站通过并不会导致怪异的任务失败（因此停止在自动化构建环境中构建任何网站），我有两个选择：我可以编辑预算直到通过（用于测试，不太适合性能！），或者我可以遵循我的绩效预算规则：优化，删除东西或停止添加内容，直到通过默认指标为止。目前，让我们玩弄我们的艰苦任务，看看传球测试的外观。>
> perfbudget选项和WebPagetest Metrics>
首先，我要更改我的选项，以便我的网站停止失败，而咕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中有其他任务，它们将正常进行 - 成功！
>
除默认指标外，我们还能测量什么？各种各样的东西，包括：
最后一个指标是我最常见的报告，并且想跟踪预算目的，所以让我们看一下如何衡量它：
npm install grunt-perfbudget --save-dev
>我选择了总体预算为200万，因为此时的平均页面徘徊在2兆字节近于2兆字节左右。一旦编辑预算选项，我可以通过再次运行GRUNT任务来了解我的操作：
>
我的网站以3兆字节的价格计算，超出了预算！看起来我有一些工作要做。但是，作为开发人员，拥有此信息对我来说非常有用。没有其他Grunt插件以这种轻巧，易于测试的方式提供有关总页面重量的信息。测量这些重要的指标使我可以看到开发决策的真正影响，因为我正在编码> - 因此，我可以提高性能。
经常询问有关使用grunt.js> package.json文件在grunt project中的作用是什么？ > grunt项目中的package.json文件用于管理项目的依赖项。它列出了该项目需要运行的Grunt插件和其他NPM软件包。运行NPM安装后，NPM查看package.json文件并安装列出的软件包。这使得管理和共享您项目的依赖关系变得容易。
>
以上是与Grunt.js自动化性能测试的详细内容。更多信息请关注PHP中文网其他相关文章！
