前端性能测试

liucheng58
281 阅读9分钟

1、前端性能测试

‌前端性能测试‌是指对Web应用的前端性能进行评估和优化的过程，旨在确保用户在访问网页或应用时能够获得流畅、快速的体验。前端性能测试主要关注以下几个方面：

  1. ‌响应时间‌：测试网页或应用的响应时间，包括页面加载时间、首字节时间、渲染开始时间等，确保用户在短时间内获得所需信息‌。
  2. ‌资源加载‌：检测页面加载的各种资源（如图片、脚本、样式表等）的字节数和加载时间，优化资源加载可以显著提升页面加载速度‌。
  3. ‌用户界面和用户体验‌：确保界面设计与产品需求和设计原型一致，评估应用流程的直观性，确保新用户能够轻松理解和使用产品功能‌。
  4. ‌兼容性‌：测试在不同浏览器、操作系统和设备上的兼容性，确保应用在不同环境下都能正常运行‌。

前端性能测试的场景包括：

  • ‌卡顿‌：测试游戏的帧率和卡帧率，确保游戏流畅运行‌。
  • ‌崩溃‌：检测应用在运行过程中的崩溃率，确保应用的稳定性。
  • ‌发热和耗电‌：优化应用的功耗，减少手机发热和耗电过快的问题‌。

优化策略包括：

  • ‌缓存管理‌：合理使用缓存机制，减少不必要的网络请求和数据传输‌。
  • ‌代码优化‌：优化前端代码，减少不必要的计算和资源消耗。
  • ‌资源压缩‌：压缩图片、脚本和样式表等资源，减少加载时间‌。

2、无头浏览器

2.1 概念

是指没有图形用户界面（GUI）的浏览器。 ‌这意味着它没有传统的按钮、图标和窗口等用户交互元素，完全通过命令行或编程接口进行操作‌。

由于没有GUI，它的执行速度更快，能够在没有图形界面的服务器上运行。无头浏览器通过编程接口（API）进行控制，可以自动执行各种操作，如网页登录、JavaScript解析、动态内容生成等‌。

2.2 应用场景有哪些？

  • （1）数据提取
    无头浏览器擅长网页内容抓取，能够在没有界面的环境下，导航网页、解析HTML和检索数据，从而有效地从网站中提取信息。
  • （2）自动化测试
    无头浏览器在自动化测试领域可以扮演关键角色。它们可以在无人工干预的情况下在Web应用程序上执行测试脚本，实现对Web的功能和性能测试。这种方式加速了测试过程，保证了最终产品质量。
  • （3）性能指标优化
    无头浏览器对于性能监控也很有价值。它们可以测量网页加载时间、执行速度等关键指标，从而深入了解网站的效率。这些基准测试有助于识别瓶颈，提高用户体验。
  • （4）创建网页快照
    无头浏览器可以在任意时间以编程方式生成网页截图，用于帮助编制文档、调试和验证UI。
  • （5）模拟用户行为
    实现用户交互自动化是无头浏览器最强大的功能之一。它们可以模拟点击、表单提交和其他Web操作。通过模仿真实的用户行为，对于测试复杂的工作流程以及确保流畅的用户体验至关重要。

2.3 开源框架

  • Chrome headless：  Chrome headless是Chrome浏览器的一个版本，可以在没有GUI的情况下运行。它是一个强大的工具，可以用于各种任务，如网络爬虫和测试。
  • Firefox headless：  Firefox headless是Firefox浏览器的一个版本，可以在没有GUI的情况下运行。对于需要高度与Firefox浏览器兼容性的任务，它是一个不错的选择。
  • Puppeteer：  Puppeteer是一个基于Chrome构建的无头浏览器。它是一个强大的工具，可以用于各种任务，如网络爬虫和测试。
  • PhantomJS：  PhantomJS是一个无头浏览器，不再得到积极维护。但是，它仍然是需要对渲染过程有高度控制的任务的流行选择。
  • Selenium：  Selenium是一个流行的用于自动化Web浏览器的框架。它可以用于运行无头浏览器，如Chrome headless和Firefox headless。

