如何让静态的html在浏览器搜索到啊从输入一个网址到阅读器显示页面阅历的全进程

Java高等开拓进阶专栏

TCP连接的三次握手和四次挥手

一文搞懂DNS域名解析的详细流程

如何让静态的html在浏览器搜索到啊从输入一个网址到阅读器显示页面阅历的全进程 JavaScript

高并发与负载均衡：Nginx的反向代理和负载均衡

一文搞懂TCP/IP协议及Web根本知识

一文搞懂HTTP协议的核心知识点

一文节制 HTTP协议报文包含的信息类型

一文搞懂HTTP协议返回结果的HTTP状态码

一文搞懂 HTTP协议的报文首部

作为网络专栏的开篇导文，本文概况先容下经典案例：从输入一个网址到浏览器显示页面的全过程。

步骤概要先容如下：

1、输入网址2、DNS解析获取域名对应的IP地址3、建立TCP连接4、web浏览器向web做事器发送HTTP要求5、做事器的永久重定向相应6、浏览器跟踪重定向地址7、web做事器做出应答8、浏览器显示 HTML9、浏览器发送要求获取其他嵌入在 HTML 中的资源10、web做事器关闭TCP连接1、输入网址

当在浏览器中输入网址时，浏览器实在就已在智能匹配 url 了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址。

对付 google的chrome 的浏览器，他乃至会直接从缓存中把网页展示出来，便是说，你还没有按下 enter，页面就出来了。

2、DNS解析获取域名对应的IP地址

要求一旦发起，浏览器首先要做的事情便是解析这个域名。

1、一样平常来说，浏览器会首先查看本地硬盘的 hosts 文件，看看个中有没有和这个域名对应的规则，如果有的话就直策应用 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来完成的。

PS1：为什么要先建立TCP呢？

由于HTTP是比TCP更高层次的运用层协议，根据规则，只有低层协议建立之后才能进行更高层次协议的连接，因此要先建立TCP连接，一样平常TCP连接的端口号是80

PS2：扩展知识点：

TCP连接的三次握手和断开的四次挥手参照站内文章：TCP 三次握手和四次挥手

4、web浏览器向web做事器发送HTTP要求

建立了TCP连接之后，web浏览器就会向web做事器发起一个http要求。

一个范例的 http request header 一样平常须要包括要求的方法，例如 GET 或者 POST 等，不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法，一样平常的浏览器只能发起 GET 或者 POST 要求。

客户端向做事器发起http要求的时候，会有一些要求信息，要求信息包含三个部分：

要求方法URI协议/版本要求头(Request Header)要求正文：

下面是一个完全的HTTP要求例子：

GET/sample.jspHTTP/1.1Accept:image/gif.image/jpeg,/Accept-Language:zh-cnConnection:Keep-AliveHost:localhostUser-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)Accept-Encoding:gzip,deflateusername=jinqiao&password=1234

4.1、要求行

要求的第一行是“方法URL议/版本”：GET/sample.jsp HTTP/1.1

4.2、要求头(Request Header)

要求头包含许多有关的客户端环境和要求正文的有用信息。
例如，要求头可以声明浏览器所用的措辞，要求正文的长度等。

Accept:image/gif.image/jpeg./Accept-Language:zh-cnConnection:Keep-AliveHost:localhostUser-Agent:Mozila/4.0(compatible:MSIE5.01:Windows NT5.0)Accept-Encoding:gzip,deflate.

4.3、要求正文

要求头和要求正文之间是一个空行，这个行非常主要，它表示要求头已经结束，接下来的是要求正文。
要求正文中可以包含客户提交的查询字符串信息：

username=jinqiao&password=12345、做事器的永久重定向相应

做事器给浏览器相应一个301永久重定向相应，这样浏览器就会访问“http://www.google.com/” 而非“http://google.com/”。

为什么做事器一定要重定向而不是直接发送用户想看的网页内容呢？个中一个缘故原由跟搜索引擎排名有关。
如果一个页面有两个地址，就像http://www.yy.com/和http://yy.com/，搜索引擎会认为它们是两个网站，结果造成每个搜索链接都减少从而降落排名。
而搜索引擎知道301永久重定向是什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。
还有便是用不同的地址会造成缓存友好性变差，当一个页面有好几个名字时，它可能会在缓存里涌现好几次。

重定向缘故原由：

1、网站调度（如改变网页目录构造）；2、网页被移到一个新地址；3、网页扩展名改变(如运用须要把.php改成.Html或.shtml)。

