怎样分析页面加载慢

通常状况下，若是网页加载时间超过5s，用户就会感受页面比较卡，用户体验至关差，用户可能会直接走人，因此加载的时间对于一个网站来讲仍是至关重要的。那作项目的时候怎样分析页面的加载速度慢呢？

首先咱们要知道影响页面加载的因素

• JS性能太差，阻塞页面

浏览器解析过程当中，遇到<script>标签的时候，便会中止解析过程，转而去处理脚本，若是脚本是内联的，浏览器会先去执行这段内联的脚本，若是是外链的，那么先会去加载脚本，而后执行。在处理完脚本以后，浏览器便继续解析HTML文档。
遇到JS阻塞的状况，就须要具体去看代码的具体逻辑。

• 某个请求慢阻塞页面的加载

通常遇到页面卡顿，首先去Network里面去查看每一个页面全部请求的状态及具体的加载时间，以及每个请求的详细耗时。若是状态有非200，如pending，则去检查对应的请求。

• 同域名下的请求数过多致使Queueing

就是浏览器与同一个域名创建的TCP链接数是有限制的，比方chrome设置的是6个，若是说同一时间，发起的同一域名的请求超过了6个，这时候就须要排队了，也就是这个Queueing时间。

HTML页面是如何完成

当咱们在浏览器输入url按下Enter后，浏览器拿到你输入的url，解析出域名【domain.com】获得域名以后进行DNS查询（TCP/IP协议中链接是须要知道IP地址），解析获得域名IP，而后与服务器创建链接，再与该IP地址来三次经典的握手创建TCP链接，若是协议头是http则与目标IP的80端口通讯，若是是https则是443端口，创建好TCP链接后，就能够发送http请求了，浏览器发起请求，服务器响应并返回内容，最终就是咱们所看到的页面内容。

查看页面加载时间

以chrome为例，打开页面后，按F12或者点击右键菜单里的检查，就进入了开发者模式，开发者模式里面有不少功能，跟页面加载时间相关的就是Network标签。以下图所示：

依次是17个请求；622K数据；页面最后一个请求截止用时1.7s；DOM内容加载并解析完成用时1.48；页面全部的资源（图片，音频，视频等）加载完成用时1.58s

Finish：页面最后一个请求截止的时间，若是页面加载完后，触发了ajax请求，那么该时间会加长。
DOMContentLoaded：DOM内容加载并解析完成的时间。（通俗来说就是是页面白屏的时间）
load：页面全部的资源（图片，音频，视频等）加载完成的时间。（页面加载完成，浏览器再也不转圈的时间，页面上全部的资源（图片，音频，视频等）被加载之后才会触发load事件，简单来讲，页面的load事件会在DOMContentLoaded被触发以后才触发。）

通常状况下html页面在解析渲染的过程当中，会有大量的请求，好比外链的css、js、图片等等，这些资源都须要浏览器去从新发起http请求。这些请求其实都是相似的一个过程。
首先咱们打开F12开发都工具的Network标签，看看单个请求的各个时间段（不一样的时段分别有不一样的颜色区分），将鼠标悬停在waterfall字段就能够看到这个请求具体的耗时，以下图所示：

各个时间段的含义

Queueing
请求排队的时间。就是浏览器与同一个域名创建的TCP链接数是有限制的，比方chrome设置的6个，若是说同一时间，发起的同一域名的请求超过了6个，这时候就须要排队了，也就是这个Queueing时间。
Stalled
就是浏览器获得要发出请求的指令到请求能够发出的等待时间，通常是代理协商、以及等待可复用的TCP链接释放的时间，不包括DNS查询、创建TCP链接等时间等。
Stalled/Blocking
请求可以被发出去前的等等时间。包含了用于处理代理的时间。另外，若是有已经创建好的链接，那么这个时间还包括等待已创建链接被复用的时间，这个遵循浏览器对同一源最大TCP链接的规则。
Proxy Negotiation
处理代理的时间。
DNS Lookup
DNS查询的时间，页面内任何新的域名都须要走一遍 完整的DNS查询过程，已经查询过的则走缓存。
Initial Connection / Connecting
创建TCP链接的时间，包括TCP的三次握手和SSL的认证。
SSL
完成ssl认证的时间
Request sent/sending
请求第一个字节发出前到最后一个字节发出后的时间，也就是上传时间。
Waiting
请求发出后，到收到响应的第一个字节所花费的时间。
Content Download
收到响应的第一个字节，到接受完最后一个字节的时间，就是下载时间。

深刻分析页面的性能

粗略扫一眼请求的时间，都是清一色几十毫秒。这时候咱们能够在Network里瀑布般的Timeline里很直观的看出来请求的耗时状况。
在timeline里，每一条线表明一个TCP的链接，每一种颜色表明请求一个时间段，每条线的颜色一直循环变化，从灰色到深绿最后蓝色，而后又变灰色，说明浏览器创建的TCP链接一直在循环复用，这样就省去了三次握手的时间。
有一条蓝色竖线和红色竖线，蓝色竖线表示触发DomContentLoad事件触发时间，红色表示Load事件触发，以下图：

开发者工具的Performance