一般情况下，如果网页加载时间超过5s，用户就会感觉页面比较卡，用户体验相当差，用户可能会直接走人，所以加载的时间对于一个网站来说还是相当重要的。那做项目的时候怎样分析页面的加载速度慢呢？
首先我们要知道影响页面加载的因素
- JS性能太差，阻塞页面
浏览器解析过程中，遇到<script>标签的时候，便会停止解析过程，转而去处理脚本，如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后执行。在处理完脚本之后，浏览器便继续解析HTML文档。
遇到JS阻塞的情况，就需要具体去看代码的具体逻辑。
- 某个请求慢阻塞页面的加载
一般遇到页面卡顿，首先去Network里面去查看每个页面所有请求的状态及具体的加载时间，以及每一个请求的详细耗时。如果状态有非200，如pending，则去检查对应的请求。
- 同域名下的请求数过多导致Queueing
就是浏览器与同一个域名建立的TCP连接数是有限制的，比方chrome设置的是6个，如果说同一时间，发起的同一域名的请求超过了6个，这时候就需要排队了，也就是这个Queueing时间。
查看页面加载时间
以chrome为例，打开页面后，按F12或者点击右键菜单里的检查，就进入了开发者模式，开发者模式里面有很多功能，跟页面加载时间相关的就是Network标签。如下图所示：
依次是17个请求；622K数据；页面最后一个请求截止用时1.7s；DOM内容加载并解析完成用时1.48；页面所有的资源（图片，音频，视频等）加载完成用时1.58s
一般情况下html页面在解析渲染的过程中，会有大量的请求，比如外链的css、js、图片等等，这些资源都需要浏览器去重新发起http请求。这些请求其实都是类似的一个过程。
首先我们打开F12开发都工具的Network标签，看看单个请求的各个时间段（不同的时段分别有不同的颜色区分），将鼠标悬停在waterfall字段就可以看到这个请求具体的耗时，如下图所示：
各个时间段的含义
深入分析页面的性能
粗略扫一眼请求的时间，都是清一色几十毫秒。这时候我们可以在Network里瀑布般的Timeline里很直观的看出来请求的耗时情况。
在timeline里，每一条线代表一个TCP的连接，每一种颜色代表请求一个时间段，每条线的颜色一直循环变化，从灰色到深绿最后蓝色，然后又变灰色，说明浏览器建立的TCP连接一直在循环复用，这样就省去了三次握手的时间。
有一条蓝色竖线和红色竖线，蓝色竖线表示触发DomContentLoad事件触发时间，红色表示Load事件触发，如下图：
开发者工具的Performance
