浅谈一个网页打开的全过程（涉及DNS、CDN、Nginx负载均衡等）

一、概要

　　从用户在浏览器输入域名开始，到web页面加载完毕，这是一个说复杂不复杂，说简单不简单的过程，下文暂且把这个过程称做网页加载过程。下面我将依靠本身的经验，总结一下整个过程。若有错漏，欢迎指正。

　　阅读本文须要读者已有必定的计算机知识，了解TCP、DNS等。

二、分析

　　众所周知，打开一个网页的过程当中，浏览器会因页面上的css/js/image等静态资源会屡次发起链接请求，因此咱们暂且把这个网页加载过程分红两部分：

1. html(jsp/php/aspx) 页面加载(假设存在简单的Nginx负载均衡)
2. css/js/image等 网页静态资源加载(假设使用CDN)

     2.1 页面加载

　　先上一张图，直观明了地让你们了解下基本流程，而后咱们再逐一分析。

　　2.1.1 DNS解析

　　什么是DNS解析？当用户输入一个网址并按下回车键的时候，浏览器获得了一个域名。而在实际通讯过程当中，咱们须要的是一个IP地址。所以咱们须要先把域名转换成相应的IP地址，这个过程称做DNS解析。

      1) 浏览器首先搜索浏览器自身缓存的DNS记录。

　　或许不少人不知道，浏览器自身也带有一层DNS缓存。Chrome 缓存1000条DNS解析结果，缓存时间大概在一分钟左右。

　　（Chrome浏览器经过输入：chrome://net-internals/#dns 打开DNS缓存页面）

　　2) 若是浏览器缓存中没有找到须要的记录或记录已通过期，则搜索hosts文件和操做系统缓存。

　　在Windows操做系统中，能够经过 ipconfig /displaydns 命令查看本机当前的缓存。

　　经过hosts文件，你能够手动指定一个域名和其对应的IP解析结果，而且该结果一旦被使用，一样会被缓存到操做系统缓存中。

　　Windows系统的hosts文件在%systemroot%\system32\drivers\etc下，linux系统的hosts文件在/etc/hosts下。

　　3) 若是在hosts文件和操做系统缓存中没有找到须要的记录或记录已通过期，则向域名解析服务器发送解析请求。

　　其实第一台被访问的域名解析服务器就是咱们平时在设置中填写的DNS服务器一项，当操做系统缓存中也没有命中的时候，系统会向DNS服务器正式发出解析请求。这里是真正意义上开始解析一个未知的域名。

　　通常一台域名解析服务器会被地理位置临近的大量用户使用（特别是ISP的DNS），通常常见的网站域名解析都能在这里命中。

　　4) 若是域名解析服务器也没有该域名的记录，则开始递归+迭代解析。

　　这里咱们举个例子，若是咱们要解析的是mail.google.com。

　　首先咱们的域名解析服务器会向根域服务器（全球只有13台）发出请求。显然，仅凭13台服务器不可能把全球全部IP都记录下来。因此根域服务器记录的是com域服务器的IP、cn域服务器的IP、org域服务器的IP……。若是咱们要查找.com结尾的域名，那么咱们能够到com域服务器去进一步解析。因此其实这部分的域名解析过程是一个树形的搜索过程。

       

       根域服务器告诉咱们com域服务器的IP。

　　接着咱们的域名解析服务器会向com域服务器发出请求。根域服务器并无mail.google.com的IP，可是却有google.com域服务器的IP。

　　接着咱们的域名解析服务器会向google.com域服务器发出请求。...

　　如此重复，直到得到mail.google.com的IP地址。

 

　　为何是递归：问题由一开始的本机要解析mail.google.com变成域名解析服务器要解析mail.google.com，这是递归。

　　为何是迭代：问题由向根域服务器发出请求变成向com域服务器发出请求再变成向google.com域发出请求，这是迭代。

　　5) 获取域名对应的IP后，一步步向上返回，直到返回给浏览器。

　　2.1.2 发起TCP请求

