读了这篇文章,你将变身web分析大师

6次阅读

共计 1854 个字符,预计需要花费 5 分钟才能阅读完成。

欢迎大家前往腾讯云 + 社区,获取更多腾讯海量技术实践干货哦~
本文由 shirishiyue 发表于云 + 社区专栏

1、工具介绍
​ 这是一个非常详细且专业的 web 页面性能分析工具,而且开源的!如果你打不开其官网,或者担心安全问题,你可以自己拿源码搭建这个平台工具。
​ 性能分析极其详细,包含你所知道的所有新能参数指标,还有一些这个工具自己的指标参数,比如 speed index,更能从人的角度看待一个页面体验是否良好。提供了多种主流浏览器的访问性能,提供了全球多个地点的测试性能,还有视频录像功能可以返回体验。这个视频功能极好的用于直观的对比演示。总之,优点非常之多,没有理由不尝试一下。
​ 入口在 这里,长这样,

​ 上面三输入框,,,第一行,输入你的页面 url。
​ 第二行,选择你的访问点,比如你想测一下北京的用户访问速度,那么你选择北京。
​ 第三行,选择什么浏览器访问。
​ 右边,点击 START TEST,,,,耐心等待。
​ 分析的结果时存下来的,比如,我的三个 url 分析结果如下,可以反复进入查阅。
页面 1:https://test.igame.qq.com/pvp…,分析结果。
页面 2:http://134.175.16.24/vuessr/a…,分析结果。
页面 3:http://134.175.16.24/newcss/a…,分析结果。
2、结果使用和分析
​ 分析完后,结果长这样,

​ 总共跑了三次。每一次都是 First View(就是相当于新用户,首次打开页面,没有任何缓存)。
​ Performance Result 就是指标总览,列举了一些主要的新能指标的平均值。

指标解析:从输入 url 按 enter 开始的,达到下面节点的时间。
▲ Load Time
​ 页面完全加载完时间(不等待图片下载,iframe 下载,css 更新完),此时,window.onload 事件此时触发。同 Document complete time.
▲ DOM Content Loaded
​ HTML DOM 骨架完全下载和解析,包括 <script> 元素。(等待图像下载,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 相应知识

正文完
 0