前端资源（css,js,图片,接口等）加载过程

前言

网页打开的速度快慢直接影响了用户体验。据统计，Google网站访问速度每慢400ms就导致用户搜索请求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。所以网页加载速度应该是一个前端开发者关注的重要指标。那么我们如何得知，在前端网页中，各资源的加载速度昵？下面以百度为例。

查看前端各资源加载速度

1. 打开百度，选择F12，打开控制台。选择“Network”，刷新一下页面。
   
2. 选择第一个资源，www.baidu.com，选择“Timing”，查看最下方的时间509.64ms就是百度页面打开的时间。
   
3. 其他的CSS资源、图片资源，JS资源，都是这样看加载时间。

加载过程中各指标详解

观察以上的Timing，除了最下方的总时间数，还有其他的详细指标。

1. Queueing
   此参数表示从添加到待处理队列，到实际开始处理的时间。
   浏览器是有线程限制的，不能将所有发出去的请求同时发送，浏览器会将请求加入消息队列中（Chrome的最大并发连接数是6）。

2. Stalled
   浏览器准备发出请求指令，到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等。浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载。

3. DNS Lookup
   DNS 解析时间。在 DNS 查找完成之前，浏览器不能从主机名那里下载到任何东西。没有本地缓存的时候，DNS查询的时间比较长。但是比如在 host 中设置了 DNS，或者第二次访问，由于浏览器的 DNS 缓存还在，这个时间就非常短了。

4. Initial connection
   浏览器建立 TCP 连接的时间，浏览器从发请求开始到 TCP 握手结束这一段时间，包括 DNS 查询 + Proxy 时间+ TCP 握手时间。

5. SSL
   http是超文本传输协议，以明文方式发送内容，不提供任何方式的数据加密，如果被不法分子截取浏览器和服务器之间的传输报文，会获取其中的信息。
   https 是安全套接字层超文本传输协议，就是在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。因此建立HTTPS连接的时间相当于三次握手的时间+SSL时间。

6. Request sent
   服务器发送HTTP请求，从第一个字节发出前到最后一个字节发出后的时间。

7. Waiting(TTFB)
   从浏览器发起请求，到服务器的首字节响应的时间(Time To First Byte)。这个阶段通常是耗费时间最长的。可能受到线路、服务器距离等因素的影响。

8. Content DownLoad
   收到响应的第一个字节，到接受完最后一个字节的时间，就是资源下载时间。