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

时间 2019-12-10

标签文章变身 web 分析大师栏目 HTML 繁體版

原文原文链接

欢迎你们前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~javascript

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

一、工具介绍php

这是一个很是详细且专业的web页面性能分析工具，并且开源的！若是你打不开其官网，或者担忧安全问题，你能够本身拿源码搭建这个平台工具。css

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

入口在这里，长这样，vue

上面三输入框，，，第一行，输入你的页面url。java

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

第三行，选择什么浏览器访问。chrome

右边，点击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...，分析结果。

二、结果使用和分析

分析完后，结果长这样，

总共跑了三次。每一次都是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相应知识

此文已由做者受权腾讯云+社区发布，更多原文请点击

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

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