浏览器页面性能测试工具

Post on Jul 11, 2017 by Lightfish Zhang

前言

最近认识到浏览器性能测试工具,Lighthousewebpagetest

  • Lighthouse, 是一个开源的自动化工具,用于改进网络应用的质量。您可以将其作为一个Chrome扩展程序运行,或从命令行运行。您为 Lighthouse 提供一个您要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。(官网描述)
  • webpagetest, 就更加强大,生成的报告非常详细,基本上把一个页面请求到页面渲染显示,从load-render-js runtime-layout-composite,再到模仿用户交互行为,生成的报告可以精细到js函数调用,每一个资源的请求时间,分析的切片是毫秒级的,详细到一言难尽

浏览器的页面的渲染过程

这是另外一篇文章, 传送门

lighthouse的工作原理与验证

  • lighthouse的工作原理,参考官方给出的结构图

Lighthouse Architecture

  • 阅读github上的源代码,进行验证与学习,先看目录

    • chrome-launcher chrome浏览器启动器,可以选择启动headless chrome
    • lighthouse-cli 命令行工具
    • lighthouse-core 核心代码,包含Driver,Gatherers,Audits
    • lighthouse-extension Chrome扩展程序的源码
    • lighthouse-viewer 生成报告的工具

… 未完待续

附录

相关资料

Lighthouse的源码与文档 Web Page Test的官方网站