必威-必威-欢迎您

必威,必威官网企业自成立以来,以策略先行,经营致胜,管理为本的商,业推广理念,一步一个脚印发展成为同类企业中经营范围最广,在行业内颇具影响力的企业。

今天我就来告诉你会发生什么事情,必威:虽然

2019-09-15 03:09 来源:未知

当你打开网页的时候,世界都发生了什么(1)

2015/09/10 · HTML5, JavaScript · 网页

原文出处: 吴迪   

你有没有好奇过,当你试图打开一个网页的时候,这个世界上都发生了一些什么事情?会不会因为你手气键落,产生了蝴蝶效应,指尖的风拂起千年后你梦中的那个女孩的刘海?咳,也不是没有可能。今天我就来告诉你会发生什么事情,你可以沏一壶茶,坐在躺椅上,慢慢品味……

时光倒流到你刚才打开这个页面的那一瞬间…

Hi!大家好,我的名字叫做浏览器,我还有个很酷的英文名字叫做Browser!很高兴认识你!

必威 1

什么,你想上百度?没问题!请你告诉我一下,百度的地址是什么?或者说,百度的URL是什么?

对了,给你介绍一下URL,全称Unified Resource Locator,中文名为统一资源定位符,也就是我们俗称的网址。它就像互联网上的门牌一样,而浏览器就好像的士司机。你只要告诉浏览器你想要看的网页的URL,他就会把你载到那里啦!

必威 2

嗯,百度的地址是http://baidu.com是吧,好嘞!我现在就开始帮你去把这个网页给请过来。

首先,我先要找到这个网页的家在哪里。网页的家有一个名字叫做服务器,它的英文名叫做Server。服务器本身其实也是一台电脑,跟你家中的电脑其实是非常相似的。只不过相比起来,服务器性能会比普通的电脑的性能来得强劲,因为它需要服务成千上万个人!

必威 3

那么这么多的服务器,我怎么找到百度所在的那个服务器呢?就靠你刚才告诉我的URL了!URL只是服务器地址的一个比较好听的名字而已,我没有办法直接通过这个地址找到服务器。其实啊,在服务器的世界里面,他们还有一种更精确的地址表达方式,叫做IP地址。

插一嘴:IP地址是什么,它是怎么工作的,恐怕可以写好几本书了。简单地说,IP地址就是形同192.168.0.1这种形式的数字和英文句号的组合。你可以把它当做相对URL来讲更加准确的地址。

我找到IP地址的方式其实很简单,我只要请操作系统(OS, Operating System)帮忙就好了。所谓的操作系统,就是类似Windows、Mac OS一样的软件,你能够在它们上面安装各种各样的软件。其中Mac OS是苹果电脑专用的操作系统。

必威 4

这个从URL到IP地址的过程叫做DNS查找,即DNS Lookup。天啊,又一个新名词!没关系,你不需要记住这个名词。你所需要知道的是,这里看似操作系统独自很快地完成了这个过程,但是其实它为此所做的事情相当复杂。我们今后将有专门的文章用来介绍这一过程。

    你有没有好奇过,当你在浏览器打开一个网页的时候,从敲下回车的那一刻到看到网页展现,中间短短的几秒甚至几百毫秒里,到底发生了什么?浏览器怎么就展现出了这么个网页?来来来,让我们一步步分析~

我们先来看一下浏览网页的基本过程,比如我们在浏览器地址栏输入:http://www.baidu.com,回车后会浏览器会显示百度的首页。

 

建立连接和发送请求

已经顺利拿到了服务器的IP地址,接下来我就要向他要东西啦!首先我希望它把baidu.com对应的网页传送给我。我们之间传输信息的方式比较特殊,不需要我坐地铁去找它然后搬回来,而是我会跟服务器建立一个连接

连接,英文名叫做Connection。实际上,它就像开辟了一个专用的通道,供我们互相之间传递信息。

必威 5

接下来,我就会通过这个专用通道,向服务器发起一个请求(Request)。在这个请求里面,我会像服务器阐明我想要的资源是什么,例如在这里,我想要的资源就是百度的首页。

