怪兽大作战（一）: 解析网站打开慢的原因

文章开始前，先百度下“为什么 xx 打开慢”，结果如下：

　　传统巨头

　　百度：30,200,000

　　新浪：48,200,000

　　搜狐：4,420,000

　　新兴贵族

　　知乎：47,100,000

　　豆瓣：6,230,000

优酷：2,310,000

　　为什么互联网技术发展到今天，依然无法彻底解决网站打开慢的问题？

　　这是 IT 行业的顽疾不可治愈吗？

　　从数据上可以看到：

　　知乎虽然是新兴贵族，但其网站打开慢的次数却比传统巨头百度还要多，几乎和新浪并肩。

　　新浪有数十年打开慢次数的积累，才险胜知乎。

　　知乎作为后起之秀，真是令人刮目相看。

　　而优酷则是出现打开慢次数最少的一家。可见：各大互联网公司在技术的储备和运用上，还是有差别的。

用户打开浏览器，输入网址，页面就加载出来。这简简单单的背后到底隐藏这什么怪兽，让各大互联网势力，忙得不可开交？

　　首先请看一张图，这是在浏览器打开一个页面，浏览器都干了些什么的时间表， 在高级浏览器例如Chrome，可以通过 js 脚本 window.performance.timing 拿到这些数据，OneAPM 的 Browser Insight 就是以此为基础开发出来的。

　　看着一堆英文，你一定晕了，其实我也晕了。

　　通常诊断网站打开慢，把这个时间表可以简单的分为3 个过程，来进行分析就好了 ，每个过程都包含一些细节：

　　网络链接的时间 fetchStart-responseStart

　　浏览器接受数据构建页面 responseStart-domContentLoadedEventStart

　　页面加载资源并渲染页面 domContentLoadedEventStart-loadEventEnd

在这 3 个环节中分别隐藏 3 只怪兽，撕咬你的站点，拖慢你的速度。

　———— 分身兽 —————

　　导致网站打开慢的第一只怪兽必然是：网络链接时间。

　　互联网公司中土豪，勉强和这只怪兽打个平手;其他互联网公司，均早早鸣金收兵。

　　因为这只怪兽竟然会分身。首先分身为，电信网络和联通网络;然后又都分身为，全国 34 个行政区。如果有时候，你觉得你打开网站速度很快，但是某些地区的用户打开网站很慢，那一定是这个地区的怪兽太强了。对付这只怪兽通常用的武器：

　　DNS 加速，例如：dnspod，加速你在全国的域名解析速度;

　　网站镜像，解决多线路互通的问题，例如：联通、电信、移动;

　　CDN 加速，让你的资源距离用户更近一些，打开速度自然更快。

　　遗憾的是，这 3 招都是烧钱的，一口气全用上，不是土豪根本用不起。所以要分析清楚自己的访客群在哪，有的放矢的花点银子。例如，利用 OneAPM 网站地理位置信息图。

———— 幻化兽 —————

　　导致网站打开慢的第二只怪兽就是：接受数据的速度。

　　在解决第一只怪兽后，能影响接受数据速度的，主要是服务器的响应时间。

　　尤其是当用户量比较大，数据比较多，业务比较复杂的时候，这只怪兽竟然会跟着幻化。例如：高并发下的分布式事务锁「电商」，海量数据的快速检索「搜索」，图片、视频等资源快速加载「多媒体」。

　　和这头怪兽作战，主要是靠人才和常年累月的技术积累。各大互联网公司也是一致的，均采取「拥抱开源 + 垄断人才」的措施。这就是为什么最近几年应届毕业生的价码越来越高，垄断人才的战斗从这里就开始了。

——— 分裂兽 ————

　　导致网站打开慢的第三只怪兽是最近几年才出现，以前页面比较简单，承载的业务也单一。

随着时间的推移，一个页面越来越大，业务越来越复杂，进而问题也就跟着来了。

　　这是一只分裂兽，这只怪兽通常喜欢和用户呆在一起，却和你玩捉迷藏的游戏。

　　现在主要分裂为：IE、火狐、Chrome、各大浏览器的移动版，和国产手机上的国产浏览器。国产的太复杂，就不一一列举了。

　　这里以「新浪微博」为例：微博登录后的首页，累计发起了 281 个请求，用来加载各种各样的资源。一个简简单单的发微博的页面都是如此的复杂，更不用说大家平时用其他系统了。

　　这是错误日志：

　　各大互联网公司在同分裂兽作战的过程中，胜多败少。这样的战绩，中小公司难以望其项背。原因如下：

　　一个页面都加载这么多资源，一个站点 N 页面加载的资源更多遇到的问题也会更多。可见和分身兽交战也是惨烈的。没有大量的技术人才，和准确的分析定位，难有胜算。一线互联网公司，因为在这一块有着丰富的积累，所以平手居多。你看新浪也是用了近 10 秒，才完成所有资源的加载。

　　对这些资源进行管理需要用到前端工程师，而网页变的复杂也是最近几年的事情。前端工程师的培养有个过程，除了老牌互联网公司有技术储备和人才储备，能够稳住阵脚，其他公司都是疲于应战。

　　例如：随便打 QQ 商城 http://www.wanggou.com/;一个电子商务的首页;就报 js错误;至于这个错误影不影响业务，我就不清楚了.

　　对 js错误日志的收集和分析，也是一件复杂的事情。因为访问量越大，数据量越大。

　　除了大公司，小公司做自己业务都人手不够;更不用说，浏览器日志收集这些和业务无关的事情了。

　　服务器端可以随便打日志，看日志，而浏览器端只能闭着眼睛：猜!用户遇到什么故障了往往只有打电话吐诉后远程桌面，才能知道。效率十分低下!

———— 一些数据 —————

　　这里是博主将OneAPM Browser Insight，改装为 Chrome 浏览器插件。

　　看了下我自己经常访问的站点相关信息，和大家分享下：

页面加载时间

　AJAX 响应时间

错误日志

　　还有一条新浪汽车的错误日志，也不知道他们修改了没有，看名字好像还挺要紧的。main 函数啊!

　　最后，问题来了!

　　如何才能拥有，和一线互联网公司一样的，技术储备和人才储备？挖掘机技术哪家强？