[Тест производительности внешнего интерфейса] Недовольны? Тогда беги за баллами! ! !

JavaScript
[Тест производительности внешнего интерфейса] Недовольны? Тогда беги за баллами! ! !

передняя часть Seewo ENOW

Официальный сайт компании:CVTE (Гуанчжоу CVTE)

Команда: enow team центра программных платформ Seewo для будущего образования в рамках CVTE

Автор этой статьи:

小羽名片.png

hello, Всем привет, я одноклассник Сяоюй. Обычный, но не желающий быть обычным фронтенд-разработчиком!

Все должны быть знакомы с бегущими точками, верно? Особенно рисовая лапша, что сказал Босс Лэй不服？那就跑个分！Должно быть на виду, да? Хахаха

В ежедневном процессе фронтенд-разработки друзья более или менее подвергались оптимизации производительности, верно? Но как вы обычно определяете, улучшилась ли производительность?GoogleИнструмент с открытым исходным кодом -LighthouseОно тоже возникло.

LighthouseОн в основном используется для анализа веб-приложений и веб-страниц, собирая современные показатели производительности и предоставляют советы разработчикам о лучших практиках. Для инженеров по развитию переднего развития вы должны быть четкими и краткими, чтобы увидеть недостатки проекта, а также метода оптимизации. Ежедневное развитие - редкий артефакт ах!

простой в использовании

установка плагина маяк

chromeмагазин, поискlighthouse, затем добавьте.

Настроить тестовый проект

затем вchromeОткройте плагин на панели плагинов вверху. Щелкните значок настроек, и вы также можете выбрать элемент для тестирования (текущая оценка), а также тестpcТерминал или веб-страница на мобильном терминале.

тест (бегущий балл)

Затем мы просто нажимаемgenerate reportКнопка может напрямую войти в тест, а результаты появятся через некоторое время. На картинке ниже мыENOW 大前端团队Тестовый результат домашней страницы Nuggets, вы можете увидеть掘金изseoОптимизация по-прежнему очень хороша, хахаха~

Весь отчет о тестировании нам указывает на различные параметры производительности, связанные со страницей, а затем также дали нам много связанных с предложениями оптимизации. Небольшие партнеры, которые заинтересованы, вы можете понять глубокое понимание каждого параметра о ~

image.png

Теперь есть инструменты для тестирования производительности, но если вы найдете это, вы можете протестировать его только по одной странице за раз, что так хлопотно. Если есть десятки страниц, вы должны перейти к ним по одной. Вы бы доставили хлопот? Во всяком случае, для таких людей, как Сяоюй, которые устали от монотонной работы, они уже устали от нее (╯°Д°)╯︵┻━┻

Теперь вопрос, есть ли удобный способ? По одному пункту проверить не всегда получается.

Не волнуйтесь, галантерейные товары скоро будут здесь~

На самом деле, кромеchromeКак использовать плагин, мы также можем использовать命令行способ позвонитьLighthouse.

1. Глобальная установкаlighthouse

npm install -g lighthouse

2. Войдите на свою страницу

lighthouse http://test.com

Сяоюй не будет показывать это здесь, давайте сразу к теме, хе-хе~

Сделать эталонный инструмент

Интерфейсный инструмент для тестирования производительности, который мы хотим создать, в основном основан на помощиlighthouseэтоnpmПакет иgulpсценарий.

1. Инициализировать проект

Создайте новую папку, Сяоюй здесьenow-lighthouse, затем создайте новыйpackage.jsonи напишите соответствующий контент, затемcnpm installУстановите некоторые зависимости, которые нам нужны для написания инструментов

{
  "name": "enow-lighthouse",
  "version": "1.0.0",
  "description": "ENOW大前端——lighthouse测试工具",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"gulp start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chrome-launcher": "^0.13.4",
    "del": "^6.0.0",
    "fs-extra": "^9.1.0",
    "gulp": "^4.0.2",
    "lighthouse": "^7.3.0"
  }
}