那么具体这个资源的位置我是怎么告诉服务器的呢?还得回到刚才的URL来说!

必威 6

一个URL一般由六个部分组成,这里我们只介绍主机名(服务器名)和资源位置(或者说是资源路径)。一个服务器上可以有很多的资源,对应着不同的页面或者文件,例如http://xxx.com/login可以是某网站的登录页面,http://xxx.com/register则可以是某网站的注册页面。这里的/login/register就代表了两个不同的资源(这里是页面)。/是比较特殊的资源路径,叫做“根路径”,通常就是网站的首页了。其实,这里的原理就和我们电脑上的文件夹是一模一样的。

在知道了需要的资源的位置之后,我就会给服务器发送一个请求。这个请求实际上就是一系列的英文字符,就像一篇文章一样。

GET / HTTP/1.1 User-Agent: curl/7.37.1 Host: baidu.com Accept: */*

1
2
3
4
GET / HTTP/1.1
User-Agent: curl/7.37.1
Host: baidu.com
Accept: */*

怎么样,我也是很有文采的吧!在这里,你需要知道的是,GET /即代表,我现在要从服务器上拿下来一个资源,这个资源的位置是/。另外,Host: baidu.com代表我要请求的主机名叫做baidu.com。Host这个英文单词就是有主机的意思!

好了,请求已经准备完毕了,我现在就通过之前建立的连接将这个请求直接送给服务器!

    打开网页的第一步肯定是输入网址了,那么对于浏览器来说,这是它唯一的线索,也就是URL。URL全称Unified Resource Locator,翻译过来就是统一资源定位符,俗称网址。打个比方,如果说网址是饭店店名,那浏览器就像外卖团队,你告诉浏览器你想吃的是哪家,它就派人去店里拿了外卖再送到你面前。

简单来说这段过程发生了一下四个步骤:

TCP/IP

      TCP/IP(Transport Control Protocol/Internet Protocol,传输控制协议/Internet协议)的历史应当追溯到Internet的前身—ARPAnet时代。为了实现不同网络之间的互连,美国国防部于1977年到1979年间制定了TCP/IP体系结构和协议。TCP/IP是由一组具有专业用途的多个子协议组合而成的,这些子协议包括TCP、IP、UDP、ARP、ICMP等。TCP/IP凭借其实现成本低、在多平台间通信安全可靠以及可路由性等优势迅速发展,并成为Internet中的标准协议。在上世纪90年代,TCP/IP已经成为局域网中的首选协议,在最新的操作系统(如Windows7、Windows XP、Windows Server2003等)中已经将TCP/IP作为其默认安装的通信协议。

 

  TCP是英文Transmission Control Protocol的缩写,中文翻译为“传输控制通讯协议”。

     TCP/IP是网络中使用的基本的通信协议。虽然从名字上看TCP/IP包括两个协议,传输控制协议(TCP)和网际协议(IP),但TCP/IP实际上是一组协议,它包括上百个各种功能的协议,如:远程登录、文件传输和电子邮件等,而TCP协议和IP协议是保证数据完整传输的两个基本的重要协议。通常说TCP/IP是Internet协议族,而不单单是TCP和IP。

  TCP/IP是用于计算机通信的一组协议,我们通常称它为TCP/IP协议族。它是70年代中期美国国防部为其ARPANET广域网开发的网络体系结构和协议标准,以它为基础组建的INTERNET是目前国际上规模最大的计算机网络,正因为INTERNET的广泛使用,使得TCP/IP成了事实上的标准。

之所以说TCP/IP是一个协议族,是因为TCP/IP协议包括TCP、IP、UDP、ICMP、RIP、TELNETFTP、SMTP、ARP、TFTP等许多协议,这些协议一起称为TCP/IP协议。

  IP,则是Internet Protocol的缩写,中文翻译成“国际互联网通讯协议”。

它们组合成互联网的语言,因为Internet是由全世界很多大大小小的网络连接而成,所以大家必须遵守它的语言(也就是:TCP/IP的通讯协议)才能顺利跟别人沟通。

必威 7cpu卡中t=0通讯协议的分析

