Lighthouse 运行测评的过程有一套完整的生命周期,可以划分成三个主要流程:
Collecting(收集数据): 首先是 Collecting 流程,这一步会调用内置的驱动程序(Driver) ,其作用是通过谷歌开发工具协议( Chrome DevTools Protocol) 调起浏览器,并创建新的 tab 请求待测评的站点,通过浏览器采集站点数据并将结果(称之为 Artifacts)保存在本地临时目录。
Auditing(分析数据): 然后进入 Auditing 流程,读取 Artifacts 数据,根据内置的评判策略逐条进行检查并计算出各项的数字形式得分。
Report(生成报告): 最后进行 Report 流程,将评分结果按照 PWA、性能、无障碍访问、最佳实践等纬度进行划分,以 JSON、HTML 等格式输出。
如下图:
使用 Lighthouse 对网站进行测评后,我们会得到一份评分报告,它包含了性能(Performance),访问无障碍(Accessibility),最佳实践(Best Practice),搜索引擎优化(SEO),PWA(Progressive Web App)五个部分:
性能评分的分值区间是0到100,如果出现0分,通常是在运行 Lighthouse 时发生了错误,满分100分代表了网站已经达到了98分位值的数据,而50分则是75分位值的数据。
影响评分的性能指标:性能测试结果会分成 Metrics,Diagnostic,Opportunities 三部分,但只有 Metrics 部分的指标项会对分数产生直接影响。
Lighthouse 会衡量以下 Metrics 性能指标项:
首次内容绘制(First Contentful Paint)。即浏览器首次将任意内容(如文字、图像、canvas 等)绘制到屏幕上的时间点。
首次有效绘制(First Meaningful Paint)。衡量了用户感知页面的主要内容(primary content)可见的时间。对于不同的站点,首要内容是不同的,例如:对于博客文章,标题及首屏文字是首要内容,而对于购物网站来说,图片也会变得很重要。
首次 CPU 空闲(First CPU Idle)。即页面首次能够对输入做出反应的时间点,其出现时机往往在首次有效绘制完成之后。该指标目前仍处于实验阶段。
可交互时间(Time to Interactive)。指的是所有的页面内容都已经成功加载,且能够快速地对用户的操作做出反应的时间点。该指标目前仍处于实验阶段。
速度指标(Speed Index)。衡量了首屏可见内容绘制在屏幕上的速度。在首次加载页面的过程中尽量展现更多的内容,往往能给用户带来更好的体验,所以速度指标的值约小越好。
输入延迟估值(Estimated Input Latency)。这个指标衡量了页面对用户输入行为的反应速度,其基准值应低于 50ms。
Metrics 部分的指标项会直接影响分数,可以作为我们的主要参考点。
另外的两部分中, Opportunities 指的是优化机会,它提供了详细的建议和文档,来解释低分的原因,帮助我们具体进行实现和改进。 Diagnostics 指的是现在存在的问题,为进一步改善性能的实验和调整给出了指导。这两者不会纳入分数的计算。
每一项性能指标对评分的贡献都有其计算逻辑,Lighthouse 会将原始的性能值映射成为 0-100 之间的数字。
例如,FMP(First Meaningful Paint)的原始值是从页面初始化开始到主要内容渲染成功的耗时,根据真实站点的数据,顶级性能的站点的 FMP 值约为 1220ms,这个值会被映射成 Lighthouse 的 99 分。
针对不同的评分,Lighthouse 用了不同的颜色进行标注,分值区间和颜色的对应关系如下:
0 - 49(慢):红色
50 - 89(平均值): 橙色
90 - 100(快): 绿色
各个指标对性能评分的贡献并不相同,权重较大的指标,对性能评分的影响更大一些。各指标权重分配情况可参考: https://docs.google.com/spreadsheets/d/1Cxzhy5ecqJCucdf1M0iOzM8mIxNc7mmx107o5nj38Eo/edit#gid=0
访问无障碍评分的分值由相关指标的加权平均值计算而来。可以在 评分详情 查阅每项指标的具体权重。同理,较大权重的指标项对分数的影响较大。
无障碍性的每个指标项测试结果为pass或者fail,与性能指标项的计算方式不同,当页面只是部分通过某项指标时,页面的这项指标将不会得分。例如,如果页面中的一些元素有屏幕阅读器友好的命名,而其他的元素没有,那么这个页面的 screenreader-friendly-names 指标项得分为0。
最佳实践评分的分数区间为0-100。影响这项评分的指标项的权重都是相同的。
比如:推荐使用 https,跨域的跳转链接需要使用 rel 标识,不能使用废弃的 API等等。
比如:图片元素使用 alt 属性等等提高搜索引擎搜索排名,便于搜索引擎能找到你这个网站。
Lighthouse 使用 PWA 基准检查项列表(Baseline PWA Checklist)进行测评,测评结果将这些指标项分成了四个类别,共包含12个自动测试项和3个手动测试项,其中各个自动测试项的评分权重是相同的。PWA 的评测指标对我们来说非常重要,我们可以从这四个类别详细了解一下基准指标项。
快速可靠:
页面在移动网络条件下能够快速加载。
在离线条件下页面能够返回状态码200。这里我们可以通过 Service Worker 来实现离线可用。
start_url 在离线条件下返回状态码200。start_url 是前面章节我们提到过的 manifest.json 中的一个属性,它指定了用户打开该 PWA 时加载的 URL。
可安装:
始终使用 HTTPS。
注册 Service Worker 来缓存页面以及 start_url。
使用 manifest 文件来实现安装 PWA 的需求,浏览器能够主动通知用户将应用添加到桌面,增加留存率。
PWA 优化:
将 HTTP 流量重定向到 HTTPS。
配置自定义启动画面。
设置地址栏主题颜色。
页面内容针对视口大小自适应,对移动用户的展示更友好。
使用了
当 JavaScript 文件不可用时,提供降级措施,页面能显示基本内容而不出现白屏。
手动测试项:
站点跨浏览器可用,如主流浏览器 Chrome, Edge, Firefox 及 Safari 等。
页面间切换流畅,即使在较差的网络环境下,切换动画也应该简洁顺畅,这是提高用户感知体验的关键。
保证每个页面都有独一无二的 URL,能够在新的浏览器窗口打开,且方便在社交媒体上进行分享。
安装成功后,浏览器右上角显示:
F12后,点击pagespeed->start analyzing
参考:https://www.cnblogs.com/xiaohuochai/p/9182710.html
测试分类:
1、界面测试
1)给用户的整体感:舒适感;凭感觉能找到想要找的信息;设计风格是否一致
2)各控件的功能
2、功能测试
1)删除/增加某一项:是否对其他项造成影响,这些影响是否都正确
2)列表默认值检查
3)检查按钮功能是否正确:新建、编辑、删除、关闭、返回、保存、导入、上一页、下一页、页面跳转、重置(常见错误)
4)字符串长度检查:超出长度
5)字符类型检查
6)标点符号检查:空格、各种引号、Enter键
7)特殊字符:常见%、“、”
8)中文字符:是否乱码
9)检查信息完整:查看信息,查看所填信息是否完整更新;更新信息,更新信息与添加信息是否一致
10)信息重复:需唯一信息处,比如重复的名字或ID、重名是否区分大小写、加空格
11)检查删除功能:不选择任何信息,按Delete,看如何处理;选择一个或多个进行删除;多页选、翻页选删除;删除是否有提示
12)检查添加和修改是否一致:添加必填项,修改也该必填;添加为什么类型,修改也该什么类型
13)检查修改重名:修改时把不能重名的项改为已存在的内容
14)重复提交表单:一条已经成功提交的记录,返回后再提交
15)检查多次使用返回键:返回到原来页面,重复多次
16)搜索检查:存在或不存在内容,看搜索结果是否正确;多个搜索条件,同时输入合理和不合理条件;特殊字符
17)输入信息的位置
18)上传下载文件检查:功能是否实现,
上传:上传文件是否能打开、格式要求、系统是否有解释信息、将不能上传的文件格式修改后缀为可上传的文件格式;
下载:下载是否能打开、保存、格式要求
19)必填项检查:必填项未填写;是否有提示,如加*;对必填项提示返回后,焦点是否自动定位到必填项
20)快捷键检查:是否支持快捷键Ctrl+C、Ctrl+V、backspace;对不允许做输入的字段(如:下拉选项),对快捷方式是否也做了限制
21)Enter键检查:输入结束后按Enter键,系统如何处理
22)刷新键检查:按浏览器刷新键如何处理
23)回退键检查:按浏览器回退键如何处理
24)空格检查:输入项输入一个或多个空格
25)输入法半角全角检查:比如,浮点型,输入全角小数点“。”或“. ”,如4. 5;全角空格
26)密码检查:输入加密方式的极限字符;密码尽可能长
27)用户检查:不同种类管理员用户的不同权限,是否可以互相删除、管理、编辑;一般用户的权限;注销功能,老用户注销再注册,是否为新用户
28)系统数据检查:数据随业务过程、状态的变化保持正确,不能因为某个过程出现垃圾数据,也不能因为某个过程而丢失数据。
29)系统可恢复性检查:以各种方式把系统搞瘫,测试系统是否可以迅速恢复
30)确认提示检查:系统更新、删除操作:是否有提示、取消操作;提示是否准确;事前、事后提示
31)数据注入检查:对数据库注入,特殊字符,对SQL语句进行破坏
32)时间日期检查:时间、日期、时间验证:日期范围是否符合实际业务;对于不符合实际业务的日期是否有限制
33)多浏览器验证
3、性能测试
1)压力测试:实际破坏一个Web应用系统,测试系统的反应,测试系统的限制和故障恢复能力
2)负载测试:在某一负载级别上的性能,包括某个时刻同时访问Web的用户数量、在线数据处理的数量
3)强度测试:测试对象在性能行为异常或极端条件下(如资源减少或用户过多)的可接受性,以此验证系统软硬件水平
4)数据库容量测试:通过存储过程往数据库表中插入一定数量的数据,看是否能及时显示
5)预期指标的性能测试:在需求分析和设计阶段会提出一些性能指标,对于预先确定的性能要求要首先进行测试
6)独立业务性能测试:对核心业务模块做用户并发测试,包括同一时刻进行完全一样的操作、同一时刻使用完全一样的功能
7)组合业务性能测试:模拟多用户的不同操作,最接近实际用户使用情况,按用户实际的实际使用人数比例来模拟各个模块的组合并发情况
8)疲劳强度性能测试:系统稳定运行情况下,以一定负载压力来长时间运行系统的测试
9)网络性能测试:准确展示带宽、延迟、负载、端口的变化是如何影响用户的相应时间的
10)大数据量性能测试:实时大数据量,模拟用户工作时的实时大数据量;极限状态下的测试,系统使用一段时间,积累一段数据量时能否正常运行,以及对前面两种进行结合
11)服务器性能测试:在进行用户并发性能测试、疲劳强度、大数据量性能测试时,完成对服务器性能的监控,并进行评估
12)一些特殊的测试:配置测试、内存泄漏的一些特殊测试
4、可用性测试(接口测试)
1)整体界面测试
2)多媒体测试
3)导航测试
5、客户端兼容性
平台测试:windows;unix;macintosh;linux
浏览器测试:不同厂商的浏览器对Java、Javascript、ActiveX、plug-ins或不同的HTML的规格
不同的支持;框架和层次结构在不同浏览器也不同的显示
6、安全性
安全性测试要求:
1)能够对密码试探工具进行防范
2)能够防范对Cookie攻击的常用手段
3)敏感数据保证不用明文传输
4)能防范通过文件名猜测和查看html文件内容获取重要信息
5)能保证在网站收到工具后在给定时间内恢复,重要数据丢失不超过1小时
web 的性能测试工具:
随着Web 2.0技术的迅速发展,许多公司都开发了一些基于Web的网站服务,通常在设计开发Web应用系统的时候很难模拟出大量用户同时访问系统的实际情况。
因此,当Web网站遇到访问高峰时,容易发生服务器响应速度变慢甚至服务中断。
为了避免这种情况,需要一种能够真实模拟大量用户访问Web应用系统的性能测试工具进行压力测试,来测试静态HTML页面的响应时间,甚至测试动态网页(包括ASP、PHP、JSP等)的响应时间,为服务器的性能优化和调整提供数据依据。
1、企业级自动化测试工具WinRunner
Mercury Interactive公司的WinRunner是一种企业级的功能测试工具,用于检测应用程序是否能够达到预期的功能及正常运行。
2、工业标准级负载测试工具Loadrunner
LoadRunner 是一种预测系统行为和性能的负载测试工具
3、全球测试管理系统testdirector
TestDirector 是业界第一个基于Web的测试管理系统,它可以在您公司内部或外部进行全球范围内测试的管理。
4、功能测试工具Rational Robot
IBM Rational Robot 是业界最顶尖的功能测试工具,它甚至可以在测试人员学习高级脚本技术之前帮助其进行成功的测试。
它集成在测试人员的桌面IBM Rational TestManager 上,在这里测试人员可以计划、组织、执行、管理和报告所有测试活动,包括手动测试报告。
这种测试和管理的双重功能是自动化测试的理想开始。
5、单元测试工具xUnit系列
目前的最流行的单元测试工具是xUnit系列框架,常用的根据语言不同分为JUnit(java),CppUnit(C++),DUnit (Delphi ),NUnit(.net),PhpUnit(Php )等等。
该测试框架的第一个和最杰出的应用就是由Erich Gamma (《设计模式》的作者)和Kent Beck(XP(Extreme Programming)的创始人 )提供的开放源代码的JUnit.
6、功能测试工具SilkTest
Borland SilkTest 2006属于软件功能测试工具,是Borland公司所提出软件质量管理解决方案的套件之一。
这个工具采用精灵设定与自动化执行测试,无论是程序设计新手或资深的专家都能快速建立功能测试,并分析功能错误。
7、性能测试工具WAS
Microsoft Web Application Stress Tool 是由微软的网站测试人员所开发,专门用来进行实际网站压力测试的一套工具。
透过这套功能强大的压力测试工具,您可以使用少量的Client端计算机仿真大量用户上线对网站服务所可能造成的影响。
8、自动化白盒测试工具Jtest
Jtest是parasoft公司推出的一款针对java语言的自动化白盒测试工具,它通过自动实现java的单元测试和代码标准校验,来提高代码的可靠性。
parasoft同时出品的还有C++ test,是一款C/C++白盒测试工具。
9、功能和性能测试的工具JMeter
JMeter是Apache组织的开放源代码项目,它是功能和性能测试的工具,100%的用java实现。
10、性能测试和分析工具WEBLOAD
webload是RadView公司推出的一个性能测试和分析工具,它让web应用程序开发者自动执行压力测试;webload通过模拟真实用户的操作,生成压力负载来测试web的性能。
扩展资料:
漏洞测试
企业网站做的越来越复杂、功能越来越强。不过这些都不是凭空而来的,是通过代码堆积起来的。如果这个代码只供企业内部使用,那么不会带来多大的安全隐患。
但是如果放在互联网上使用的话,则这些为实现特定功能的代码就有可能成为攻击者的目标。
天眼举一个简单的例子。在网页中可以嵌入SQL代码。而攻击者就可以利用这些SQL代码来发动攻击,来获取管理员的密码等等破坏性的动作。
有时候访问某些网站还需要有某些特定的控件。用户在安装这些控件时,其实就有可能在安装一个木马(这可能访问者与被访问者都没有意识到)。
为此在为网站某个特定功能编写代码时,就要主动出击。从编码的设计到编写、到测试,都需要认识到是否存在着安全的漏洞。
天眼在日常过程中,在这方面对于员工提出了很高的要求。各个员工必须对自己所开发的功能负责。
已知的病毒、木马不能够在所开发的插件中有机可乘。通过这层层把关,就可以提高代码编写的安全性。
参考资料来源:百度百科-WEB服务器
欢迎分享,转载请注明来源:夏雨云
评论列表(0条)