2. Пишите gulp-скрипты

1. Создать в корневом каталогеgulpfile.js

затем вgulpfile.jsНапишите следующий фрагмент кода, чтобы проверить, может ли наш проект работать нормально. Если это нормально, он будет отображаться, как показано ниже.ENOW 大前端~

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 del = require("del")
let chrome

gulp.task("start",async function(cb){
  console.log("ENOW 大前端")
  cb()
})

2. НовыйlaunchChromeметод, который используется для запускаchrome, и верните требуемыйchromeИнформация

  • --headlessзначит не открываетсяbrowserокно
  • --disable-gpuУказывает, что он не включенgpu
  • --no-sandboxУказывает, что режим песочницы не включен
// 开启chrome
async function launchChrome() {
  try {
      chrome = await chromeLauncher.launch({
          chromeFlags: [
              "--disable-gpu",
              "--no-sandbox",
              "--headless"
          ],
          enableExtensions: true,
          logLevel: "error"
      });
      return {
          port: chrome.port,
          chromeFlags: [
              "--headless"
          ],
          logLevel: "error"
      }
  } catch (e) {
      console.log("ENOW lighthouse error: launching Chrome ", e);
  }
}

3. НовыйlighthouseRunnerметод, который используется для запускаlighthousetest и вернуть результат теста

// 启动lighthouse测试
async function lighthouseRunner(url, opt, config={extends: 'lighthouse:default'}) {
  try {
      return await lighthouse(url, opt, config);
  } catch (e) {
      console.log("ENOW lighthouse error: running lighthouse");
  }
}

4. НовыйgenReportметод, который используется для получения отчета о текущей страницеhtmlстраницу и вернуть сгенерированныйhtmlстраница

// 生成当前页面的报告
function genReport(result) {
  return Reporter.generateReport(result.lhr, 'html');
}

5. Новыйrunметод, который является тестовой записью для каждой страницы

// 每个页面的测试入口
async function run(url, timestamp, config) {
  let chromeOpt = await launchChrome();
  let result = await lighthouseRunner(url, chromeOpt, config);
  let report = genReport(result);
  // 保存报告
  await printer.write(report, 'html', `./cases/lighthouse-report@${timestamp}.html`);
  // 关闭chrome
  await chrome.kill();
  return
}

6. Модификацияgulp.task, а затем создайте новый в корневом каталогеcasesпапку, затем запуститеnpm run startПодождав некоторое время, вы обнаружите, что во вновь созданномcasesНужный отчет о тестировании производительности создается в папке ~

gulp.task("start",async function(cb){
  let taskList = [
    `https://juejin.cn/`,
    `https://juejin.cn/`,
    `https://juejin.cn/`,
  ]
  for(let item of taskList){
    let timestamp = Date.now();
    await run(item,timestamp)
  }
  cb()
})

Сяоюй, ты тут много всего написала, и мне больно смотреть на это! ! !

На самом деле тут много всего, но логика все равно понятна~

Подождите, пока Сяоюй проанализирует волну друзей:

  • Сначала мы бежимnpm run startпозвонюgulp start, затем введитеgulp.task()середина
  • потомgulp.task()это пересечьtaskList, а затем позвонитеrun方法(Тестовая запись для каждой страницы)
  • run方法передачаlaunchChrome(), затем вернутьсяchromeСвязанная информация
  • run方法передачаlighthouseRunner(), затем вернуть результат теста
  • run方法передачаgenReport(), который возвращает сгенерированныйhtmlстраница
  • run方法Пучокhtmlстраница записывается в файл
  • закрытиеchrome

до этого момента,gulpfile.jsКод в следующем

/*
 * @Description: 
 * @Author: 小羽
 * @LastEditors: 小羽
 * @Date: 2021-04-11 23:05:22
 * @LastEditTime: 2021-04-12 00:30:55
 */
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 del = require("del")
let chrome