不过如果你来到别的网络,就等于是来到一个陌生的国家,使用的通讯协议,也就换作另一套了!由此可知TCP/IP只是网络上众多通讯协议的其中一种而已。

在Internet上每一台机器都要有一个IP

每一台连接到Internet上的电脑,为了要让资料能够正确且顺利地传输,它会为每一台机器定义一个IP(IP地址),也就等于是给你的电脑装上门牌号码;因为资料在电脑之间传输,就和车子在都市中跑来跑去有点像,如果有了IP(门牌号码),网络的设备马上便能得知,这一份资料是要送到哪一台电脑去。

 

TCP   HTTP   UDP三者的关系:

TCP/IP是个协议组,可分为四个层次:网络接口层、网络层、传输层和应用层。

在网络层有IP协议、ICMP协议、ARP协议、RARP协议和BOOTP协议。

在传输层中有TCP协议与UDP协议。

在应用层有FTP、HTTP、TELNET、SMTP、DNS等协议。

因此,HTTP本身就是一个协议,是从Web服务器传输超文本到本地浏览器的传送协议。

 

socket: 
  这是为了实现以上的通信过程而建立成的通信管道,其真实的代表是客户端和服务器端的一个通信进程,双方进程通过socket进行通信,而通信的规则采用指定的协议。socket只是一种连接模式,不是协议,tcp、udp,简单的说(虽然不准确)是两个最基本的协议,很多其它协议都是基于这两个协议如,http就是基于tcp的,.用socket可以创建tcp连接,也可以创建udp连接,这意味着,用socket可以创建任何协议的连接,因为其它协议都是基于此的。

下面我们主要来看一下和我们互联网生活密切相关的协议:HTTP

什么是Http协议

HTTP全称是HyperText Transfer Protocal,即:超文本传输协议,从1990年开始就在WWW上广泛应用,是现今在WWW上应用最多的协议,    Http是应用层协议,当你上网浏览网页的时候,浏览器和Web服务器之间就会通过HTTP在Internet上进行数据的发送和接收。Http是一个基于请求/响应模式的、无状态的协议。即我们通常所说的Request/Response。

URL:

URL(Uniform Resource Locator) 地址用于描述一个网络上的资源,  基本格式如下

schema://host[:port#]/path/…/[?query-string][#anchor]

scheme               指定低层使用的协议(例如:http, https, ftp)

host                   HTTP服务器的IP地址或者域名

port#                 HTTP服务器的默认端口是80,这种情况下端口号可以省略。如果使用了别的端口,必须指明,例如

path                   访问资源的路径

query-string       发送给http服务器的数据

anchor-             锚

URL 的一个例子

Schema:                 http
host:                   www.mywebsite.com
path:                   /sj/test/test.aspx
Query String:           name=sviergn&x=true
Anchor:                 stuff

HTTP的Request/Response:

先看Request 消息的结构,   Request 消息分为3部分

第一部分叫Request line,

 第二部分叫Request header,

第三部分是body. header和body之间有个空行,

 结构如下图

第一行中的Method表示请求方法,比如”POST”,”GET”,  Path-to-resoure表示请求的资源, Http/version-number 表示HTTP协议的版本号

当使用的是”GET” 方法的时候, body是为空的

比如我们打开博客园首页的request 如下

GET HTTP/1.1
Host: www.cnblogs.com

抽象的东西,难以理解,老感觉是虚的, 所谓眼见为实, 实际见到的东西,我们才能理解和记忆。 我们今天用Fiddler,实际的看看Request和Response.

Accept

作用: 浏览器端可以接受的媒体类型,

例如:  Accept: text/html  代表浏览器可以接受服务器回发的类型为 text/html  也就是我们常说的html文档,

如果服务器无法返回text/html类型的数据,服务器应该返回一个406错误(non acceptable)

通配符 * 代表任意类型