这种情形下，如果不做重定向，则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面缺点信息，访问流量白白损失；再者某些注册了多个域名的网站，也须要通过重定向让访问这些域名的用户自动跳转到主站点等。

6、浏览器跟踪重定向地址

现在浏览器知道了 "http://www.google.com/"才是要访问的精确地址，以是它会发送另一个http要求。
这里没有啥好说的

7、web做事器做出应答

经由前面的步骤，做事器收到了我们的要求，也处理我们的要求，到这一步，它会把它的处理结果返回，也便是返回一个HTPP相应。

HTTP相应与HTTP要求相似，HTTP相应也由3个部分构成，分别是：

状态行相应头(Response Header)相应正文

HTTP/1.1 200 OKDate: Sat, 31 Dec 2005 23:59:59 GMTContent-Type: text/html;charset=ISO-8859-1Content-Length: 122＜html＞＜head＞＜title＞http＜/title＞＜/head＞＜body＞＜!-- body goes here --＞＜/body＞＜/html＞

7.1、状态行：

状态行由协议版本、数字形式的状态代码、及相应的状态描述，各元素之间以空格分隔。

格式: HTTP-Version Status-Code Reason-Phrase CRLF

例如: HTTP/1.1 200 OK \r\n

-- 协议版本：是用http1.0还是其他版本

-- 状态描述：状态描述给出了关于状态代码的简短的笔墨描述。
比如状态代码为200时的描述为 ok

-- 状态代码：状态代码由三位数字组成，第一个数字定义了相应的种别，且有五种可能取值。

状态代码详细协议定义如下：

1xx：信息性状态码，表示做事器已吸收了客户端要求，客户端可连续发送要求。 100 Continue101 Switching Protocols2xx：成功状态码，表示做事器已成功吸收到要求并进行处理。 200 OK 表示客户端要求成功204 No Content 成功，但不返回任何实体的主体部分206 Partial Content 成功实行了一个范围（Range）要求3xx：重定向状态码，表示做事器哀求客户端重定向。 301 Moved Permanently 永久性重定向，相应报文的Location首部该当有该资源的新URL302 Found 临时性重定向，相应报文的Location首部给出的URL用来临时定位资源303 See Other 要求的资源存在着另一个URI，客户端应利用GET方法定向获取要求的资源304 Not Modified 做事器内容没有更新，可以直接读取浏览器缓存307 Temporary Redirect 临时重定向。与302 Found含义一样。 302禁止POST变换为GET，但实际利用时并不一定，307则更多浏览器可能会遵照这一标准，但也依赖于浏览用具体实现4xx：客户端缺点状态码，表示客户真个要求有造孽内容。 400 Bad Request 表示客户端要求有语法缺点，不能被做事器所理解401 Unauthonzed 表示要求未经授权，该状态代码必须与 WWW-Authenticate 报头域一起利用403 Forbidden 表示做事器收到要求，但是谢绝供应做事，常日会在相应正文中给出不供应做事的缘故原由404 Not Found 要求的资源不存在，例如，输入了缺点的URL5xx：做事器缺点状态码，表示做事器未能正常处理客户真个要求而涌现意外缺点。 500 Internel Server Error 表示做事器发生不可预期的缺点，导致无法完成客户真个要求503 Service Unavailable 表示做事器当前不能够处理客户真个要求，在一段韶光之后，做事器可能会规复正常

7.2、相应头：

相应头部：由关键字/值对组成，每行一对，关键字和值用英文冒号":"分隔。

Date: Sat, 31 Dec 2005 23:59:59 GMTContent-Type: text/html;charset=ISO-8859-1Content-Length: 122

范例的相应头字段：

7.3、相应正文

包含着我们须要的一些详细信息，比如cookie，html,image，后端返回的要求数据等等。
这里须要把稳，相应正文和相应头之间有一行空格，表示相应头的信息到空格为止。

8、浏览器显示 HTML

在浏览器没有完全接管全部HTML文档时，它就已经开始显示这个页面了，浏览器是如何把页面呈现在屏幕上的呢？

不同浏览器可能解析的过程不太一样，这里我们只先容webkit的渲染过程。
下图对应的便是WebKit渲染的过程，这个过程包括：

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树：

9、浏览器发送要求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

实在这个步骤可以并列在步骤8中，在浏览器显示HTML时，它会把稳到须要获取其他地址内容的标签。
这时，浏览器会发送一个获取要求来重新得到这些文件。
比如我要获取外图片，CSS，JS文件等，类似于下面的链接：