// 开启chrome
async function launchChrome() {
  try {
      chrome = await chromeLauncher.launch({
          chromeFlags: [
              "--disable-gpu",
              "--no-sandbox",
              "--headless"
          ],
          enableExtensions: true,
          logLevel: "error"
      });
      return {
          port: chrome.port,
          chromeFlags: [
              "--headless"
          ],
          logLevel: "error"
      }
  } catch (e) {
      console.log("ENOW lighthouse error: launching Chrome ", e);
  }
}


// 启动lighthouse测试
async function lighthouseRunner(url, opt, config={extends: 'lighthouse:default'}) {
  try {
      return await lighthouse(url, opt, config);
  } catch (e) {
      console.log("ENOW lighthouse error: running lighthouse");
  }
}

// 获取当前页面的报告
function genReport(result) {
  return Reporter.generateReport(result.lhr, 'html');
}

// 每个页面的测试入口
async function run(url, timestamp, config) {
  let chromeOpt = await launchChrome();
  let result = await lighthouseRunner(url, chromeOpt, config);
  let report = genReport(result);
  // 保存报告
  await printer.write(report, 'html', `./cases/lighthouse-report@${timestamp}.html`);
  // 关闭chrome
  await chrome.kill();
  return
}

gulp.task("start",async function(cb){
  let taskList = [
    `https://juejin.cn/`,
    `https://juejin.cn/`,
    `https://juejin.cn/`,
  ]
  for(let item of taskList){
    let timestamp = Date.now();
    await run(item,timestamp)
  }
  cb()
})

3. Извлеките список задач

Вообще говоря, наш список задач не прописывается прямо в методе, чтобы соответствовать低耦合,高内聚Идея программирования, мы извлекаем наш список задач отдельно, а затем используемrequireпознакомился сgulpfile.jsсередина. Создайте новый в корневом каталогеtaskList.js.

Когда нам нужно измерить производительность определенной страницы, мы можем поставитьtaskList.jsменяй все на одинаковыеurlПросто хорошо. Если вы хотите измерить общую производительность веб-сайта, просто скопируйте в него все URL-адреса веб-сайта.

Интересно, как получить рейтинг平均值так же как总报告, перейдите к следующему разделу (✧◡✧)

// taskList.js
module.exports = [
  `https://juejin.cn/`,
  `https://juejin.cn/`,
  `https://juejin.cn/`,
]

// gulpfile.js
const taskList = require("./taskList")

// 省略中间的代码。。。

gulp.task("start",async function(cb){
  for(let item of taskList){
    let timestamp = Date.now();
    await run(item,timestamp)
  }
  cb()
})

4. Создать общий отчет

Хотя теперь мы можем проектировать一键Оценка работает, но вы обнаружили, что существует много сгенерированных файлов, и вам нужно щелкать один за другим, чтобы увидеть информацию о нашей странице, не так ли?

stop, не спрашивай, просто спроси成妾做不到! ! !

Хахаха, дразнить вас, ребята, кроме программистов产品经理Предложенный需求Его нельзя завершить, в других случаях это супермощно [ручная собачья голова]

Изменить код,

npm run startЗапустите программу бенчмаркинга и выведите результаты бенчмарков маяка, чтобы увидеть их первыми.

В нашем корневом каталоге будет сгенерированfile.txtдокумент. Следите за открытием. . . Что за чертовщина? Я его вообще не вижу, что делать?

не волнуйся,山人自有妙计

Откройте отчет, который мы изначально создали, и вы найдете его после небольшого анализа.file.txtсередина,lhr字段Вывод данных — это фактически вывод данных в нашей консоли. Затем посмотрите данные в консоли [Dog Head]

добавить одинwrite()метод, функция заключается в выводе в файл, здесь для создания нашего общего отчета

