查看前端各资源css,js,图片,接口等加载速度
前言
网页打开的速度快慢直接影响了用户体验。据统计,Google网站访问速度每慢400ms就导致用户搜索请求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。所以网页加载速度应该是一个前端开发者关注的重要指标。那么我们如何得知,在前端网页中,各资源的加载速度昵?下面以百度为例。
查看前端各资源加载速度
- 打开百度,选择F12,打开控制台。选择“Network”,刷新一下页面。
- 选择第一个资源,www.baidu.com,选择“Timing”,查看最下方的时间509.64ms就是百度页面打开的时间。
- 其他的CSS资源、图片资源,JS资源,都是这样看加载时间。
加载过程中各指标详解
观察以上的Timing,除了最下方的总时间数,还有其他的详细指标。
-
Queueing
此参数表示从添加到待处理队列,到实际开始处理的时间。
浏览器是有线程限制的,不能将所有发出去的请求同时发送,浏览器会将请求加入消息队列中(Chrome的最大并发连接数是6)。 -
Stalled
浏览器准备发出请求指令,到请求可以发出的等待时间,一般是代理协商、以及等待可复用的TCP连接释放的时间,不包括DNS查询、建立TCP连接等时间等。浏览器对同一个主机域名的并发连接数有限制,因此如果当前的连接数已经超过上限,那么其余请求就会被阻塞,等待新的可用连接;此外脚本也会阻塞其他组件的下载。 -
DNS Lookup
DNS 解析时间。在 DNS 查找完成之前,浏览器不能从主机名那里下载到任何东西。没有本地缓存的时候,DNS查询的时间比较长。但是比如在 host 中设置了 DNS,或者第二次访问,由于浏览器的 DNS 缓存还在,这个时间就非常短了。 -
Initial connection
浏览器建立 TCP 连接的时间,浏览器从发请求开始到 TCP 握手结束这一段时间,包括 DNS 查询 + Proxy 时间+ TCP 握手时间。 -
SSL
http是超文本传输协议,以明文方式发送内容,不提供任何方式的数据加密,如果被不法分子截取浏览器和服务器之间的传输报文,会获取其中的信息。
https 是安全套接字层超文本传输协议,就是在HTTP的基础上加入了SSL协议,SSL依靠证书来验证服务器的身份,并为浏览器和服务器之间的通信加密。因此建立HTTPS连接的时间相当于三次握手的时间+SSL时间。 -
Request sent
服务器发送HTTP请求,从第一个字节发出前到最后一个字节发出后的时间。 -
Waiting(TTFB)
从浏览器发起请求,到服务器的首字节响应的时间(Time To First Byte)。这个阶段通常是耗费时间最长的。可能受到线路、服务器距离等因素的影响。 -
Content DownLoad
收到响应的第一个字节,到接受完最后一个字节的时间,就是资源下载时间。