如何使用NodeJS + Lighthouse + Gulp建立自動化網站效能測試的工具
這篇文章主要介紹瞭如何使用NodeJS Lighthouse Gulp建立自動化網站效能測試的工具,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
假設你還不知道Lighthouse是什麼
Lighthouse 是Google公司旗下一個開源的、可自動化檢測網站品質的工具,界面友好、操作簡單、使用方式多樣、視角全面,可以用它來測試任意網頁,普通使用者、QA、開發都可以快速上手。
啟動姿勢
難度係數1
使用Lighthouse的方式有很多種,最簡單的,可以使用Chrome 的開發者工具,步驟如下:
開啟Chrome 瀏覽器
按F12
-
在彈出的視窗中開啟audits 標籤
點選Perform an audit...勾選全部
#Run audit
- 安裝Node
- 安裝Lighthouse
npm install -g lighthouse
- 在命令列中run
lighthouse
first-meaningful-paint 毫秒數,最後取10次的平均值,為了視覺化與可讀性,最終的結果以網頁的形式展示,使用者可在網頁上看到每次執行Lighthouse 之後
first-meaningful-paint 的毫秒數,也可以看到平均值,如果使用者對某次執行的細節感興趣,可以點擊連結察看。最終的結果長這個樣子:
npm i lighthouse --save-dev npm i chrome-launcher --save-dev npm i fs-extra --save-dev npm i gulp --save-dev
lighthouse-config.js, 這裡我們全部使用預設配置,使用預設設定需在設定文件中宣告
extends: 'lighthouse:default'。
module.exports = { extends: 'lighthouse:default' }
- #Lighthouse 這篇大部分內容是關於命令列的,命令列參數同樣可用於Node
- throttling這篇是關於網路模擬的
- #Default Config 具體的預設設定參數
- #Web Page Test 模擬不同的網速
- Emulation 模擬不同的裝置
gulpfile.js,首先引入所有依賴的工具:
const gulp = require('gulp'); const lighthouse = require('lighthouse'); const chromeLauncher = require('chrome-launcher'); const printer = require('lighthouse/lighthouse-cli/printer'); const Reporter = require('lighthouse/lighthouse-core/report/report-generator'); const fs = require('fs-extra'); const config = require('.lighthouse-config.js');
async function write(file, report) { try { await fs.outputFile(file, report); } catch (Error e) { console.log("error while writing report ", e); } }
--headless表示不開啟 browser 視窗。
async function launchChrome() { let chrome; try { chrome = await chromeLauncher.launch({ chromeFlags: [ "--disable-gpu", "--no-sandbox", "--headless" ], enableExtensions: true, logLevel: "error" }); console.log(chrome.port) return { port: chrome.port, chromeFlags: [ "--headless" ], logLevel: "error" } } catch (e) { console.log("Error while launching Chrome ", e); } }
async function lighthouseRunner(opt) { try { return await lighthouse("https://www.baidu.com", opt, config); } catch (e) { console.log("Error while running lighthouse"); } }
由於這裡我們需要使用Lighthouse 官方的模板產生報告,因此呼叫官方提供的方法,注意第一個參數傳入
result.lhr, 第二個參數聲明產生html 報告(還可以產生csv 等格式的報告)。
function genReport(result) { return Reporter.generateReport(result.lhr, 'html'); }
start 方法傳回結果中的
first-meaningful-paint(這是我們最關心的指標,讀者可依自身需求替換,具體指標可參考 Lighthouse)。
async function run(timestamp, num) { let chromeOpt = await launchChrome(); let result = await lighthouseRunner(chromeOpt); let report = genReport(result); await printer.write(report, 'html', `./cases/lighthouse-report@${timestamp}-${num}.html`); return result.lhr.audits['first-meaningful-paint'].rawValue; await chrome.kill(); }
下面, 我们可以正式开始写一个 gulp task 啦,首先获得当前时间戳,用于最终生成的报告命名,然后声明一个数组,用于记录每次跑 Lighthouse 生成的 first-meaningful-paint
毫秒数,然后跑10次 Lighthouse, 使用提前创建的模板文件,根据这10的结果,生成一个汇总报告,这里,笔者使用了Lighthouse对外暴露的工具函数进行字符串的替换。
gulp.task('start', async function() { let timestamp = Date.now(); let spent = []; for(let i=0; i<p>最后的最后, 执行:</p><pre class="brush:php;toolbar:false">gulp start
万事大吉。
附上汇总界面的模板源码:
nbsp;html> <meta> <meta> <title>Lighthouse Summary Report</title> <style> body { font-family: sans-serif; } table { margin: auto; } tr { border: 1px solid grey; } h1 { text-align: center; margin: 30px auto 50px auto } </style>
Case No. | First Meaningful Paint | Link To Details |
---|
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
jQuery+AJAX+PHP+MySQL开发搜索无跳转无刷新的功能
关于vue中extend,mixins,extends,components,install的操作
以上是如何使用NodeJS + Lighthouse + Gulp建立自動化網站效能測試的工具的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

JavaScript是一種廣泛應用於Web開發的程式語言,而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能,我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統,並提供具體的程式碼範例。首先,我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備,可以擷取即時的影像數