// 生成总报告
async function write(file, report) {
  try {
      await fs.outputFile(file, report);
      return true
  } catch (e) {
      console.log("error while writing report ", e);
  }
}

Исправлятьrunметод,runДанные возвращаются в методе, друзья хотят вернуть эти поля и сделать свой собственный выборokЛа~

async function run(url, timestamp, num, config) {
  let chromeOpt = await launchChrome();
  let result = await lighthouseRunner(url, chromeOpt, config);
  let report = genReport(result);
  // 保存报告
  await printer.write(report, 'html', `./cases/lighthouse-report@${timestamp}-${num}.html`);
  result.lhr.audits['first-contentful-paint'].rawValue;
  let res = {
      audits:{
          "first-contentful-paint":result.lhr.audits['first-contentful-paint']
      },
      categories:result.lhr.categories,
      lighthouseVersion:result.lhr.lighthouseVersion,
      requestedUrl:result.lhr.requestedUrl
  }
  // 关闭chrome
  await chrome.kill();
  return res;//result.lhr
}

Добавить в корневой каталогsummary/template/template.html,template.htmlЭто наш общий файл шаблона отчета.Сяоюй также случайно пишет его здесь.Друзья могут играть свободно~

Исправлятьgulp.task()

gulp.task("start",async function(cb){
  let timestamp = Date.now();
  let spent = [];
  console.log(`共 ${taskList.length} 个任务`)
  for (let i = 0; i < taskList.length; i++) {
    console.log(`当前第 ${i+1} 个任务`)
    spent.push(await run(taskList[i], timestamp, i));
  }
  // 替换模板中的内容
  let template = await fs.readFileSync('./summary/template/template.html', 'utf-8');
  let summary = Reporter.replaceStrings(template, [{
    search: '%%TIME_SPENT%%',
    replacement: JSON.stringify(spent)
  }, {
    search: '%%TIMESTAMP%%',
    replacement: timestamp
  }]);
  await write(`./summary/report/summary@${timestamp}.html`, summary)
  cb()
})

Кекекеке, поднимите себе настроение и посмотрите на наши результаты.

npm run start, вы найдете в нашемsummary/reportсоздал новыйhtmlфайл, давайте откроем его

5. Добавьте команды для ПК и мобильных устройств

emmm, нет, есть еще проблемы, потому что мы всегда тестировали мобильный терминал, как мы тестируемpcконец? ? ? Вы не можете менять конфигурацию каждый раз, когда тестируете ее, верно?

Добавить в корневой каталогconstants.js,lighthouse-desktop-config.js (со стороны ПК),lighthouse-mobile-config.js (мобильный терминал)

Поскольку мобильный терминал и компьютерный терминал разделены, существует только один исходный gulp.task(), которого недостаточно, поэтому добавьте еще один. Тогда его легко отличить, а затем изменить название наcreate:report-desktopа такжеcreate:report-mobile. Исправлятьgulpfile.js,package.json.

// gulpfile.js
const desktopConfig = require('./lighthouse-desktop-config.js');
const mobileConfig = require('./lighthouse-mobile-config.js');


// 省略部分代码。。。

gulp.task('create:report-desktop',async function(cb){
  let timestamp = Date.now();
  let spent = [];
  console.log(`共 ${taskList.length} 个任务`)
  for (let i = 0; i < taskList.length; i++) {
    console.log(`当前第 ${i+1} 个任务`)
    spent.push(await run(taskList[i], timestamp, i , desktopConfig));
  }
  // 替换模板中的内容
  let template = await fs.readFileSync('./summary/template/template.html', 'utf-8');
  let summary = Reporter.replaceStrings(template, [{
    search: '%%TIME_SPENT%%',
    replacement: JSON.stringify(spent)
  }, {
    search: '%%TIMESTAMP%%',
    replacement: timestamp
  }]);
  await write(`./summary/report/summary@${timestamp}.html`, summary)
  cb()
})

