一文带你了解某搜索网站的优化

该网站的网址我们很熟悉：https://www.baidu.com，打开网站界面其实很简洁，一个搜索框，一个按钮，看似简单的背后其实不简单，因为这样的网站，往往的访问量，并发量奇高，这时候一个看似简单的资源请求，可能就是服务器集群一份压力，而这时候的性能优化就极其重要。

打开chrome浏览器的开发者工具，选择Performance性能面板，可以看到这样如下图1的界面，有一个页面重载的按钮。

图1 性能分析面板

接下来点击一下这个按钮，稍等一会，会出来整个页面重载后的性能分析报告。如图2所示，包括各个阶段与流程所需的时间，在整体时间轴上的占比等等，使你对整个网页的各个位置的信息都了然于胸，哪部分所花时间长，就改善哪部分。

图2 页面重载

调节上方的拖条，可以将不重要部分去除，如图3所示。

图3 显示各个资源的详细信息

这时观察一下，可以看到，除了此网站域名之外，还有不少图片是来自于一个ss1.bdstatic.com的静态资源域，如图4所示。

图4 分多域名取资源

这就是要说的第一个，分多域名取资源，就犹如前面章节一直反复强调的一样，浏览器本身是有并发请求限制数的，就比如并发请求限制，但这个限制的前提，就是同源，不同源的情况下并不受限，而这是几乎所有大厂在性能优化上都会做的一件事，就是分域名储存资源，且静态资源有单独的区域来存储。

然后再看下此类的ss1.bdstatic.com，你会发现它的资源的加载很快，像是本来就离你所在的网络分段很近，而这个就是CDN，如前面的章节所说，可以就近取材，而CDN加速就可以让你的打开该网站时的加载速度极大的提升。

CDN的代理其实不仅仅是ss1.bdstatic.com，你还可以在Sources面板发现很多类似的域名和站点，如图5所示。

图5 CDN加速

接下来看NetWork面板总的资源请求数，如图6所示，针对不同的终端，比如PC端、手机端，该网站做了一个大中小图片的方案处理，而这显然是很合适的应用和性能优化方案，达到一个物尽其用而非大材小用的目的。

图6 大中小图片方案

接下来，既然是搜索引擎，就会有搜索历史，这部分对于提升用户体验也非常重要，那这部分百度是怎么做的？随便输入一些东西作为测试，重新打开百度，此时你曾经输入过的东西就会显示出来。

接着你打开NetWork面板，先清空原来的各个请求，接下来你会发现当每聚焦一次百度的那个输入框，这里就会出现一个请求，再打开这个请求，你可以发现，这个请求原来就是你的输入历史，如图7所示。

图7 输入历史

那这部分是存放在该网站服务器上吗？假设是存放在服务器上，此时用户每聚焦一次输入框，服务器就多了一条请求的压力，一个用户没什么，十个，一百，一千，一万个用户也没什么，但这是上亿的用户量，每个用户一条，对于服务器集群来说就是1亿条，假如都是请求服务器，服务器的压力与最终的硬件成本得多高？

此时，打开一下Application面板，看一下LocalStorage，你会发现一个有趣的情况，如图8所示。

图8 输入历史

再将镜头移近一点看，如图9所示。

图9 LocalStorage储存的信息

看起来好像是乱码，其实不是，这个是URL的缘故，到某个格式化网站上格式一下看看，或者直接在控制栏通过decodeURIComponent()方法来转译，如图10所示。

图10 URL信息格式化

你会发现这些就是刚刚的搜索历史，这也是该网站做的第四个优化方面，LocalStorage缓存，一个网站性能好不好，关键的就是负责这个网站的工程师对缓存的设置。而LocalStorage显然是其中一种，其实这个凸显的一种思想是，客户端的资源。

对于一个应用来说，服务端的资源其实是有限的，不可能毫无节制，简单的新加服务器上去，这样的瓶颈会比较低而且很容易在高峰期时出现服务器故障，有时候考虑能否利用客户端的资源帮忙做一些事情，减少事事都向服务器提要求导致服务器不堪重负的问题，而LocalStorage就是一个最直观的体现。

上面主要是清空缓存来测试，这时候不清空缓存，直接刷新一下页面，你可以发现，有很多的请求是如图11这样的。

图11 缓存

此时这些请求，所花的时间几乎为0，基本都是0ms和1ms等等，可以发现有些来自于memory cache，也就是内存缓存，有些这是disk cache，即硬盘缓存。当然这部分有一部分是浏览器默认缓存机制的功劳，但这也正是用到了第7章7.1.3节所提的的强缓存与协商缓存。

随意点开某个资源，可以看到该资源的请求头中的缓存设定，如图12所示。

图12 请求头缓存机制设置

而这时利用了强缓存，尽管你刷新了页面，但因为你并未做任何资源的变动，所以实际上请求到的东西是从内存或硬盘中来，百度的服务器无需再次耗费精力为你提供服务。而绝大部分的请求根本就未打到服务器上，单单这一条，无形中服务器的压力就极大的减小，其实不止该网站，也是几乎所有的网站服务端都会做的操作。