当网页加载很慢的时候，应如何分析其原因并解决问题？

今天在知乎上瞄到一条有趣的问答，题主曰：

我是个后端RD，看上了一个前端妹子，昨天吃饭的时候她跟我抱怨她们的页面打开很慢，如何才能快速的分析页面加载慢的原因，在妹子面前表现一下呢？

此题目被强大的知友修改为更加接地气的标题：

当前端妹子跟我抱怨她们的页面加载很慢的时候，如何在她面前优雅地装逼？

我想这个问题应该是每个程序猿朋友们值得思考的问题，毕竟程序猿不好找女朋友的现状摆在那里。不过知友"姬十三"说出了不幸的真相：

你们程序员找不到女朋友的原因就是在追女孩的时候还想着技术问题！

好了，闲话少说，其实这个问题抛开把妹的因素外，作为一名前端技术人员，应当关注的核心问题在于：当网页加载很慢的时候，应如何分析其原因并解决问题？

且看知友“张皓”的精彩回答

看来题主你的目的是装逼，优雅地装逼，要让妹子觉得你很牛逼对不对？要让妹子听你分析完之后就投怀送抱对不对？

首先，想装逼就要显得随性、自然，看一眼就知道问题在哪。如果你需要吭吭哧哧的查半天log、分析core文件，那逼格自然就降低了许多。那如何才能随性自然呢？答案是看网页瀑布图。啥是瀑布图？这都不知道还追前端妹子？用chrome打开网页，按住option+command+i（windows是F12，但是如果你按的是这个，那么你怎么敢说你要装逼，前端团队都是清一水的mac啊亲，先换个mac再装逼），打开开发者工具看network。
有了瀑布图，下面才是装逼的重点，要故作轻松、轻描淡写的扫一眼瀑布图，然后沉思几秒，语调略带深沉的跟妹子说：“我知道了”。当然，你要真的知道才行，不给妹子说出个所以然来，最后死的还是你。
造成加载很慢的原因很多，但是你只需要知道一些就可以了，下面我就给你说一些常见的问题以及识别方法，如果这些情况都不是，那就只能祝你好运了哥们。

1、你们后端的问题

看到没，第一个请求特别长、特别长，明显比其他请求放到一起不和谐。一般网页第一个请求是动态请求的概率比较大，如果这个请求特别耗时，那肯定不是前端的责任，不是妹子的问题，伦家的html都没加载完呢，你怎么就能说是前端的问题呢。作为一个后端RD，你应该有这种觉悟，勇敢的说这是你的责任，表现出一个男人的气魄来，让妹子觉得你是一个负责的好男人。优化php、优化数据库、优化一切可以优化的东西，要让妹子觉得很爽才行。

2、请求数太多

数一下瀑布图总共有多少行，onload之前如果有几百行，那么请求就太多了。问一下妹子，一下子加载那么多资源真的好么？跟妹子说，css，js该合并的合并，图标该精灵的精灵，告诉妹子使用字体图标也能提升你高大上的形象。还有，有些不重要的东西不用放到onload之前加载，放到后面也一样嘛。网页发请求数就跟妹子的前男友数一样，越少越好。

3、老鼠屎

看到图中的这个请求没？再看看其他请求，这个请求比其他请求的时间大出一个数量级。这种情况一般是因为某一个资源太慢了，它就是一颗老鼠屎，坏掉了整锅汤，导致网页整体变慢。资源慢的原因，你可以跟妹子去星巴克，两个人采取结对编程的方式慢慢把玩这颗老鼠屎，概率比较大的几个可能是：a)资源在第三方站点上，他们很慢；b)这个资源太大了；c)这个资源使用的域名有问题。

4、网络问题

仔细看一下一个单独的http请求，他们会分为好几段，分别是域名解析、建立连接、发送请求、等待响应和接收数据几个阶段。理论上域名解析和建立连接应该占用的时间很小才对，主要的时间应该用在后面几个阶段上。上图中，浅灰色和灰色分别代表域名解析和建立连接，可以看出这两个请求中花费在网络层上的时间太长了，超过总时间的一半还要多。网络层时间过长除了可能和底层网络有关之外，还可能和站点的服务端性能有关（后端RD的事情哦）。当然，如果这种情况发生在向第三方站点发送的请求上（实际上也经常发生），你就可以建议妹子取消或者更换某些站点功能从而避免这样的请求了。

5、接收数据时间过长

上面说了，http请求的大部分时间应该花在后面几个阶段，比如等待响应和接收数据。但是，如果接收数据的时间太长了，长到数百毫秒甚至以秒计算的时候，那也是有问题的。这种情况一般是因为下载的内容太重了，例如大图片、大脚本等。这类问题可以使用GZIP压缩、图片压缩或者JS/CSS的minify等手段来解决。

6、js阻塞请求

图中两个连续的请求之间出现了一个很大的空隙，为啥会出现这个空隙呢？可能是因为妹子写的js性能有问题，解析执行js花了很长时间，导致这段时间的资源加载都被阻塞住了。如果发生了这个情况，你就应该耐心安慰妹子，问一下妹子是不是在写代码的时候身体不舒服啊、心情不好啊之类的关心一下，切记不能直接说妹子代码写的不行，不然肯定没有然后。

7、如果以上都没有

可以和妹子一一翻看每个http请求，仔细研究每个请求头响应头，看看是不是没有设置缓存啦，图片优化的不够好啦之类的。如果担心自己分析不好，可以先找个工具分析一下，比如：http://speed.mmtrix.com/ ，把上面这张图拿给妹子看看，问题一目了然。

写到这里我忽然想到了一点，妹子抱怨慢的时候你当时没有装逼，现在才学如何装逼，还来得及么？来得及么？得及么？及么？么？