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

步骤概要介绍如下:

  • 1、输入网址
  • 2、DNS解析获取域名对应的IP地址
  • 3、建立TCP连接
  • 4、web浏览器向web服务器发送HTTP请求
  • 5、服务器的永久重定向响应
  • 6、浏览器跟踪重定向地址
  • 7、web服务器做出应答
  • 8、浏览器显示 HTML
  • 9、浏览器发送请求获取其他嵌入在 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.1
Accept:image/gif.image/jpeg,*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-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-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible:MSIE5.01:Windows NT5.0)
Accept-Encoding:gzip,deflate.

4.3、请求正文

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

username=jinqiao&password=1234

5、服务器的永久重定向响应

服务器给浏览器响应一个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 OK
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-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 Continue
101 Switching Protocols2xx:成功状态码,表示服务器已成功接收到请求并进行处理。
200 OK 表示客户端请求成功
204 No Content 成功,但不返回任何实体的主体部分
206 Partial Content 成功执行了一个范围(Range)请求3xx:重定向状态码,表示服务器要求客户端重定向。
301 Moved Permanently 永久性重定向,响应报文的Location首部应该有该资源的新URL
302 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 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-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文件等,类似于下面的链接:

图片: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中

10、web服务器关闭TCP连接

一般情况下,一旦web服务器向浏览器发送了请求数据后,它就要关闭TCP连接,然后如果浏览器或者服务器在其头信息加入这行代码:

connection:keep-alive

这样TCP连接将依然保持打开状态,浏览器可以继续通过相同的连接发送请求,保持连接,节省了为每个请求建立新连接所需要的的事件,同时节省了宽带

实际上,在HTTP 1.1 版本的新特性中有一点是:默认持久连接节省通信量,只要客户端、服务端任意一端没有明确断开TCP连接,可以发送多次HTTP请求。

从输入一个网址到浏览器显示页面经历的全过程(网络开篇)相关推荐

  1. 从输入一个网址到浏览器显示页面经历的过程,如是等等

    过程 浏览器已经是我们上网必不可少的工具,更不可避免的是浏览各大网站,即输入网址–>浏览器显示页面.具体过程如下: 1. DNS域名解析系统对输入的网址进行解 DNS域名解析系统本质就是一个数据 ...

  2. 在浏览器地址栏输入地址,到浏览器显示页面的过程

    作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等. 本文将更深入的研究当你输入一个网址 ...

  3. 从点击一个链接到浏览器显示页面,这个过程中发生了什么?

    这个过程可以分为六步 浏览器通过域名找出其IP地址(DNS解析) 浏览器和服务器建立连接(TCP/TP三次握手) 浏览器向服务器发送HTTP请求 服务器接受到请求并返回HTTP响应 浏览器解析渲染页面 ...

  4. c++软件开发面试旋极面试题_经典软件开发面试题:浏览器中输入一个网址后发生了什么?...

    经典软件开发面试题:浏览器中输入一个网址后发生了什么? ​ 大家好, 这一期呢,我们来谈一个经典的面试题.这种题目是在浏览器中输入一个网址以后, 会显示一个网页,这期间到底发生了什么? 答案要求说的越 ...

  5. 关于浏览器输入一个网址后页面经历的过程总结

    浏览器进程 浏览器输入一个网址后的主流程 一.用户输入 根据以下规则,把用户输入的内容加上协议,合成为完整的 URL. 判断输入的关键字是搜索内容,还是请求的 URL 如果是搜索内容:使用浏览器默认的 ...

  6. 在浏览器输入一个网址到得到页面的过程(详细)

    作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等. 本文将更深入的研究当你输入一个网址 ...

  7. 输入一个url到浏览器页面展示都经历了哪些过程

    在日常的浏览器访问过程中,我们肯定会访问n多页面,但是我们输入一个网址后是如何变成一个页面展示在我们面前,从一个url到页面的展示这个过程中,我们的浏览器都经历了一些什么? 步骤 → 1- 输入网址 ...

  8. 在浏览器输入一个网址,如http://www.taobao.com,按回车之后发生了什么?

    当在浏览器中输入一个网址后的处理过程如下: 1.浏览器根据域名查询域名对应的服务器的IP地址. 根据域名查询IP地址的顺序如下: 浏览器DNS >>> 操作系统DNS缓存 >& ...

  9. 从输入URL到浏览器显示页面到底经历了什么?

    文章目录 从输入URL到浏览器显示页面到底经历了什么? DNS解析 1.DNS解析过程 2.DNS优化 建立TCP连接 1.什么是TCP? 2.TCP的连接建立--三次握手 3.为什么是三次握手? 发 ...

最新文章

  1. 2019年山西计算机二级报名入口,2019年下半年山西省计算机二级考试教程:Web程序设计...
  2. 目标代码文件、可执行文件和库
  3. Scala模式匹配:对元组进行匹配
  4. PrintWriter中的write与println方法居然就是这些区别
  5. php 定时缓存,php定时清理缓存文件的简单示例
  6. html获取url参数值,js获取url中参数值的两种方法
  7. 数学建模(五)系泊系统设计(16年国赛A题)
  8. 一个普通专科生,拿什么拯救你的未来?(精简版)
  9. 金蝶k3单据编码规则_金蝶k3套打格式设置图文教程(凭证与供应链单据)
  10. 数学模型——初步理解马尔可夫链(Markov chain)
  11. AspNetPager 分页
  12. CTR和CVR联合训练
  13. gdata_YouTube GData API和Android
  14. SaaS产品移动化,你想好这3点了吗
  15. 计算机32位操作系统指什么,电脑操作系统的32位和64位有什么区别
  16. 实验指南:BGP路由汇聚(上)
  17. 机器人会偷走你的饭碗吗——写作篇
  18. 牛客 · 奇♂妙拆分
  19. 换服务器影响网站排名,网站更换服务器空间会影响排名吗
  20. FileOperatorWSInstaller.zip——上海一网通登录社保下载提示,却无法下载

热门文章

  1. 浅谈:高压水射流技术在船舶除锈中的应用
  2. hdu1709 the blance
  3. 如何刷新微信服务器小程序版本,微信小程序版本自动更新
  4. 快速、深入理解设计模式的what、why、how
  5. php7.4升级php8.0后重启系统网站访问异常问题
  6. 1 uboot学习前传
  7. gis投影中未定义的地理转换_“2000坐标”成了标配,你还不懂坐标系定义和转换吗?...
  8. 尚融宝30(终)-资金记录和个人中心展示
  9. Java开发手册七(设计规约)
  10. 多维时序 | MATLAB实现TPA-LSTM(时间注意力注意力机制长短期记忆神经网络)多输入单输出