欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~

本文由shirishiyue发表于云+社区专栏

1、工具介绍

​ 这是一个非常详细且专业的web页面性能分析工具,而且开源的!如果你打不开其官网,或者担心安全问题,你可以自己拿源码搭建这个平台工具。

​ 性能分析极其详细,包含你所知道的所有新能参数指标,还有一些这个工具自己的指标参数,比如speed index,更能从人的角度看待一个页面体验是否良好。提供了多种主流浏览器的访问性能,提供了全球多个地点的测试性能,还有视频录像功能可以返回体验。这个视频功能极好的用于直观的对比演示。总之,优点非常之多,没有理由不尝试一下。

​ 入口在 这里,长这样,

​ 上面三输入框,,,第一行,输入你的页面url。

​ 第二行,选择你的访问点,比如你想测一下北京的用户访问速度,那么你选择北京。

​ 第三行,选择什么浏览器访问。

​ 右边,点击START TEST,,,,耐心等待。

​ 分析的结果时存下来的,比如,我的三个url分析结果如下,可以反复进入查阅。

页面1:https://test.igame.qq.com/pvp/acts/a201807/herotool.php?op=2分析结果

页面2:http://134.175.16.24/vuessr/act/act1/index/hero分析结果

页面3:http://134.175.16.24/newcss/act/act1/index.html/hero分析结果

2、结果使用和分析

​ 分析完后,结果长这样,

​ 总共跑了三次。每一次都是First View(就是相当于新用户,首次打开页面,没有任何缓存)。

​ Performance Result 就是指标总览,列举了一些主要的新能指标的平均值。


指标解析: 从输入url按enter开始的,达到下面节点的时间。

▲ Load Time

​ 页面完全加载完时间(不等待图片下载,iframe下载,css更新完),此时,window.onload 事件此时触发。同 Document complete time.

▲ DOM Content Loaded

​ HTML DOM 骨架完全下载和解析,包括元素。(等待图像下载,css更新,iframe更新等)。此时,DOMContentLoaded 事件触发。(你在预加载数据的时候,可以在这个事件时会更合适些,而不是上面的dom ready)

▲ Time to First Byte

​ 首字节时间。浏览器接收到第一个字节的时间。包括服务器处理以及网络传输,DNS寻址时间+建立连接时间(Socket) + SSL认证时间等。

▲ Start Render

​ 白屏后首次出现内容的时间。

▲ Speed Index

​ 速度指数,页面呈现出来的平均时间。比Start Render更人性化的指标。详细计算方式参考:Speed Index 。主要

▲ Time to Interactive

​ 首次可交互时间。页面可以开始响应用户输入事件。(因为页面呈现过程中,其实还是不可交互的。)

▲ Requests

​ 浏览器针对页面上的内容(图片,javascript,css等)发出的请求数。

▲ Bytes In

​ 浏览器加载页面下载的数据量。它通常也被称为“页面大小”。


过程详细:

中间的Waterfall可以看到瀑布流图,点进去,跟你使用chrome tool一样。不多介绍。

▲ Screen Shot,网页快照,保存了从输入url到页面fully loaded的全称快照。

▲ Video 整个过程的视频。这个非常好,你可以和几个视频放在一起,非常直观的看哪一个快哪一个慢。

▲ 各种 breakdown 拆分统计,包括 Contents,Processing,Domains等等,,,,,比如,Contents 拆分统计如下,

▲ domains breakdown,and, request map,,,可统计请求域名情况,域名越多,明显对时间要求更多。

▲ 性能表现总量,可以优化性能的指标完成情况。

​ 这里面列出了可使用的性能点,如:

  • First Byte Time (back-end processing): 51/100
  • Use persistent connections (keep alive): 100/100
  • Use gzip compression for transferring compressable responses: 42/100
  • Compress Images: 100/100
  • Leverage browser caching of static assets: 14/100
  • Use a CDN for all static assets: 0/100

相关阅读
【每日课程推荐】机器学习实战!快速入门在线广告业务及CTR相应知识

此文已由作者授权腾讯云+社区发布,更多原文请点击

搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!

海量技术实践经验,尽在云加社区

