网络请求 - 瀑布图

请求瀑布图：

瀑布图展现了浏览器为渲染网页而加载的所有资源。包括加载的顺序和每个资源的加载时间，分析这些资源是如何加载的

以浏览器自带瀑布路为例

每一行都是一次单独的浏览器请求，瀑布图越高代表加载页面时请求的越多，每一行彩色条的宽度代表下载资源的时间

image.png
image.png

1.深绿色（DNS Lookup）： 在浏览器和服务器进行通信之前，必须经过DNS查询，将域名转换为ip地址（并非所有请求都经过这一阶段）
2.橙 色(TCP 连接)：在浏览器发送请求之前，必须建立TCP连接，这个过程仅仅发生在瀑布图中的开头几行
3.紫 色（SSL/TLS 连接）: 如果页面通过SSL/TLS 这类安全协议加载资源，这段时间就是浏览器建立安全连接过程
4,绿色（Time To Byte）: TTFB是浏览器请求发送到服务器的时间+服务器处理请求时间+响应报文的第一字节到达服务器的时间
5，蓝色（Downloading）:这就是浏览器用来下载资源所用的时间，时间越长，说明资源越大

根据瀑布图进行性能优化

1.首先，减少所有资源的加载时间.亦即减少瀑布图的宽度，网站的访问速度越快
2.其次，减少请求数量 也就是降低瀑布图的高度，瀑布图越矮越好
3.最后，通过优化资源请求顺讯加快渲染速度，将绿色的“开始渲染”线左移，这条线向左移动的越远越好

优化瀑布变窄

通过降低每一个资源的下载时间达到瀑布图变窄，瀑布图的每一行使用不同的颜色代表获取资源的不同阶段。不同颜色使用不同的优化手段提升网页的整体速度

• 橙色：橙色出现的比较多！
  橙色代表你的网站初始化TCP连接时间，对于同一个域名，只有最开始的2到6个请求需要建立TCP连接，那之后, 已存在的连接会被复用. 如果你在图上看到很多的橙色, 说明你的网站没有使用持久连接(长连接).
  举例：

  
  image.png
  

  一旦使用了长连接，每一行的请求宽度都会缩短一半（不用每个请求都建立新的连接）

• 紫色：紫色是用在SSL/TLS协商的时间.
  紫色是用在SSL/TLS协商的时间. 如果你看到同一个网站一次又一次的出现紫色, 这说明你没有优化TLS. 在下面这个截图中, 可以看见2个HTTPS请求

• 蓝色：蓝色是服务端响应之后, 浏览器下载资源所用的时间
  如果一行有很长的蓝色条, 八成是说明这个资源非常的大. 提升网站速度的一个妙招就是简单的把需要传到客户端的数据量减少，举个例子, 在下图中我们看到, 下载PNG图片用了很长时间, 因为蓝条特别长.深入研究一下, 我们发现这个图片有1.1MB那么大! 这说明设计师在PS之后忘了把图片导出成合适的尺寸. 用图片优化技术就能缩短这一行并且使整体页面加载的更快.

• 绿色： 绿条是等待获取内容的时间
  你可能经常看到绿条(等待时间)有80或者90毫秒, 而资源下载时间仅用了1毫秒. 减小绿条的最好方法就是把你的静态资源, 比如图片, 放到离你用户比较近的CDN上去.更多关于这个的话题, 以后再说.

降低瀑布图的高度

如果瀑布图很高，说明浏览器加载页面需要很多的请求. 减少请求的最佳方法就是看看你页面中包含的所有内容然后想想这个内容是否是必需的
举例：

• 看到一大堆CSS和JS文件，如果你的网站请求很多独立测CSS或JS文件，你需要用CMS插件或者作为构建过程进一步把它们合并
• 看到很多"小的"(不到2kb)JS文件和CSS文件了吗? 考虑一下用<script>, <code>或者<style>标签直接把这些内容内联到html文件中.(这个链接加的太蛋疼了, 不知道怎么翻译) Consider including the contents of those files directly in your HTML via inline <script>, <code>, or <style> tags.
• 看到很多302重定向吗? 重定向在图中是高亮的黄色行. 代表你页面上的链接经常过期或者出错. 这些过期或者出错, 产生了没必要的重定向, 这玩意儿没什么用, 只能把你的瀑布图变高. 把那些链接替换成新的URL吧.

image.png

提升渲染时间

开始渲染时间代表用户首次从空白页面到看到加载出东西的时间

你的渲染开始时间如何? 如果超过1.5秒, 就得优化了. 说到优化, 先看一下开始渲染线(垂直的绿线)的"上边和左边"的所有资源. 这些东西就是为了提升渲染时间所要优化的东西.
提示：

• 看到加载JS库了吗? 引入JS会阻塞页面的渲染, 如果可能的话, 把这些JS放到页面的下边.
• 看到很多单独的CSS请求吗? 浏览器在渲染页面之前会等待所有CSS下载完成. 能不能合并这些CSS或者把一些CSS内联到HTML中
• 看到额外的字体了吗? 当使用了额外的字体, 浏览器不会绘制任何东西直到下载了 那个字体. 可能的话, 要尽量避免使用额外加载的字体. 如果避免不了, 确认去掉了任何为了加载字体而做的没什么用的302跳转, 或者(更好的情况) 把那个字体copy一份, 放在你自己的服务器上.