网站性能调优开发工具: Lighthouse, Puppeteer 以及进阶部分丨 Google 开发者大会 2018...
这次 Google 开发者大会请来了 Lighthouse 的工程师 - Eric Bidelman ,分享如何简单地使用 Lighthouse, Puppeteer 来自动化我们日常的流程。它是一个开源的自动化工具,用于改进网络应用质量。您只需要提供网址,它就测试该页面,並生成页面性能报告。你看看可以采取哪些措施来改进您的应用。
Lighthouse 重视用户的首次加载页面速度,页面首次显示内容速度,有意义的内容显示速度,以及可以交互的时间。
以一个页面加载的周期为例,首先页面会发送第一个字节给用户,然后显示一些非空白的图像,然后显示有意义的内容,然后展示所有内容,允许用户点击或其他操作,然后完结整个加载周期。
使用方法
运行 Lighthouse 的方式有两种:作为 Chrome 扩展程序运行,或作为命令行工具运行。Chrome 扩展程序提供了用户友好的界面,方便读取报告。而命令行工具允许您将 Lighthouse 集成到持续集成系统。
开发者工具
你只需要打开 Chrome 的开发者工具,点击 Audits
,然后就可以看到 Lighthouse 界面:
扩展程序
你可以到 chrome web store 下载並安装 Lighthouse Chrome 扩展程序。
命令行工具
需求:Node.js >= 5
- 全局安装 lighthouse
npm install -g lighthouse
复制代码
- 然后输入你的页面
lighthouse https://example.com
复制代码
lighthouse 会自动生成 HTML 报告,你也可以使用 JSON 格式。
自动化部分
你也可以利用 TravisCI 来自动分析改动后的代码对于页面性能的影响。
你只需要在 .travis.yml
里面加入以下代码:
language: node_js
script:
- npm run lint
- npm run build
after_success:
- ."./travis/deploy_pr_gae.sh"
- export LH_MIN_PASS_SCORE=96
- export LH_TEST_URL=https://your.staging.server.com/
- node travis/runlighthouse.js $LH_TEST_URL $LH_MIN_PASS_SCORE
复制代码
更多详情可以观看讲师在 Github 上面的分享: ebidel/lighthouse-ci
Puppeteer
底层
在谈 Puppeteer 之前,我们需要提到上面是 Headless Chrome
。简单来说,它是一个没有视图层的谷歌浏览器。
它允许你使用最新的浏览器来测试页面,使用所有最新的属性,比如说 CSS Grid 格局,Web 推送通知等。
最重要的是,它暴露开发者工具的可编程接口,比如说网络状况,模拟设备,代码覆盖率。
例如你可以打开一个 WebSocket,然后监听浏览器发生了什么操作,比如说 CSS 的 getStyleSheetText
,DOM 的markUndoableState
等。
你也可以到官网阅读更加丰富的文档:chromedevtools.github.io/devtools-pr…
实战部分
大部分你手动在浏览器里面做的事情,它都可以做到。例如:
- 截图並生成 PDF
- 自动填写表格,UI 测试,键盘输入
- 测试 Chrome 插件
安装方法
它会下载最新版本的 Chromium,以及暴露封装好的接口出来给开发者使用。
值得注意的是,它的源码有很多 async/await
的操作,你也可以这样操作你的代码。
npm i puppeteer --save
复制代码
讲师也提供了很多例子,方便学习使用 Puppeteer。
截屏
比如说我要把 https://example.com
页面截图,保存为 example.png
。我只需要写几行代码 :
const puppeteer = require("puppeteer");(async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto("https://example.com");await page.screenshot({ path: "example.png" });await browser.close();
})();
复制代码
页面数据
你只需要使用 page.metrics()
方法就可以了,它会返回一个页面数据对象。
代码覆盖率
你可以使用 page.coverage
里面的方法 startJSCoverage()
,startCSSCoverage()
来开始测试覆盖率。以及使用 stopJSCoverage()
, stopCSSCoverage()
来结束测试。
拦截网络请求
你可以拦截图片的请求,甚至是把图片的请求换成其他请求,例如 http 直接上 https,或图片换成占位图。
生成报告
你可以通过代码生成 PDF,例如使用page.pdf()
方法。
github.com/GoogleChrom…
PPTRAAS
以上这些个案都是一些重复出现的日常例子。Puppeteer as a service ]就把以上这些代码做了封装,只需在 url 后续加入 url
参数,便可使用服务。
例如你可以使用 https://pptraas.com/screenshot?url=https://example.com/
来截图。
更多例子可以到 Puppeteer as a service 来使用服务。
其他优质的工具
Node Debugger 可以让你打开浏览器里面的开发者工具来调试 Node 程序。
Page Speed Insights 可以让你透过谷歌的平台来测试里的网站,並生成报告。
后记
这次可谓干货满满,收获丰富。我之前以为这些工具过于专业,艰涩难懂,没想到只需要按几个按钮,写几行代码,甚至不需要写代码便可以测试自己的网站。
就让我好好地利用这些工具来优化我的个人博客吧(笑
参考资料
- Github - ebidel/lighthouse-ci
- Github - GoogleChrome/lighthouse
- Puppeteer as a service
- Tools for Web Developers - Lighthouse
Google 开发者大会 2018 技术干货
网站性能调优开发工具: Lighthouse, Puppeteer 以及进阶部分丨 Google 开发者大会 2018...相关推荐
- Web2.0网站性能调优实践(引用王宗义)
Web2.0网站性能调优实践 当前web2.0革命风起云涌,web2.0强调服务,而服务最基本的要求是速度快和稳定,离开这两个谈功能强大和易用性都没有任何意义.本文介绍一些关于笔者运营一个web2.0 ...
- 发布即巅峰:Java性能调优六大工具:MAT内存分析工具
MAT内存分析工具 MAT是MemoryAnalyzerTool的简称,它是一款功能强大的Java堆内存分析器,可以用于查找内存泄漏以及查看内存消耗情况.MAT是 基于Eclipse开发的一款免费的性 ...
- 千字详解:“Java性能调优六大工具”之JConsole工具
JConsole工具是JDK自带的图形化性能监控工具. 通过JConsole工具, 可以查看Java应用程序的运行概况, 并监控堆信息. 永久区使用情况及类的加载情况等. 本文主要介绍JConsole ...
- android性能调优的工具,神兵利器-Android 性能调优工具 Hugo
在进行Android性能调优.减少应用卡顿时,寻找可优化的code是一个必要的过程.如何发现应用中的耗时任务甚至是耗时函数呢,如果可以在log中打印每个方法的执行时间,甚至把执行方法时的输入输出同时打 ...
- java 在线监测 trace_JDK自带的性能调优监测工具使用示例
JVM性能调优监控工具jps.jstack.jmap.jhat.jstat位于JDK的bin目录,这些工具短小精悍,常用于线上系统的分析监测. 用来解决如下问题 OutOfMemoryError,分析 ...
- 性能调优之工具---perf
1. Linux Perf简介 1.1 Perf是什么 Perf 是内置于Linux 内核源码树中的性能剖析(profiling)工具.它基于事件采样原理,以性能事件为基础,支持针对处理器相关性能指标 ...
- 网站性能调优实战-学相伴KuangStudy
面对并发我们是如何优化KuangStudy网站性能的? 每个项目都会随着用户和数据的增长调整架构,来面对未来的问题,我们也不例外,在1月5号我们平台正式公测后,引起了很多观众的热烈反响,仅仅4天,注册 ...
- Java性能调优工具:MAT内存分析工具,上万字带你彻底了解
MAT内存分析工具 MAT是MemoryAnalyzerTool的简称,它是一款功能强大的Java堆内存分析器,可以用于查找内存泄漏以及查看内存消耗情况.MAT是 基于Eclipse开发的一款免费的性 ...
- Linux工具使用——使用tuna进行性能调优
Linux工具使用--使用tuna进行性能调优 tuna工具(redhat系列里的工具)可以改变进程(线程)属性,包括调度策略.优先级和CPU核心亲和性,同时还可以修改中断的CPU核心亲和性.它既有图 ...
最新文章
- Java 打印数组的方法
- 图像处理之霍夫变换(直线检測算法)
- HDU-4059 The Boss on Mars 容斥定理
- JS 正则表达式(数字、正则)
- HashMap的put方法讲解
- python小波分解与重构_小波分解和重构
- windows下配置nginx+php环境
- BABOK - 需求分析(Requirements Analysis)概述
- BPSK调制解调链路实现
- 小象学院python数据分析课程怎么样_小象学院的机器学习集训营课程怎么样?
- 类图、用例图、时序图、状态图、活动图、流程图、顺序图(转)
- 我的世界 为何用java开发?
- android 触摸事件 取消,如何禁用/重新启用Android中的触摸事件?
- 模式识别的一些基本概念
- TreeSet集合的使用
- 青岛企业邮箱怎么注册
- RISC-V、ARM和X86架构
- css中flex: initial、flex:0、flex:1、flex:none、flex:auto的区别和使用场景
- 小提琴和钢琴一起学行吗_关于学习钢琴和小提琴的多方面对比,比完你可能要吓一跳...
- iOS 唤起微信小程序