與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中文網其他相關文章！