例如  Accept: */*  代表浏览器可以处理所有类型,(一般浏览器发给服务器都是发这个)

Referer:

作用: 提供了Request的上下文信息的服务器,告诉服务器我是从哪个链接过来的,比如从我主页上链接到一个朋友那里,他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上的链接访问他的网站。

例如: Referer:

Accept-Language

作用: 浏览器申明自己接收的语言。

语言跟字符集的区别:中文是语言,中文有多种字符集,比如big5,gb2312,gbk等等;

例如: Accept-Language: en-us

Content-Type

作用:

例如:Content-Type: application/x-www-form-urlencoded

Accept-Encoding:

作用: 浏览器申明自己接收的编码方法,通常指定压缩方法,是否支持压缩,支持什么压缩方法(gzip,deflate),(注意:这不是只字符编码);

例如: Accept-Encoding: gzip, deflate

User-Agent

作用:告诉HTTP服务器, 客户端使用的操作系统和浏览器的名称和版本.

我们上网登陆论坛的时候,往往会看到一些欢迎信息,其中列出了你的操作系统的名称和版本,你所使用的浏览器的名称和版本,这往往让很多人感到很神奇,实际上,服务器应用程序就是从User-Agent这个请求报头域中获取到这些信息User-Agent请求报头域允许客户端将它的操作系统、浏览器和其它属性告诉服务器。

例如: User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)

Connection

例如: Connection: keep-alive   当一个网页打开完成后,客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭,如果客户端再次访问这个服务器上的网页,会继续使用这一条已经建立的连接

例如:  Connection: close  代表一个Request完成后,客户端和服务器之间用于传输HTTP数据的TCP连接会关闭, 当客户端再次发送Request,需要重新建立TCP连接。

Content-Length

作用:发送给HTTP服务器数据的长度。

例如: Content-Length: 38

Host(发送请求时,该报头域是必需的)

作用: 请求报头域主要用于指定被请求资源的Internet主机和端口号,它通常从HTTP URL中提取出来的

例如: 我们在浏览器中输入:

浏览器发送的请求消息中,就会包含Host请求报头域,如下:

Host:

此处使用缺省端口号80,若指定了端口号,则变成:Host:指定端口号

Pragma

作用: 防止页面被缓存, 在HTTP/1.1版本中,它和Cache-Control:no-cache作用一模一样

Pargma只有一个用法, 例如: Pragma: no-cache

Cookie:

作用: 最重要的header, 将cookie的值发送给HTTP 服务器

Accept-Charset

作用:浏览器申明自己接收的字符集,这就是本文前面介绍的各种字符集和字符编码,如gb2312,utf-8(通常我们说Charset包括了相应的字符编码方案);

我们再看Response消息的结构, 和Request消息的结构基本一样。 同样也分为三部分

第一部分叫Response line,

 第二部分叫Response header,

第三部分是body. header和body之间也有个空行,

HTTP/version-number表示HTTP协议的版本号,  status-code 和message 请看下节[状态代码]的详细解释.

我们用Fiddler 捕捉一个博客园首页的Response然后分析下它的结构, 在Inspectors tab下以Raw的方式可以看到完整的Response的消息,   如下图

Cache-Control

作用: 这个是非常重要的规则。 这个用来指定Response-Request遵循的缓存机制。各个指令含义如下

Cache-Control:Public   可以被任何缓存所缓存()

Cache-Control:Private     内容只缓存到私有缓存中

Cache-Control:no-cache  所有内容都不会被缓存

还有其他的一些用法, 我没搞懂其中的意思, 请大家参考其他的资料

Content-Type

作用:WEB服务器告诉浏览器自己响应的对象的类型和字符集,

例如:

Content-Type: text/html; charset=utf-8

Content-Type:text/html;charset=GB2312

Content-Type: image/jpeg

Expires

作用: 浏览器会在指定过期时间内使用本地缓存

例如: Expires: Tue, 08 Feb 2022 11:35:14 GMT

Last-Modified:

作用: 用于指示资源的最后修改日期和时间。(实例请看上节的If-Modified-Since的实例)

例如: Last-Modified: Wed, 21 Dec 2011 09:09:10 GMT

Server:

作用:指明HTTP服务器的软件信息

例如:Server: Microsoft-IIS/7.5

X-AspNet-Version:

作用:如果网站是用ASP.NET开发的,这个header用来表示ASP.NET的版本

例如: X-AspNet-Version: 4.0.30319

X-Powered-By:

作用:表示网站是用什么技术开发的

例如: X-Powered-By: ASP.NET

Connection

例如: Connection: keep-alive   当一个网页打开完成后,客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭,如果客户端再次访问这个服务器上的网页,会继续使用这一条已经建立的连接

例如:  Connection: close  代表一个Request完成后,客户端和服务器之间用于传输HTTP数据的TCP连接会关闭, 当客户端再次发送Request,需要重新建立TCP连接。

Content-Length

指明实体正文的长度,以字节方式存储的十进制数字来表示。在数据下行的过程中,Content-Length的方式要预先在服务器中缓存所有数据,然后所有数据再一股脑儿地发给客户端。

例如: Content-Length: 19847

 Date

作用:  生成消息的具体时间和日期

例如: Date: Sat, 11 Feb 2012 11:35:14 GMT

HTTP协议之Get和Post

Http协议定义了很多与服务器交互的方法,最基本的有4种,分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源,而HTTP中的GET, POST, PUT, DELETE就对应着对这个资源的查,改,增,删4个操作。 我们最常见的就是GET和POST了。GET一般用于获取/查询资源信息,而POST一般用于更新资源信息.

我们看看GET和POST的区别

1. GET提交的数据会放在URL之后,以?分割URL和传输数据,参数之间以&相连,如EditPosts.aspx?name=test1&id=123456.  POST方法是把提交的数据放在HTTP包的Body中.

2. GET提交的数据大小有限制(因为浏览器对URL的长度有限制),而POST方法提交的数据没有限制.

3. GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值,也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。

4. GET方式提交数据,会带来安全问题,比如一个登录页面,通过GET方式提交数据时,用户名和密码将出现在URL上,如果页面可以被缓存或者其他人可以访问这台机器,就可以从历史记录获得该用户的账号和密码.

 

 

 

 

获得响应

当服务器获得请求之后,经过一系列的工作(可能是类似翻箱倒柜找材料之类的吧),最后将要送还给我的材料,包括网页的代码,全部打包起来形成一个响应(Response),通过连接返回给我。

响应是和请求对应的,一个请求对应一个响应。这就好像问问题一样,一问一答。所以,响应本身其实也就是一系列的英文字符,就像这样:(下面的响应是被简化的版本)

HTTP/1.1 200 OK Date: Mon, 31 Aug 2015 03:06:34 GMT Server: Apache Cache-Control: max-age=86400 Expires: Tue, 01 Sep 2015 03:06:34 GMT Last-Modified: Tue, 12 Jan 2010 13:48:00 GMT ETag: "51-4b4c7d90" Accept-Ranges: bytes Content-Length: 81 Connection: Keep-Alive Content-Type: text/html <html> .... 此处省略N多行 </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
HTTP/1.1 200 OK
Date: Mon, 31 Aug 2015 03:06:34 GMT
Server: Apache
Cache-Control: max-age=86400
Expires: Tue, 01 Sep 2015 03:06:34 GMT
Last-Modified: Tue, 12 Jan 2010 13:48:00 GMT
ETag: "51-4b4c7d90"
Accept-Ranges: bytes
Content-Length: 81
Connection: Keep-Alive
Content-Type: text/html
 
<html>
    .... 此处省略N多行
</html>

你可以注意到,响应分为两个部分。在13行之上的部分称作响应头(Response Head),下面的部分称作响应主体(Response Body)。在这里,响应主体就是网页的代码了。

必威 8

好了,到目前为止,我已经拿到了网页的代码。

    当浏览器去找网页的时候,首先需要去服务器上找网页,那么网页在哪里呢? 存储网页的地方叫做服务器(Server),服务器本身也是电脑,但是比个人电脑的性能要高很多。服务器也有多个,怎么找呢?就是根据给出的URL了。但其实,URL只是服务器地址的一个好记的名字而已,必须将URL解析为IP地址,才能找到相应的服务器。打个比方,URL好比是饭店的店名,那么IP地址就是是饭店的门牌地址。从URL到IP地址的过程叫做DNS查找,也就是DNS Lookup,这个过程所做的事情相当复杂,日后另起文章再详细介绍。

<1>浏览器通过 DNS服务器 查找域名对应的 IP地址;

等等…啥是代码?

好问题!

网页本身其实是由一系列的英文字符编写成的,这些英文字符称作“代码”(Code)。这些英文字符和普通的英文文章看起来差不多,但是它们都是用一种我(浏览器)可以看得懂的格式写成的。我通过阅读这些英文字符,理解它,然后按照它的意思将你想要看的页面渲染出来。

别急,关于这些,我们在接下来的文章中慢慢道来。

1 赞 2 收藏 评论

必威 9

Connect & Request

    根据IP找到服务器后,就可以向服务器发送请求了,请求服务器将你需要的网页发还给浏览器,浏览器和服务器传输信息的方式,就是建立连接。就像有个通道来供服务器和浏览器传递信息。

    建立连接后,浏览器向服务器发起一个request请求,在请求中,需要告诉服务器想要的资源是什么,比如,我们请求google的首页:

    一个URL一般由6个部分组成:协议、主机名、端口号、资源位置、queryString、hashTag;不同的path代表不同的资源,一般指页面,比较特殊的 / 是指根路径,一般会是网站的首页,和在电脑文件夹路径是同样的。

    在前面所说的request请求中,包含一些数据:

GET / HTTP/1.1

Host: google.com

Accept:*/*