gulp.task('create:report-mobile',async function(cb){
  let timestamp = Date.now();
  let spent = [];
  console.log(`共 ${taskList.length} 个任务`)
  for (let i = 0; i < taskList.length; i++) {
    console.log(`当前第 ${i+1} 个任务`)
    spent.push(await run(taskList[i], timestamp, i, mobileConfig));
  }
  // 替换模板中的内容
  let template = await fs.readFileSync('./summary/template/template.html', 'utf-8');
  let summary = Reporter.replaceStrings(template, [{
    search: '%%TIME_SPENT%%',
    replacement: JSON.stringify(spent)
  }, {
    search: '%%TIMESTAMP%%',
    replacement: timestamp
  }]);
  await write(`./summary/report/summary@${timestamp}.html`, summary)
  cb()
})

// package.json

{
  "name": "enow-lighthouse",
  "version": "1.0.0",
  "description": "ENOW大前端——lighthouse测试工具",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "create:report-desktop":"gulp create:report-desktop",
    "create:report-mobile":"gulp create:report-desktop"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chrome-launcher": "^0.13.4",
    "del": "^6.0.0",
    "fs-extra": "^9.1.0",
    "gulp": "^4.0.2",
    "lighthouse": "^7.3.0"
  }
}

На данный момент у нас больше нет команды запуска, поэтому команда запуска становитсяnpm run create:report-desktopа такжеnpm run create:report-mobile

6. Удалите старые тестовые файлы

Но вы, ребята, обнаружили, что наши файлы отчетов остаются позади каждый раз, когда мы запускаем, и они накапливаются все больше и больше?

gulpfile.jsдобавить триgulp.task(). затем изменитьpackage.jsonсредний порядок

  • npm run mobile: Очистите файл, затем выполните мобильный тест.
  • npm run desktop: Очистите файл, а затем выполните тест на стороне ПК.
  • npm run clean: очистить файлы
  • npm run create:report-mobile: выполнение мобильных тестов
  • npm run create:report-desktop: выполнение тестов на стороне ПК.

Проще говоря, здесьgulpсередина,gulp.series()выполняется последовательно, каждый раз执行一个. а такжеgulp.paralle(), тогда并发В ходе выполнения.

// gulpfile.js
// 清理数据
gulp.task('clean:report', function (cb) {
  del([
      'cases/**/*',
      'summary/report/**/*',
  ], cb);
  cb()
});

// gulp.series：按照顺序执行
// gulp.paralle：可以并行计算
gulp.task("start-desktop", gulp.series("clean:report","create:report-desktop"), function () {})
gulp.task("start-mobile", gulp.series("clean:report","create:report-mobile"), function () {})

// package.json
{
  "name": "enow-lighthouse",
  "version": "1.0.0",
  "description": "ENOW大前端——lighthouse测试工具",
  "main": "index.js",
  "scripts": {
    "mobile":"gulp start-mobile",
    "desktop":"gulp start-desktop",
    "clean":"gulp clean:report",
    "create:report-desktop":"gulp create:report-desktop",
    "create:report-mobile":"gulp create:report-desktop"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chrome-launcher": "^0.13.4",
    "del": "^6.0.0",
    "fs-extra": "^9.1.0",
    "gulp": "^4.0.2",
    "lighthouse": "^7.3.0"
  }
}

Что ж, теперь весь наш инструмент для бенчмаркинга готов. Если найдется молодой человек, который скажет, какая мощная веб-страница, которую он написал, то он больше ничего не скажет, возьмите этот инструмент для бенчмаркинга и давайте соревноваться~

послесловие

Эта статья в основном сочетает в себеGoogleпроект с открытым исходным кодомLighthouseа такжеgulp脚本Написал инструмент для бенчмаркинга производительности. Он в основном используется, чтобы помочь фронтенд-разработчикам получить более полное представление об их веб-сайтах/проектах, быстро определить преимущества и недостатки, а также направления для улучшения.

Категории