读了这篇文章,你将变身web分析大师的更多相关文章

  1. ESA2GJK1DH1K升级篇: 远程升级准备工作: 安装Web服务器

    前言 大家可以安装Apache,Tomcat,nginx 等Web服务器软件,这篇文章安装 OpenResty 作为Web服务器软件,该软件安装在云端电脑,如果想 安装到自己本地电脑实现该功能,可使用 ...

  2. 这可能是把ZooKeeper概念讲的最清楚的一篇文章

    我本人曾经使用过 ZooKeeper 作为 Dubbo 的注册中心,另外在搭建 Solr 集群的时候,我使用到了 ZooKeeper 作为 Solr 集群的管理工具. 前几天,总结项目经验的时候,我突 ...

  3. 再有人问你synchronized是什么,就把这篇文章发给他

    在再有人问你Java内存模型是什么,就把这篇文章发给他.中我们曾经介绍过,Java语言为了解决并发编程中存在的原子性.可见性和有序性问题,提供了一系列和并发处理相关的关键字,比如synchronize ...

  4. ZooKeeper原理 --------这可能是把ZooKeeper概念讲的最清楚的一篇文章

    相信大家对 ZooKeeper 应该不算陌生,但是你真的了解 ZooKeeper 是什么吗?如果别人/面试官让你讲讲 ZooKeeper 是什么,你能回答到哪个地步呢? 我本人曾经使用过 ZooKee ...

  5. 分享关于搭建高性能WEB服务器的一篇文章

    这篇文章主要介绍了Centos5.4+Nginx-0.8.50+UWSGI-0.9.6.2+Django-1.2.3搭建高性能WEB服务器的相关资料,需要的朋友可以参考下(http://m.0813s ...

  6. 在知乎上看到 Web Socket这篇文章讲得确实挺好,从头看到尾都非常形象生动,一口气看完,没有半点模糊,非常不错

    在知乎上看到这篇文章讲得确实挺好,从头看到尾都非常形象生动,一口气看完,没有半点模糊,非常不错,所以推荐给大家,非常值得一读. 作者:Ovear链接:https://www.zhihu.com/que ...

  7. 转载几篇文章URL

    读了百伯在线Jobbole的几篇文章,转给需要的朋友.如下: 产品小设计大体验:http://blog.jobbole.com/39593/ 苹果是一家有工程师的设计公司:Google是一家有设计师的 ...

  8. 一篇文章,读懂 Netty 的高性能架构之道

    原文 Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机 ...

  9. Node.js 创建HTTP服务器(经过测试,这篇文章是靠谱的T_T)

    Node.js 创建HTTP服务器 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi. 从这个角度看,整个& ...

随机推荐

  1. TUN/TAP编程实现

    其实关于这两种设备的编程,基本上属于八股文,大家一般都这么干. 启动设备之前 有的linux 并没有将tun 模块编译到内核之中,所以,我们要做的第一件事情就是检查我们的系统是否支持 TUN/TAP ...

  2. How Xtuner E3 works for BMW 520d Diagnosis and initialization of CBS service

    Using Xtuner E3 to perform BMW 520d Diagnosis and initialization of CBS service in step by step proc ...

  3. vue中的钩子函数的理解

    接下来我们对几个钩子函数进行解释 beforeCreated:这个钩子函数实在vue实例创建后,触发的.这个时候还没有进行data里的数据监听和事件的初始化 其实大家很多时候都会在created钩子函 ...

  4. leveldb 学习记录(五)SSTable格式介绍

    本节主要记录SSTable的结构 为下一步代码阅读打好基础,考虑到已经有大量优秀博客解析透彻 就不再编写了 这里推荐 https://blog.csdn.net/tankles/article/det ...

  5. java内存性能调优编码注意

    1.没有必要时请不用使用静态变量 使用Java的开发者都知道,当某个对象被定义为stataic变量所引用,这个对象所占有的内存将不会被回收.有时,开发者会将经常调用的对象或者变量定义为static,以 ...

  6. redis 集群模式安装

    概念 Redis集群提供一种方式自动将数据分布在多个Redis节点上. 每个Redis集群中的节点都需要打开两个TCP连接.一个连接用于正常的给Client提供服务,比如6379,还有一个额外的端口( ...

  7. flask 学习

    标题 操作 09-2-sqlalchemy数据库查询 (2019-01-18 23:30) 编辑 09-1-数据库扩展包flask-sqlalchemy (2019-01-18 17:53) 编辑 0 ...

  8. 【python接口自动化测试教程】00---00章节就代表开篇吧

    今天突然想写个接口测试教程,由于本人是初级的比小白稍微好那么一丢丢,所以不知道能不能坚持下来 写的不对的地方还请大咖指教 先去忙自己的工作了,忙完了回来开始写第一章吧 或者先写个大纲,要不然写的章节会 ...

  9. java基础-三元运算符

    1.三元运算符的格式 /* 三元运算符 (条件表达式)?表达式1:表达式2; 如果条件为true,整个表达式结果是表达式1: 如果条件为false,整个表达式结果是表达式2: 注意:三元运算符不能单独 ...

  10. Powershell渗透测试系列–进阶篇

    原文来自:https://bbs.ichunqiu.com/thread-41561-1-1.html i春秋作家:anyedt 0×00 引言 经过基础篇的学习我们已经对powershell有了一个 ...