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

**欢迎大家前往[腾讯云+社区](https://cloud.tencent.com/developer/?fromSource=waitui)，获取更多腾讯海量技术实践干货哦~** > 本文由[shirishiyue](https://cloud.tencent.com/developer/user/2681943)发表于[云+社区专栏](https://cloud.tencent.com/developer/column/73029?fromSource=waitui) **1、工具介绍** ​ 这是一个非常详细且专业的web页面性能分析工具，而且开源的！如果你打不开其官网，或者担心安全问题，你可以自己拿源码搭建这个平台工具。 ​ 性能分析极其详细，包含你所知道的所有新能参数指标，还有一些这个工具自己的指标参数，比如speed index，更能从人的角度看待一个页面体验是否良好。提供了多种主流浏览器的访问性能，提供了全球多个地点的测试性能，还有视频录像功能可以返回体验。这个视频功能极好的用于直观的对比演示。总之，优点非常之多，没有理由不尝试一下。 ​ 入口在 [这里](https://www.webpagetest.org/)，长这样，  ​ 上面三输入框，，，第一行，输入你的页面url。 ​ 第二行，选择你的访问点，比如你想测一下北京的用户访问速度，那么你选择北京。 ​ 第三行，选择什么浏览器访问。 ​ 右边，点击START TEST，，，，耐心等待。 ​ 分析的结果时存下来的，比如，我的三个url分析结果如下，可以反复进入查阅。 页面1：https://test.igame.qq.com/pvp/acts/a201807/herotool.php?op=2，[分析结果](https://www.webpagetest.org/result/181108_4G_011f6c33da1e7f199f8a1ecd03ef0728/)。 页面2：http://134.175.16.24/vuessr/act/act1/index/hero，[分析结果](https://www.webpagetest.org/result/181108_XY_92f54bd829b1b6f02634774294491736/)。 页面3：http://134.175.16.24/newcss/act/act1/index.html/hero，[分析结果](https://www.webpagetest.org/result/181108_2D_20fc46a11de58d60dde7421b6d3be954/)。 **2、结果使用和分析** ​ 分析完后，结果长这样，  ​ 总共跑了三次。每一次都是First View（就是相当于新用户，首次打开页面，没有任何缓存）。 ​ Performance Result 就是指标总览，列举了一些主要的新能指标的平均值。 ------ [指标解析](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics)： 从输入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](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/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相应知识](https://cloud.tencent.com/developer/edu/course-1128?fromSource=waitui) **此文已由作者授权腾讯云+社区发布，更多原文请[点击](https://cloud.tencent.com/developer/article/1361742?fromSource=waitui )** **搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！** 海量技术实践经验，尽在[云加社区](https://cloud.tencent.com/developer?fromSource=waitui)！