我给项目加了性能守卫插件,同事叫我晚上别睡的太死-2

简介: 性能审计

性能审计

const lighthouse = require('lighthouse');
const puppeteer = require('puppeteer');
const nodemailer = require('nodemailer');
// 配置邮件发送器
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'your-email@gmail.com',
    pass: 'your-password',
  },
});
// 定义一个函数用于执行Lighthouse审计并处理结果
async function runAudit(url) {
  // 通过Puppeteer启动Chrome
  const browser = await puppeteer.launch({ headless: true });
  const { port } = new URL(browser.wsEndpoint());
  // 使用Lighthouse进行性能审计
  const { lhr } = await lighthouse(url, { port });
  // 检查性能得分是否低于阈值
  if (lhr.categories.performance.score < 0.9) {
    // 如果性能低于阈值,发送警告邮件
    let mailOptions = {
      from: 'your-email@gmail.com',
      to: 'admin@example.com',
      subject: '网站性能低于阈值',
      text: `Lighthouse得分:${lhr.categories.performance.score}`,
    };
    transporter.sendMail(mailOptions, function(error, info){
      if (error) {
        console.log(error);
      } else {
        console.log('Email sent: ' + info.response);
      }
    });
  }
  await browser.close();
}
// 使用函数
runAudit('https://example.com');

接下来,我们分步骤大概介绍下几个核心实现

数据告警

// 伪代码
const lighthouse = require('lighthouse');
const puppeteer = require('puppeteer');
const nodemailer = require('nodemailer');
// 配置邮件发送器
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'your-email@gmail.com',
    pass: 'your-password',
  },
});
// 定义一个函数用于执行Lighthouse审计并处理结果
async function runAudit(url) {
  // 通过Puppeteer启动Chrome
  const browser = await puppeteer.launch({ headless: true });
  const { port } = new URL(browser.wsEndpoint());
  // 使用Lighthouse进行性能审计
  const { lhr } = await lighthouse(url, { port });
  // 检查性能得分是否低于阈值
  if (lhr.categories.performance.score < 0.9) {
    // 如果性能低于阈值,发送警告邮件
    let mailOptions = {
      from: 'your-email@gmail.com',
      to: 'admin@example.com',
      subject: '网站性能低于阈值',
      text: `Lighthouse得分:${lhr.categories.performance.score}`,
    };
    transporter.sendMail(mailOptions, function(error, info){
      if (error) {
        console.log(error);
      } else {
        console.log('Email sent: ' + info.response);
      }
    });
  }
  await browser.close();
}
// 使用函数
runAudit('https://example.com');

处理设备、网络等不稳定情况

// 伪代码
// 网络抖动
const { lhr } = await lighthouse(url, {
  port,
  emulatedFormFactor: 'desktop',
  throttling: {
    rttMs: 150,
    throughputKbps: 1638.4,
    cpuSlowdownMultiplier: 4,
    requestLatencyMs: 0,
    downloadThroughputKbps: 0,
    uploadThroughputKbps: 0,
  },
});
// 设备
const { lhr } = await lighthouse(url, {
  port,
  emulatedFormFactor: 'desktop', // 这里可以设定为 'mobile' 或 'desktop'
});

用户登录态问题

也可以让后端同学专门提供一条内网访问的登录态接口环境,仅用于测试环境

const puppeteer = require('puppeteer');
const lighthouse = require('lighthouse');
const fs = require('fs');
const axios = require('axios');
const { promisify } = require('util');
const { port } = new URL(browser.wsEndpoint());
// promisify fs.writeFile for easier use
const writeFile = promisify(fs.writeFile);
async function runAudit(url, options = { port }) {
  // 使用Puppeteer启动Chrome
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // 访问登录页面
  await page.goto('https://example.com/login');
  // 输入用户名和密码
  await page.type('#username', 'example_username');
  await page.type('#password', 'example_password');
  // 提交登录表单
  await Promise.all([
    page.waitForNavigation(), // 等待页面跳转
    page.click('#login-button'), // 点击登录按钮
  ]);
  // 运行Lighthouse
  const { lhr } = await lighthouse(url, options);
  // 保存审计结果到JSON文件
  const resultJson = JSON.stringify(lhr);
  await writeFile('lighthouse.json', resultJson);
  // 上传JSON文件到服务器
  const formData = new FormData();
  formData.append('file', fs.createReadStream('lighthouse.json'));
  // 上传文件到你的服务器
  const res = await axios.post('https://your-server.com/upload', formData, {
    headers: formData.getHeaders()
  });
  console.log('File uploaded successfully');
  await browser.close();
}
// 运行函数
runAudit('https://example.com');

总结

性能插件插件还有很多需要考虑的情况,所以,不懂还是来私信问我吧,我同事要请我吃饭去了,不写了

目录
相关文章
|
JSON JavaScript 前端开发
继续死磕前端
继续死磕前端
|
16天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
29 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
3月前
|
存储 算法 Oracle
不好意思!耽误你的十分钟,JVM内存布局还给你
先赞后看,南哥助你Java进阶一大半在2006年加州旧金山的JavaOne大会上,一个由顶级Java开发者组成的周年性研讨会,公司突然宣布将开放Java的源代码。于是,下一年顶级项目OpenJDK诞生。Java生态发展被打开了新的大门,Java 7的G1垃圾回收器、Java 8的Lambda表达式和流API…大家好,我是南哥。一个Java学习与进阶的领路人,相信对你通关面试、拿下Offer进入心心念念的公司有所帮助。
不好意思!耽误你的十分钟,JVM内存布局还给你
|
6月前
|
设计模式 前端开发 JavaScript
一秒开挂!工厂模式让你告别重复代码!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
前端开发 JavaScript 安全
全程无尿点,死磕前端~
全程无尿点,死磕前端~
|
Web App开发 数据采集 存储
我给项目加了性能守卫插件,同事叫我晚上别睡的太死-1
由于我组主要是负责的是H5移动端项目,老板比较关注性能方面的指标,比如首页打开速度,所以一般会关注FP,FCP等等指标,所以一般项目写完以后都会用lighthouse查看,或者接入性能监控系统采集指标.
126 0
|
运维 JavaScript 前端开发
不知道中午应该吃什么?用vue写个实例帮我们抉择吧
不知道中午应该吃什么?用vue写个实例帮我们抉择吧
145 0
|
JavaScript 中间件 测试技术
Vite 太快了,烦死了,是时候该小睡一会了。
在知乎看参与 Vue Conf 2021 是怎样的体验?[1]这个问题的时候,偶然发现 Anthony Fu 的回答里提到了一个好玩的凡尔赛插件:vite-plugin-sleep[2]。
|
存储 机器学习/深度学习 监控
我是傻x,被迫看了 1 天源码,千万别学我!
大家好,我是零一,之前一直很忙,业余时间的输入和输出都 24k铝合金人眼可见 得下降,这不最近上海疫情严重么,算了一下居家办公也已经将近 1个月了,这才有些许时间学习,所以最近也是一直在鼓捣点新东西,不为别的,主要是想再多输入一些新的知识
176 0
我是傻x,被迫看了 1 天源码,千万别学我!
|
芯片
程序人生 - 手上总有静电该怎么处理?
程序人生 - 手上总有静电该怎么处理?
145 0
程序人生 - 手上总有静电该怎么处理?