3、Pyppeteer

Puppeteer是一个开源的Node.js库，它通过DevTools协议实现了一些API来控制Chrome或Chromium。它可以实现浏览器任务的自动化，例如：Web抓取、自动测试和性能监控等。

import puppeteer from 'puppeteer';
(async () => {
  // Launch the browser and open a new blank page
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Navigate the page to a URL
  await page.goto('https://developer.chrome.com/');

  // Set screen size
  await page.setViewport({width: 1080, height: 1024});

  // Type into search box
  await page.type('.devsite-search-field', 'automate beyond recorder');

  // Wait and click on first result
  const searchResultSelector = '.devsite-result-item-link';
  await page.waitForSelector(searchResultSelector);
  await page.click(searchResultSelector);

  // Locate the full title with a unique string
  const textSelector = await page.waitForSelector(
    'text/Customize and automate'
);
  const fullTitle = await textSelector?.evaluate(el => el.textContent);

  // Print the full title
  console.log('The title of this blog post is "%s".', fullTitle);

  await browser.close();
})();

4、Selenium WebDriver

开发语言：支持Java、Python、Javascript、Ruby、.Net、C++、Rust...

demo: JAVA 实现网页生成pdf

import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
 
public class SeleniumScreenshotExample {
    public static void main(String[] args) {
        // 设置webdriver路径
        System.setProperty("webdriver.gecko.driver", "C:\\path\\to\\geckodriver.exe");
 
        // 初始化webdriver
        WebDriver driver = new FirefoxDriver();
 
        // 打开网页
        driver.get("http://www.example.com");
 
        // 实例化截图对象
        TakesScreenshot takesScreenshot = (TakesScreenshot) driver;
 
        // 生成截图并保存
        byte[] screenshot = takesScreenshot.getScreenshotAs(OutputType.BYTES);
        try {
            // 保存截图到文件
            java.nio.file.Path path = java.nio.file.Paths.get("C:\\path\\to\\screenshot.png");
            java.nio.file.Files.write(path, screenshot);
        } catch (Exception e) {
            e.printStackTrace();
        }
 
        // 关闭webdriver
        driver.quit();
    }
}

demo: node 实现网页生成pdf

npm install selenium-webdriver

const { Builder } = require('selenium-webdriver');
const fs = require('fs');
const chrome = require('selenium-webdriver/chrome');
 
(async function() {
  let driver;
  try {
    // 设置Chrome的启动选项，以便在头less模式下运行，并且能够打印为PDF
    driver = await new Builder().forBrowser('chrome').setChromeOptions(
      new chrome.Options().headless().addArguments(
        '--disable-gpu',
        '--no-sandbox',
        '--print-to-pdf'
      )
    ).build();
 
    // 设置打印为PDF的输出路径
    const outputPath = 'output.pdf';
    const pdfArgs = {
      'printToPDF': {
        'path': outputPath,
        'displayHeaderFooter': false,
        'landscape': false,
        'pageRanges': '1',
        'format': 'A4'
      }
    };
 
    // 要转换为PDF的网页URL
    const url = 'http://www.example.com';
 
    // 导航到网页
    await driver.get(url);
 
    // 执行打印为PDF的命令
    await driver.execute('Page.printToPDF', pdfArgs);
 
    // 读取PDF文件并写入到本地
    const pdf = fs.readFileSync(outputPath);
    fs.writeFileSync('printed.pdf', pdf);
 
    console.log('PDF generated successfully.');
  } finally {
    if (driver) {
      await driver.quit();
    }
  }
})();

5、测试工具