Pragma: no-cache

Cache-Control: no-cache

User-Agent:Mozilla/4.04[en](Win95;I;Nav)

GET / 指从服务器上请求一个资源,这个资源的位置是/。另外,Host: google.com代表请求的主机名是google.com。

<2>向 IP地址 对应的 Web服务器 发送请求;

Web Server 

    当服务器收到请求之后,经过Web Server对请求进行处理,最后将所请求的资源打包起来通过通道返回给浏览器。

    每台服务器上都有Web Server用以处理请求,常见的有apache、nginx、IIS或Lighttpd等。

    Web Server对于不同用户发送的请求,会结合配置文件,把不同请求委托给服务器上处理对应请求的程序进行处理(如CGI脚本,JSP脚本,servlets,ASP脚本,服务器端JavaScript等),然后返回后台程序处理产生的结果作为Response返回给浏览器。

    现有后台处理程序大部分都使用了MVC框架:模型(Model) - 视图(View) - 控制器(Controller);MVC是一种设计模式,三个部分的组件各自处理自己的任务,从而将输入、处理和输出分离。

    控制器接收浏览器的请求,决定应该调用哪个模型来进行处理,然后模型用业务逻辑来处理用户的请求并返回数据,最后控制器用相应的视图格式化模型返回html字符串给浏览器,这个返回的数据,叫做响应(Response)。

