创建Web应用的时候请时刻牢记Web优化

最晚回到宿舍，室友在做Web开发，隧溜过去瞅瞅，发现室友在调试代码，问之，室友原来卡在了一个加载数据显示的地方。问：100万条记录如何能以最高效率呈现在网页上，保持良好的浏览效果？在跟室友交流的过程中得知室友第一次把所有数据从服务器读取并加载到浏览器页面的时候势必会导致浏览器负载过大而卡机，通过改良，打算通过分页加载的方式，分次向服务器请求，一次请求顺利执行完成之后紧接着下一次，结果效果依旧不好，滚动条滚动过程中缓滞时间过长，浏览效果太差。后来从用户需求出发，改良为先进行一次请求，加载一定的数据量供用户浏览，然后根据用户的需求为先来决定要不要继续发送请求，毕竟用户每次能看到的也就浏览器那么大范围内的数据，这样其实隐藏了后台的请求方式，但是这样仍然有一定的弊端，执行效率不高，遇到没耐心的用户还嫌弃这玩意还得依赖我想不想要？其实小编有个想法，不过没得到实际验证，大概是这样的：可以参考移动端的ListView控件，当进入浏览器也面的时候(当滚动条往下拖动的时候)，发送一次请求，加载一定的数据量；而当页面上端的数据移除显示窗口的时候，被回收如一个资源回收池，当想重新加载已经显示过的数据的时候就可以从资源回收池里重新读取，这样既不用一次或连续多次向服务器发送请求，又可以避免闲置的大量数据占据存储空间，以一种动态需求的优先方式来加载数据（概念上来说就是上下各有一个资源回收池）。不过小编觉得向服务器请求那部分始终需要优化，如果有朋友能有其他很好行之有效的方法欢迎交流。

以上只是一个小插曲吧，为了引出本文的正文内容，.到底我们在打开一个网页的过程中，短短1秒甚至更短的时间内发生了什么呢？

我们必须了解的是：一个HTTP请求的过程总结来说就是如下：

获得URL对应的IP地址---------------->浏览器服务器建立TCP/IP连接---------------->发送HTTP请求-------------------->服务器回送响应

来分析下以上四个步骤：(1)、为了获取正确的IP地址，要和无数个DNS服务器通信匹配，并且再得到了这个地址之后并没有直接的与服务器通信；

                                            (2)、有了钥匙，还坑爹的你来我往握三次手，从而建立TCP/IP连接；

                                            (3)、发送一堆的HTTP请求，网络带宽是有一定限度的，在当前的网页有很多后续的资源会随着主要的请求一并的发送给服务器，这时候如果请求量很大怎么办？这时候如果网络很拥堵怎么办？比如网络高峰时间段等；

                                            (4)、终于等到服务器响应了，服务器回送的资源同样会受到带宽的影响，也会受到距离的影响，并且，你发送给服务器的请求并不是优先第一个被处理的，您需要排队的，这时候怎么办？

所以，短短的网页打开其实经历了IP检索、建立连接、发送请求、接收响应这一系列的内部细节处理，我们所要了解的就是如果针对这4个步骤进行良好的优化设置。

一、DNS优化

其实网络方面的优化主要是缓存、预取、压缩和并行。

在DNS优化方面，主要由缓存来实现，缓存主要由4个层级：浏览器DNS缓存、系统DNS缓存、Host文件(还记得之前说的修改window下的文件把本机的地址改为百度的么)以及各个DNS服务器上的缓存。用浏览器来打比方：敲一个网址还没敲完，浏览器就显示出了一个网址www.baidu.com，实际上浏览器在后台通过缓存找到了对应的ip地址及主机名，所以就直接显示出来了，如果进行了浏览器的清理，会清理缓存数据，这时候就木有网址提示了。这个一般用户可以在浏览器的缓存文件里查看。

二、TCP优化

这个也是跟缓存十分紧密，浏览器预先了解您想要访问的IP地址，此时就已经建立了一些浏览器和服务器的TCP连接了。

三、HTTP请求

HTTP所请求的内容也可以通过缓存来实现，当然，这里的缓存当然不是一下子把整个页面的所有资源全部都预取好，那样的话，打个比方，输入新浪网址，浏览器通过缓存技术直接找到了IP地址并建立了链接，如果这时候还是通过缓存加载页面，意味着我们的网络流量带宽一下子被缓存需求的资源给占满了，大大降低了用户体验，所以HTTP里的缓存主要是以下内容：

PageCache：直接在内存中缓存了网页的DOM结构和渲染结果，这是为什么点击后退的时候网页显示的那么快；

代理Cache：通过资源存储在代理服务器里，一部分数据直接从代理服务器里获得；

CDN： 一个地理上离你很近的内容服务器，比如说你在北京请求杭州淘宝的一个图片，结果在北京的一个CDN上有这个图片，那么就不用去杭州了。

DMOC:如果说CDN主要获取的是静态数据，那么DMOC就是为了获得网页上的动态数据而存在的，主要缓存动态数据，减少与数据库的直接交互，降低访问次数，提高数据获取的效率。

四、服务器响应

压缩和并行主要是位服务器响应时回送数据资源而服务的，从而降低带宽占用，提高响应效率。

其实现在网络资源优化策略很多，比如在TCP连接方面，可以将一个HTTP并行多个TCP，大大减少TCP的响应连接时间；在物理方面可以采用效率更高的查询匹配算法；在资源传输方面如看视频，在网络繁忙的时候不一定要一下子把视频加载完，可以看一段再自动加载一段等等。