美文网首页
前端性能测试工具

前端性能测试工具

作者: 笑起来真好看ccn | 来源:发表于2021-02-08 18:04 被阅读0次

内网/登录/报告

https://www.cnblogs.com/yanghj010/p/8954730.html

影响用户浏览网页速度的因素主要有:

服务端数据返回、网络传输、页面渲

1.页面结构分析工具: YSlow/PageSpeed

YslowYSlow是Yahoo发布的一款基于FireFox的插件,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化

Yslow 基于 Yahoo 的高性能网页教条,分析网页的性能并给出响应缓慢的原因。

通过网页 JS/CSS/Image 数及请求数量、请求类型、缓存等方面的静态分析 ,多用于本地开发或者本地测试

静态分析——Yslow(业界俗称:雅虎评估网站性能的23条军规)

通过给浏览器安装 Yslow 插件并开启后,在控制面板里就会给你评分提示,和改进建议。

2.真实用户浏览页面分析OneAPMBrowser Insight    (其他产品)-不能用

通过真实浏览器访问页面,收集页面的 w3c 标准信息,ajax,网络等数据等终端分析,多用于内网多终端系统检测和 web 网站检测

终端分析:OneAPM Browser Insight/业界俗称—real user monitoring

通过各种语言探针给页面自动插入 js 代码,在浏览器浏览的时候收集页面加载时间和网络信息,多用于内网多终端系统检测和 web 网站.

https://www.cnblogs.com/laichen/p/6876687.html

3.chrome 插件

(1)lighthouse——可生成report

(2)Performance 无疑可以为我们提供很多有价值的信息,但它的展示作用大于分析作用——无测试报告(https://www.cnblogs.com/ranyonsue/p/9342839.html)

页面性能、、可访问性(无障碍)、最佳实践/SEO/PWA(渐进式 Web 应用指标的跑分。

https://zhuanlan.zhihu.com/p/59987039?from_voters_page=true

First Contentful Paint-浏览器绘制的第一帧文本、图片等内容的时间,对于衡量用户实际浏览体验来说,比 first paint 更有实际意义。

Speed Index

Largest Contentful Paint

Time to Interactive

Total Blocking Time

Cumulative Layout Shift

向下拉动 Report 页,我们还可以看到每一个指标的细化评估

4.WebPagetest  :在线的免费性能评测网站(不可用)

WebPagetest 是性能测试的黄金标准,它提供了多方面的量化指标用于性能测试,比如有一个基本的评分,用于评价当前页面优化的水平;有一个截图,显示页面加载后的视觉效果;还有一个浏览器加载资源的瀑布流...

根据用户浏览器真实的连接速度,在全球范围内进行网页速度测试,并提供详细的优化建议。

通过使用API wrapper,也可以将 WebPagetest 的相关服务添加到 NPM 模块和命令行工具中。

webpagetest-mapper:将 WebPageTest 的测试数据转换为可读的文档格式。

WPT Bulk Tester:使用 Google Docs 测试多个 URLs(如果你拥有 API key,也可以使用 webpagetest.org 来做这件事,或者其他公开可访问的实例)。

5.Google PageSpeed:PageSpeed 根据网页最佳实践分析和优化测试的网页。 

PageSpeed 也有一个 CLI(Command Line Interface)工具:PSI(PageSpeed Insights with reporting)

在构建进程中,可以使用 PSI 测试移动端和桌面端的性能,最终得到可读性良好的测试结果。

评估网站在世界各地为每个移动端用户支出的维护成本。

6.Pingdom 网站速度测试(Pingdom Website Speed Test):输入 URL 地址,即可测试页面加载速度,分析并找出性能瓶颈。在线

7.SpeedCurve:在线测试网页

SpeedCurve 既可以让你追踪竞争对手的性能表现,也可以追踪自己的性能表现。使用 SpeedCurve 时,你可以查看某个因素在不同站点的速度表现。对于移动用户来说,他们希望网站在手机上加载起来要快于电脑,如果感到加载迟缓,往往会迅速关上网页,所以,网站的响应速度对他们很重要。

8.Sitespeed.io(可用)  https://blog.csdn.net/gaoqiang1112/article/details/80365946

Sitespeed.io是一款开源的Web性能测试工具,用来衡量Web网站的综合性能,帮助开发和测试人员分析网页的加载速度和渲染性能。

Sitespeed.io通过驱动浏览器(如:Chrome、Firefox)进行测试,然后从开发者的站点收集多个页面的数据,并根据最佳实践等规则来分析这些网页,然后将结果以HTML报告的形式输出。

Sitespeed.io 满足了一个完整的Web性能测试工具所需的3个关键功能:

使用真实的浏览器测试Web站点,模拟真实的用户进行请求连接,收集以用户为中心的重要指标,如:响应速度指标、第一视觉呈现

可分析页面的组成,并给出相应性能反馈,增加终端用户的使用体验友好性

通过收集和保存页面组成的数据,便于跟踪定位

PageSpeed Insights“

相关文章

  • 前端性能测试

    用什么工具测试前端性能数据相对比较准确?

  • 前端的性能测试

    web前端性能测试在线工具:WebPageTest 该工具属于在线测试工具,直接输入网址就可以测试,适合pc端的网...

  • 前端工程

    前端工程: 开发 环境 脚手架 打包工具 开发规范 模块化开发 组件仓库 性能优化 测试 单元测试 自动化测试工具...

  • 测试类型划分

    功能测试 性能测试 性能测试主要包含以下方面: 性能测试指标 性能测试常用工具 安全测试 安全测试常用工具 安全测...

  • 前端性能测试工具

    内网/登录/报告 https://www.cnblogs.com/yanghj010/p/8954730.html...

  • 前端页面优化

    前端性能测试和调优 讲到性能测试,除了后台的之外,还有一部分是前台的性能测试,前端的性能测试这里主要需要尊从以下规...

  • 2018-04-04

    对于web页面的性能测试分为:前端、后端的测试 首先,我们来明确下你的性能测试目的,你的目的是服务端的性能还是前端...

  • 用Docker安装Web前端性能测试工具YellowLabToo

    1.YellowLabTools简介 Yellow Lab Tools:是一款开源的Web前端性能测试工具,具有一...

  • 前端测试框架 Jest

    前端测试工具一览 前端测试工具也和前端的框架一样纷繁复杂,其中常见的测试工具,大致可分为测试框架、断言库、测试覆盖...

  • Redis_测试性能

    redis-benchmark是一个压力测试工具,官方自带的性能测试工具!redis性能测试工具可选参数如下所示:...

网友评论

      本文标题:前端性能测试工具

      本文链接:https://www.haomeiwen.com/subject/ltnztltx.html