尽管Puppeteer可以模拟用户操作和进行性能分析，但它本身并不提供详细的性能报告和优化建议。测试工具专注于性能检测和报告生成，能够提供具体的性能指标和改进建议。

  • WebPageTest：提供全方位的量化指标，包括页面的加载时间、首字节时间、渲染开始时间等‌。
  • PageSpeed Insights：由Google提供，用于分析网页性能并提供优化建议‌。
  • SiteSpeed：一个开源工具，用于测量和分析Web页面的性能‌。
  • Lighthouse：Google开发的工具，可以分析Web应用的性能、Accessibility、SEO等，并提供详细的报告‌。

6、Lighthouse

使用方式

  • 在 Chrome DevTools 中。Lighthouse 在 Chrome DevTools 中拥有自己的面板，您可以直接在浏览器中审核需要进行身份验证的页面，并以易于用户理解的格式解读您的报告。
  • 通过命令行。使用 Shell 脚本自动运行 Lighthouse。
  • 作为 Node 模块。 npm install -g lighthouse
import fs from 'fs';
import lighthouse from 'lighthouse';
import * as chromeLauncher from 'chrome-launcher';

const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port};
const runnerResult = await lighthouse('https://example.com', options);

// `.report` is the HTML report as a string
const reportHtml = runnerResult.report;
fs.writeFileSync('lhreport.html', reportHtml);

// `.lhr` is the Lighthouse Result as a JS object
console.log('Report is done for', runnerResult.lhr.finalDisplayedUrl);
console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);

chrome.kill();

主要指标

  1. 性能（Performance） ：衡量网页的加载速度和响应时间。
  2. 可访问性（Accessibility） ：评估网页对于残障用户的可访问性。
  3. 最佳实践（Best Practices） ：检查网页是否遵循了前端开发的最佳实践。
  4. SEO（Search Engine Optimization） ：分析网页的搜索引擎优化情况。

image.png

性能指标详解

image.png

  • 首次内容绘制（First Contentful Paint，FCP）

定义：首次内容绘制是指浏览器从开始加载网页到首次在屏幕上绘制任何内容的时间。这个时间通常包括 HTML 文档的下载、解析和渲染，以及 CSS 和 JavaScript 文件的下载和执行。

  • 最大内容绘制（Largest Contentful Paint，LCP）

定义：最大内容绘制是指浏览器从开始加载网页到绘制最大内容元素的时间。这个时间通常包括 HTML 文档的下载、解析和渲染，以及 CSS 和 JavaScript 文件的下载和执行。最大内容元素通常是指页面中最大的图片、视频、文本块等。 -** 累积布局偏移（Cumulative Layout Shift，CLS）**

定义：累积布局偏移是指在网页加载过程中，由于元素的位置发生变化而导致的布局偏移的总和。这个指标衡量了网页的视觉稳定性，CLS 值越低，网页的视觉稳定性就越好。

  • 首次输入延迟（First Input Delay，FID）

定义：首次输入延迟是指从用户首次与网页交互（如点击链接、输入文本等）到浏览器实际响应这个交互的时间。这个指标衡量了网页的交互响应速度，FID 值越低，网页的交互响应速度就越快。

  • 总阻塞时间（Total Blocking Time，TBT）

定义： Total Blocking Time 指的是在主线程被阻塞的总时间。在网页加载和交互过程中，浏览器的主线程负责处理各种任务，如解析 HTML、执行 JavaScript、渲染页面等。当主线程被阻塞时，用户的交互和页面的更新都会受到影响，导致页面响应变慢，用户体验下降。

架构

image.png

  • Driver - 对接 Puppeteer 和 Chrome Debugging Protocol (Chrome浏览器提供的接口文档)
  • Gatherers - 使用 Driver 收集页面的参数.
  • Audit - audits 是对单一特征/优化/指标的测试..
  • Computed Artifacts - 核心计算组件 , 通常在多个audits间共享.
  • Report - 报表前端UI界面.

推荐及参考文章：

欢迎关注我的前端自检清单，我和你一起成长

avatar
文章
阅读
粉丝