必威 10

Response和Request是对应的,响应也包含和请求类似的数据:

HTTP/1.0200OK

Date:Mon,31Dec200104:25:57GMT

Server:Apache/1.3.14(Unix)

Content-type:text/html

Last-modified:Tue,17Apr200106:46:28GMT

Etag:"a030f020ac7c01:1e9f"

Content-length:39725426

Content-range:bytes554554-40279979/40279980

响应分为两个部分:响应头和响应主体。其中网页的代码包含在响应主体中。

<3>Web服务器 响应请求,发回 HTML页面;

浏览器处理及渲染

    浏览器收到Response后,首先对其进行加载,并根据其中的代码继续向服务器请求资源(css、javascript、img等),加载完成后对页面进行解析。

    解析的过程,其实就是生成解析树,即Dom树。Dom树是由Dom元素及属性节点组成,加上css解析的样式对象和js解析后的动作实现。

    接下来对Dom树进行可视化表示,也就是渲染,生成一颗渲染树。

    最后一步就是绘制网页,浏览器根据渲染树将元素绘制到屏幕上,同时执行js,完成整个页面的展示。

<4>浏览器解析 HTML内容,并显示出来。

More

    以上,就是从打开网页到看到网页过程的简要介绍,其中每个点拿出来说都是一本书。还需前行,还需努力!

必威 11

网络通信过程

TAG标签:
版权声明:本文由必威发布于必威-前端,转载请注明出处:今天我就来告诉你会发生什么事情,必威:虽然