输入网址到网页显示的整个流程

最近在看一些大厂的笔经面经时，经常看到这个问题，索性在今天也把自己学习的知识整理一下。

第一步：首先你得在浏览器中输入网址，比如输入www.baidu.com。其中www为主机，baidu为域名，com为类型。但是有网址不能直接找到对应的响应主机，必须把网址，即域名转化为ip地址。

第二步：进行DNS（Domain Name System，域名系统）查询，它的作用是将域名转化为具体的ip地址。

先谈一下DNS的结构：

（1）根域名服务器，全球只有13个不同ip地址的服务器，注意不是服务器只有13台，只是他们所代表的地址只有13个，也就是存在镜像服务器，一个地址可以对应多个镜像服务器。

（2）根域名服务器之下的顶级域名服务器，如com、net、cn、gov等。

（3）顶级域名服务器之下的权威服务器，比如baidu、facebook等。

（4）权威服务器之下的资源记录，比如www、ftp、mail等。

查询的过程如下：

（1）首先会在浏览器缓存中去查询，之前每浏览一个网站，浏览器都会在缓存中存有域名与ip地址的映射关系。不过缓存失效的时间不由浏览器决定，而由操作系统决定。

（2）浏览器缓存中查询不到后，之后会在系统缓存中查询，由浏览器发起一个系统调用，查询系统缓存中的数据。

（3）系统缓存中也查询不到后，将会去路由器缓存中查找。

（4）路由器缓存中也找不到的话，将会从本地DNS服务器的缓存中查找，本地服务器即用户自己配置的DNS服务器。

（5）如果本地的DNS服务器也找不到的话，本地DNS将会发送请求至根域名服务器，根域名服务器中没有相关缓存数据的时候，就会返回com顶级域名服务器的地址。然后本地DNS服务器再发送请求至com顶级域名服务器，com顶级域名服务器中查询不到的话，就会返回baidu权威服务器的地址，然后本地DNS服务器再发送请求至baidu权威服务器，baidu权威服务器就会返回www主机地址。（这是一种迭代的过程，还有一种递归的过程。即local至根域名，根域名不直接返回com地址，而是发送请求至com，com发送请求至baidu，baidu发送请求至www，www再返回给baidu，baidu返回给com，com再返回给local）至此，整个DNS查询步骤结束，现在浏览器拿到了域名对应的ip地址。

第三步：浏览器发送请求至服务器，假设我们现在输入的地址是www.baidu.com，那么浏览器默认将网址改成这样的形式，即http://www.baidu.com。

发送格式如下：

发现返回了307状态码，也就是临时重定向，需要我们重定向到location表明的地址，即https://www.baidu.com。仔细观察，仅仅多了个s，也就是说http与https之间是有差别的，关于两个的区别，请移步我的另外一篇文章浅析HTTP与HTTPS的区别

307与301、302本质上差不多，但是有细微的差别，简单来说是为了增强301与302的规范性。其他差别这里不做深究，可以参考HTTP状态码302、303和307的故事

第四步：浏览器向重定向后的地址发送请求

发送的请求格式如下：

可以看得出：

（1）Request Method表明请求方式是get。

（2）User-Agent，用户代理，表明所用浏览器的一些信息，包括内核，版本等。

（3）Connection:keep-alive表明需要服务器为之后的请求保持tcp连接

（4）Cookie中保存了一些与用户状态相关的数值，可以与session连用来跟踪会话，那么有关cookie与session的内容，可以参考我的另外一篇文章【计算机网络】Cookie与Session的区别

第五步：服务器处理http请求

服务器可以根据Cookie中的数据，通过遍历内存中的Session集合，从而判断用户的登录状态。如果用户未登录，则展示一些诸如首页的基本宣传数据。如果用户已经登录，通过解析get请求头、post请求体中的参数，查询数据库，返回用户相关数据，填充到视图中。并将此次处理完的内容通过相应的压缩算法，压缩成某个块。

第六步：服务器返回http响应

服务器返回的响应格式如下：

其中有些键值対表明：

（1）Content-Encoding的值是gzip，表明响应体使用了gzip方式压缩了，浏览器也需要使用gzip算法进行解压缩，解压缩响应体后，产生如下的内容

（2）Content-Type的值是text/html，表明服务器需要浏览器将次内容以html文本的形式显示出来，而不是以文件形式去下载它

第七步：浏览器请求样式以及图片文件，用以渲染界面并显示给用户

浏览器解压缩响应体后，在界面显示的同时，下载css、png、gif等一些静态文件，这些静态文件可以被浏览器缓存，防止多次请求。很多公司将自己的静态文件托管在CDN上（Content Delivery Network，即内容分发网络），从CDN上加载大量静态文件，加快查找速度，减少原本网站的并发压力。

访问百度的静态文件有：（出去前两个与最长的那个）

第八步：浏览器通过Ajax（Asynchronous Javascript And XML 异步 JavaScript 和 XML）

在传统的web应用，用户每发一次请求，用户的动作就会被阻塞，即在服务器返回响应之前，用户不可以进行其他的操作，只能等待响应。然后服务器会响应一个完整的html页面，浏览器再次进行渲染。哪怕是一个很小的一个请求，都会阻塞用户动作，以及刷新整个页面，极大地浪费了用户的时间和网络的带宽，也增***务器的压力。

Ajax出现之后，通过此技术发起的http请求，将不会阻塞用户的动作，服务器响应之后，页面会进行一个局部的刷新，也就是不会刷新整个页面，极大提高了页面加载与服务器处理的效率。当然Ajax也要自身的缺点，暴露了浏览器和服务器通信的具体逻辑，容易造成漏洞攻击。此外，Ajax没有后退机制，在一定程度上，用户的体验感降低。

百度界面显示出来后，百度又利用了ajax去请求我之前的搜索关键词，然后利用js填充到搜索框的下拉列表中，返回的数据如下：

总结：以上就是关于输入一个网址到界面显示的整个流程的具体介绍了，希望能帮助到更多的同学们，也希望你们能指出其中存在的错误，一同进步。