- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章【性能优化】性能测量工具-LightHouse由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
。
工欲善其事,必先利其器。了解完性能指标之后,性能优化的目标已经明确了。接下来我们借助一些性能测量工具,明确网站距离优化目标还有多大的差距,我将用3篇文章分别介绍3款主流的测量工具:
有了这3个工具我们就可以从多个维度对网站性能进行全方位的评估.
。
Lighthouse是Google开发的一款开源工具,提供一套全面的测试来评估网页质量,包括加载性能、可访问性、最佳实践和PWA。在chrome 60之后的版本,DevTool里已经内置了Lighthouse.
Lighthouse的目标是“Do Better Web”,旨在帮助Web开发者改进他们现有的Web应用程序。通过运行一整套的测试,开发者可以发现新的 Web 平台 API,意识到性能的隐患,并学习(新的)最佳实践。换句话说,就是让开发者在 Web 开发上做得更好.
。
1.1 使用命令行工具 Node CLI 进行测试 。
1.命令行工具则允许开发者将 Lighthouse 集成到持续集成系统.
2.安装 Lighthouse 作为一个全局节点模块 npm install -g lighthouse 。
针对一个页面运行 Lighthouse 审查 lighthouse https://www.taobao.com 。
3.最后命令行中会输出一个html页面,打开页面我们就可以查看评估报告了 。
默认情况下,命令行生成的报告页面会从性能(Performance)、易用性(Accessibility)、最佳实践(Best Practices)、SEO、PWA支持程度等几个方面生成评估报告。如果我们想设置类别,只进行 performance 类别测试,可以在命令后面添加 --only-categories=performance.
除此之外,lighthouse命令提供了很多选项,以下几个是需要注意的:
1.2 作为node模块使用 。
我们还可以将Lighthouse作为一个node模块,在自己的工程里调用,代码如下:
1.3 在Chrome DevTools 中使用 。
1.按下Command+Opiton+I(Mac)或者Control+shift+I (Windows, Linux) 来打开Devtools 。
2.点击LightHouse面板(旧版本的Chrome浏览器是 Audits 面板),可以看到如下界面 。
3.在 Device 选择测试模拟的设备,在 Categorle 中选择性能评估的类别,比如我们测试淘宝首页,选择测试PC端的网页性能 。
4.点击Generate report按钮,我们可以在控制台中直接生成有关性能的评估报告 。
1.4 通过 Chrome 应用商店安装扩展程序 。
安装地址:https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk 。
点击 Generate report 按钮以针对当前打开的页面运行 Lighthouse 测试 。
浏览器扩展程序和 devTools 面板的区别 。
LightHouse 的扩展程序主要用于测试国外的网站,因为国内好多网站没有国际cdn,测出来的结果往往不太准确。而 devTools中的 LightHouse 面板是在本地的网络环境下测试.
比如我用本地的devTools lightHouse访问抖音官网,评估得分是81分,而扩展程序评估的结果减少1倍的得分,只有40分左右,就是因为CDN资源请求过长导致的。当然如果做国外网站的性能评估,就不用考虑这个问题.
。
2.1 整体质量评估 。
整体质量评估主要有5个方面:性能(Performance)、可访问性(Accessibility)、网络最佳实践(Best Practies)、搜索引擎优化(SEO)渐进式应用PWA(Progressive Web Apps) 。
其中PWA 是Chrome一直推的一个渐进式Web应用开发,旨在增强 Web 能力,缩小与原生应用的差距并创建与其类似的用户体验。主要包含四大模块,这里简答介绍一下,如下图:
2.2 性能评估 。
性能评估主要包含6大指标:
2.3 优化建议 。
评估之后,LightHouse会给出一些优化建议,如图:
我们可以看到两条红色的建议:
。
在 LightHouse 测试过程中,命令面板中会输出测试过程中的日志,截图显示如下:
通过lighthouse测试过程中输出的日志,可以画出 Lighthouse 的测试流程图:
初步了解了基本的测试流程后,我们再看下官方给出的 Lighthouse 架构图:
这里简单介绍一下这几个模块:
在最终汇总阶段,Lighthouse 会基于该配置文件以及上一个环节中计算出的每个审计项的评分,加权计算出 performance 的评分。并基于每个审计项的评分与种类,将审计项划分为通过与不通过,对于不通过的审计项会给出详细的测试详情与优化指引.
。
Lighthouse可以作为集成性能测试工具。为我们提供标准的性能报告,在使用过程中我们可以将其集成于CD流程,作为测试的一种,保证我们上线的功能在大多环境下有着优秀的表现.
原文链接:https://mp.weixin.qq.com/s/A77pa2QvTkoo57Wme5tsmw 。
最后此篇关于【性能优化】性能测量工具-LightHouse的文章就讲到这里了,如果你想了解更多关于【性能优化】性能测量工具-LightHouse的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
这个问题在这里已经有了答案: Android ADT version required 20.0.0 and above (10 个答案) 关闭 9 年前。 我刚刚安装了 Eclipse Juno
按照 This page from codeplex 上的指南进行操作后,我无法在我的工具/选项窗口中看到 Python 选项。我认为我与指南的唯一偏差是: 发行版:没有安装 activestate
我有一个非常大的 .sql 脚本。我将此脚本添加到 Visual Studio 2013 下的 SQL Server 项目中。当我尝试构建它时,我收到此错误消息 This T-SQL script e
当我在SpringBoot项目中想加个依赖,但是不确定现有依赖的依赖的依赖.....有没有添加过这个依赖,怎么办呢?如果添加过了但是不知道我需要的这个依赖属于哪个依赖的下面,怎么查呢? IDEA中提供
我正在做一个项目来减少 PDF 的大小,压缩它们。我想知道市场上是否有任何非常好的工具/库(.NET)。 我确实尝试了一些像 Onstream Compression 这样的工具,但结果并不令人满意。
我想从我的源代码编译一个安卓内核。 但我想使用工具或类似的东西。 所以我只需单击一个按钮并获得一个可闪存的 zip 文件... 有工具吗? 我可以用脚本来做吗? 谢谢! 最佳答案 这取决于您从哪里获得
我们生成 pdf 文件,其中包含有关数万名客户每月财务余额的数据。在高峰期(年底有 100.000 个文件),使用在 5 台服务器之间分配负载,该过程可能需要长达 5 天的时间才能完成。工作负载的分配
模块:xmllib xmllib 是一个非验证的低级语法分析器。应用程序员使用的 xmllib 可以覆盖 XMLParser 类,并提供处理文档元素(如特定或类属标记,或字符实体)的方法。从 Py
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 3 年前。
我在一家医疗保健公司工作,拥有有关患者位置(地址、城市、州、 zip )的信息。我试图确定有多少百分比的患者住在离 5 个特定位置最近的地方。我正在寻找的答案是“25% 的患者住在离#1 地点最近的地
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 4年前关闭。 我们不允许在 Stack Overflow 上提出有关通用计算硬件和软件的问题。您可以编辑问
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be
请问我在哪里可以得到 SvcTraceViewer 工具? 我尝试下载并安装许多 SDK。 我查看了程序文件的垃圾箱。 我需要它来跟踪我的 WCF 调用出了什么问题。 最佳答案 您可以通过下载 Win
我正在尝试在我最喜欢的编辑器中设置适当的代码完成功能,我们将其称为AnEditor,以避免互联网上充斥着特定于程序的答案。 (您知道语言是ALanguage。)编辑器具有两个我喜欢的功能:它既可以在控
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the he
当 merge 的两个分支对同一文件有更改时,Mercurial 是否总是使用外部 merge 工具? 或者它是否首先查看它是否可以 merge 文件本身,如果不能,则仅转向外部工具? 我问的原因是我
我正在为我使用的编辑器编写 Scala 插件,该插件将突出显示所有未使用的代码路径(可能未使用 defs 、 vals 、 classes 和 implicits ),并为用户提供一个选项以将它们从.
我有 jquery 工具滚动器...我喜欢它只为 swipeLeft swipeRight 实现触摸选项。 当我使用 touch: true 时,它也会在向上/向下滑动时旋转.. 我按照此处的说明
我已经尝试了一些用于构建 UML(对象/依赖图)的 Eclipse 工具,但我真正需要的是一个工具来生成这样的代码外 UML。 (反之亦然) 我更喜欢一个简单的 UML 工具,它易于安装并且没有任何依
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,因为
我是一名优秀的程序员,十分优秀!