discuz 科技网站模板百度普通版下载

grunt.js

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

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

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

您还可以根据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任务来查看操作方法：

我的网站时钟超过3兆字节，超出预算！ 看起来我有一些工作要做。 但是，掌握这些信息对于我作为开发人员来说非常有用。 没有其他Grunt插件以这种轻便，易于测试的方式提供有关页面总重量的信息。 衡量这些重要指标可以使我在编写代码时看到开发决策的实际影响，从而帮助我提高性能。

翻译自: https://www.sitepoint.com/automate-performance-testing-grunt-js/

grunt.js