目錄
假設你還不知道Lighthouse是什麼
啟動姿勢
難度係數1
Performance Summary Report
首頁 web前端 js教程 如何使用NodeJS + Lighthouse + Gulp建立自動化網站效能測試的工具

如何使用NodeJS + Lighthouse + Gulp建立自動化網站效能測試的工具

Jul 13, 2018 pm 04:46 PM
gulp javascript lighthouse node.js

這篇文章主要介紹瞭如何使用NodeJS Lighthouse Gulp建立自動化網站效能測試的工具,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

假設你還不知道Lighthouse是什麼

Lighthouse 是Google公司旗下一個開源的、可自動化檢測網站品質的工具,界面友好、操作簡單、使用方式多樣、視角全面,可以用它來測試任意網頁,普通使用者、QA、開發都可以快速上手。

啟動姿勢

難度係數1

使用Lighthouse的方式有很多種,最簡單的,可以使用Chrome 的開發者工具,步驟如下:

  1. 開啟Chrome 瀏覽器

  2. 按F12

  3. 在彈出的視窗中開啟audits 標籤

  4. 點選Perform an audit...勾選全部

  5. #Run audit

## 難度係數2

也可以使用命令列。

  1. 安裝Node

  2. 安裝Lighthouse

    npm install -g lighthouse

  3. 在命令列中run

    lighthouse

#以上兩種使用方式都不是本文的重點,如果想深入了解,可參考Run Lighthouse in DevTools

難度係數3

由於最近在學習NodeJS, 因此筆者決定使用Node 8 Gulp 來跑lighthouse,為了提高結果的準確性,每次task都跑10次lighthouse, 並且只關心結果指標中的

first-meaningful-paint 毫秒數,最後取10次的平均值,為了視覺化與可讀性,最終的結果以網頁的形式展示,使用者可在網頁上看到每次執行Lighthouse 之後first-meaningful-paint 的毫秒數,也可以看到平均值,如果使用者對某次執行的細節感興趣,可以點擊連結察看。最終的結果長這個樣子:

如何使用NodeJS + Lighthouse + Gulp建立自動化網站效能測試的工具

如何使用NodeJS + Lighthouse + Gulp建立自動化網站效能測試的工具

#環境建置

安裝Node 8

#安裝依賴套件

npm i lighthouse --save-dev
npm i chrome-launcher --save-dev
npm i fs-extra --save-dev
npm i gulp --save-dev
登入後複製
配置

在專案根目錄下建立Lighthouse的設定檔

lighthouse-config.js, 這裡我們全部使用預設配置,使用預設設定需在設定文件中宣告extends: 'lighthouse:default'

module.exports = {
    extends: 'lighthouse:default'
}
登入後複製
如果讀者需要了解更詳細的設定選項,可參考:

  1. #Lighthouse 這篇大部分內容是關於命令列的,命令列參數同樣可用於Node

  2. throttling這篇是關於網路模擬的

  3. #Default Config 具體的預設設定參數

  4. #Web Page Test 模擬不同的網速

  5. Emulation 模擬不同的裝置

Coding

在專案根目錄下建立

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');
登入後複製
在開始使用lighthouse 之前,首先建立一個寫入檔案的方法, 用於最後產生自訂的report 文件:

async function write(file, report) {
    try {
        await fs.outputFile(file, report);
    } catch (Error e) {
        console.log("error while writing report ", e);
    }
}
登入後複製
在呼叫Lighthouse 之前,我們需要先啟動一個Chrome 的instance ,並將連接埠號碼提供給Lighthouse 。

--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);
    }
}
登入後複製
Chrome 實例啟動之後,我們就可以呼叫Lighthouse , 呼叫時,須提供需要進行效能測試的網站,參數,以及前文創建好的配置,參數包含了Chrome 啟動端口,啟動方式(是否headless 等資訊)。

async function lighthouseRunner(opt) {
    try {
        return await lighthouse("https://www.baidu.com", opt, config);
    } catch (e) {
        console.log("Error while running lighthouse");
    }
}
登入後複製
Lighthouse 的返回結果是一個包含效能測試結果, 最終版的配置參數, 指標分組等資訊的 json 對象,讀者可以參考 Understanding Results 獲得更深入的理解。

由於這裡我們需要使用Lighthouse 官方的模板產生報告,因此呼叫官方提供的方法,注意第一個參數傳入
result.lhr, 第二個參數聲明產生html 報告(還可以產生csv 等格式的報告)。

function genReport(result) {
    return Reporter.generateReport(result.lhr, 'html');
}
登入後複製
下面我們寫一個將上面幾個方法串起來的函數,先啟動一個Chrome 實例, 然後將Chrome 實例的某些參數傳遞給Lighthouse,使用lighthouse 跑出來的結果產生報告,並寫入html 文件, 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>


登入後複製
  

Performance Summary Report

                          
      Case No.            First Meaningful Paint            Link To Details     
<script> let timespent = %%TIME_SPENT%%; let timestamp = %%TIMESTAMP%%; let tableBody = document.getElementById("tableBody"); let content = &#39;&#39;; for(let i=0; i < timespent.length; i++) { content += `<tr style="border: 1px solid grey"> <td> ${i+1} <td> ${timespent[i]} <td> <a href="../../cases/lighthouse-report@${timestamp}-${i}.html">View Details ` } let total = timespent.reduce((i, j) => { return i + j; }) let count = timespent.filter(function(i) { return i}).length content += `<tr> <td> AVG <td> ${total / count} ` tableBody.innerHTML = content; </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

 jQuery+AJAX+PHP+MySQL开发搜索无跳转无刷新的功能

关于vue中extend,mixins,extends,components,install的操作

Vue+Mock.js如何搭建前端独立开发环境

以上是如何使用NodeJS + Lighthouse + Gulp建立自動化網站效能測試的工具的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

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

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

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

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

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

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

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

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

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

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

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

javascript如何使用insertBefore javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

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

JavaScript與WebSocket:打造高效率的即時影像處理系統 JavaScript與WebSocket:打造高效率的即時影像處理系統 Dec 17, 2023 am 08:41 AM

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

See all articles