述从输入网址到浏览器显示的过程

• 1.输入网址URL
• 2.DNS域名解析
• 3.建立TCP连接
• 4.浏览器向服务器发送HTTP请求
• 5.服务器处理HTTP请求
• 6.页面渲染
• 7.断开TCP连接

1.输入网址URL

在web浏览器窗口地址栏输入想要访问的网址URL。

2.DNS域名解析

以www.baidu.com为例，这是一个主机名也叫域名，而在整个互联网中，路由器是以IP地址作为识别每个计算机的唯一标识，因此我们想要在互联网中传输数据，就必须知道对方的IP地址。而DNS域名解析则帮助我们将主机名转换成对应的IP地址。

1. 一般来说，浏览器会首先查看自身缓存有没有域名对应的IP地址，若有则DNS解析结束，直接返回该IP地址，若没有，则查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的IP地址，如果有的话就直接使用 hosts 文件里面的 IP地址。
2. 如果在本地的 hosts 文件没有能够找到对应的 IP地址，浏览器会发出一个 DNS请求到本地DNS服务器 。本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动。
3. 查询你输入的网址的DNS请求到达本地DNS服务器之后，本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。如果没有，本地DNS服务器还要向DNS根服务器进行查询。
4. 根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址。这种过程是迭代的过程。
5. 本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址。
6. 最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问，此过程是递归的过程。

3.建立TCP连接

在HTTP工作开始之前，web浏览器首先要通过网络与web服务器建立连接，该连接是通过TCP来完成的。在TCP/IP协议模型中，HTTP属于应用层协议，TCP属于传输层协议，应用层协议HTTP工作之前首先要在传输层建立TCP连接，HTTP建立TCP连接通常使用端口号80。

4.浏览器向服务器发送HTTP请求

浏览器向 Web 服务器发起一个 HTTP 请求，HTTP 协议是建立在 TCP 协议之上的应用层协议，其本质是在建立起的TCP连接中，按照HTTP协议标准发送一个索要网页的请求。在这一过程中，会涉及到负载均衡等操作。

拓展：什么是负载均衡？

负载均衡，英文名为 Load Balance，其含义是指将负载（工作任务）进行平衡、分摊到多个操作单元上进行运行，例如 FTP 服务器、Web 服务器、企业核心服务器和其他主要任务服务器等，从而协同完成工作任务。负载均衡建立在现有的网络之上，它提供了一种透明且廉价有效的方法扩展服务器和网络设备的带宽、增加吞吐量、加强网络处理能力并提高网络的灵活性和可用性。

负载均衡是分布式系统架构设计中必须考虑的因素之一，例如天猫、京东等大型用户网站中为了处理海量用户发起的请求，其往往采用分布式服务器，并通过引入反向代理等方式将用户请求均匀分发到每个服务器上，而这一过程所实现的就是负载均衡。

5.服务器处理HTTP请求

服务器获取到客户端的 HTTP 请求后，会根据 HTTP 请求中的内容来决定如何获取相应的文件，并将文件发送给浏览器，返回HTTP响应。

6.页面渲染

浏览器在接受到服务器的HTTP响应时，开始显示页面，首先解析HTML文件构建 DOM 树，然后解析 CSS 文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。
在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。比如我要获取外图片，CSS，JS文件等，类似于下面的链接：

图片：http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
CSS式样表：http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
JavaScript 文件：http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js

这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等。不像动态页面，静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯，而从缓存中直接读取，或者可以放到CDN中。

7.断开TCP连接

客户端和服务器通过四次挥手终止 TCP 连接。

<input type="number" placeholder="请输入充值的RMB金额" name="pay_number" id="pay_number" onkeyup="javascript：senddata(this);"/> 元 <span id="outdiv"></span>
//下方为js代码，上方为HTML构造
<script type="text/javascript">function senddata(inputobj) {	
var obj;	
obj = document.getElementById("outdiv");	
obj.innerHTML = '您将充值<strong><em><span style="color:#E53333;font-size:16px;">' + inputobj.value * 10 + '</span></em></strong>金币';
}</script>