通过Google分析页面加载缓慢并优化

通过Google分析页面加载缓慢并优化

在这个明媚的清晨，日常听到客服温柔的声音：页面加载怎么这么慢，能不能优化一下？行不行？

诶呦！行不行？这…啊这……我这充满阳刚之气的少年哪能受得了？先看看情况吧！

于是我打开谷歌浏览器的时间：可以分析开页面请求开始的那一刻到数据请求结束的详细花费时间。

看到图片中说明 了吗? 下面的就是其中一段

所以可以判断等待中这个时间段才是系统开始处理的时间，这个时间耗时也很长，也就是这次主要优化的点！

找到了优化的点，那么就可以针对性的解决问题

时序分解阶段说明

以下是有关您可能在“时序”选项卡中看到的每个阶段的更多信息：

• 排队

  。浏览器在以下情况下对请求进行排队：

  • 有更高优先级的请求。
  • 已经为此源打开了六个 TCP 连接，这是限制。仅适用于 HTTP/1.0 和 HTTP/1.1。
  • 浏览器在磁盘缓存中短暂分配空间

• 停滞不前。请求可能因排队中描述的任何原因而停止。

• DNS 查找。浏览器正在解析请求的 IP 地址。

• 初始连接。浏览器正在建立连接，包括 TCP 握手/重试和协商 SSL。

• 代理协商。浏览器正在与代理服务器协商请求。

• 请求已发送。正在发送请求。

• ServiceWorker 准备。浏览器正在启动服务工作者。

• 对 ServiceWorker 的请求。请求正在发送给服务工作者。

• 等待（TTFB）。浏览器正在等待响应的第一个字节。TTFB 代表 Time To First Byte。此时间包括 1 次往返延迟和服务器准备响应所用的时间。

• 内容下载。浏览器正在接收响应。

• 接收推送。浏览器正在通过 HTTP/2 服务器推送接收此响应的数据。

• 阅读推送。浏览器正在读取之前接收到的本地数据。

查询代码发现里面确实有可以优化的地方，在于程序编写时没有考虑到不必要的SQL查询（数据量大时比较耗时），还用for循环查询

找到问题，当场优化，下图为优化后的结果