　　浏览器会选择一个大于1024的本机端口向目标IP地址的80端口发起TCP链接请求。通过标准的TCP握手流程，创建TCP链接。

　　关于TCP协议的细节，这里就再也不阐述。这里只是简单地用一张图说明一下TCP的握手过程。若是不了解TCP，能够选择跳过此段，不影响本文其余部分的浏览。

        

 

　　2.1.3 发起HTTP请求

　　其本质是在创建起的TCP链接中，按照HTTP协议标准发送一个索要网页的请求。

　　2.1.4 负载均衡

　　什么是负载均衡？当一台服务器没法支持大量的用户访问时，将用户分摊到两个或多个服务器上的方法叫负载均衡。

　　什么是Nginx？Nginx是一款面向性能设计的HTTP服务器，相较于Apache、lighttpd具备占有内存少，稳定性高等优点。

　　负载均衡的方法不少，Nginx负载均衡、LVS-NAT、LVS-DR等。这里，咱们以简单的Nginx负载均衡为例。关于负载均衡的多种方法详情你们能够Google一下。

　　Nginx有4种类型的模块：core、handlers、filters、load-balancers。

　　咱们这里讨论其中的2种，分别是负责负载均衡的模块load-balancers和负责执行一系列过滤操做的filters模块。

　　1) 通常，若是咱们的平台配备了负载均衡的话，前一步DNS解析得到的IP地址应该是咱们Nginx负载均衡服务器的IP地址。因此，咱们的浏览器将咱们的网页请求发送到了Nginx负载均衡服务器上。

　　2) Nginx根据咱们设定的分配算法和规则，选择一台后端的真实Web服务器，与之创建TCP链接、并转发咱们浏览器发出去的网页请求。

　　　　Nginx默认支持 RR轮转法 和 ip_hash法 这2种分配算法。

　　　　前者会从头至尾一个个轮询全部Web服务器，然后者则对源IP使用hash函数肯定应该转发到哪一个Web服务器上，也能保证同一个IP的请求能发送到同一个Web服务器上实现会话粘连。

　　　　也有其余扩展分配算法，如：

　　　　fair：这种算法会选择相应时间最短的Web服务器

　　　　url_hash：这种算法会使得相同的url发送到同一个Web服务器

　　3) Web服务器收到请求，产生响应，并将网页发送给Nginx负载均衡服务器。

　　4) Nginx负载均衡服务器将网页传递给filters链处理，以后发回给咱们的浏览器。

 

　　而Filter的功能能够理解成先把前一步生成的结果处理一遍，再返回给浏览器。好比能够将前面没有压缩的网页用gzip压缩后再返回给浏览器。

　　2.1.5 浏览器渲染

　　1) 浏览器根据页面内容，生成DOM Tree。根据CSS内容，生成CSS Rule Tree(规则树)。调用JS执行引擎执行JS代码。

　　2) 根据DOM Tree和CSS Rule Tree生成Render Tree(呈现树)

　　3) 根据Render Tree渲染网页

　　　　可是在浏览器解析页面内容的时候，会发现页面引用了其余未加载的image、css文件、js文件等静态内容，所以开始了第二部分。

　　2.2 网页静态资源加载

　　以阿里巴巴的淘宝网首页的logo为例，其url地址为 img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png_145x145.jpg

　　咱们清楚地看到了url中有cdn字样。

　　什么是CDN？若是我在广州访问杭州的淘宝网，跨省的通讯必然形成延迟。若是淘宝网能在广东创建一个服务器，静态资源我能够直接从就近的广东服务器获取，必然能提升整个网站的打开速度，这就是CDN。CDN叫内容分发网络，是依靠部署在各地的边缘服务器，使用户就近获取所需内容，下降网络拥塞，提升用户访问响应速度。

　　接下来的流程就是浏览器根据url加载该url下的图片内容。本质上是浏览器从新开始第一部分的流程，因此这里再也不重复阐述。区别只是负责均衡服务器后端的服务器再也不是应用服务器，而是提供静态资源的服务器。