>

金沙澳门官网4166-4166am金沙登录-www.4166.com

热门关键词: 金沙澳门官网4166,4166am金沙登录,www.4166.com

当你打开一个网页的时候发生了什么金沙澳门官

- 编辑:金沙澳门官网4166 -

当你打开一个网页的时候发生了什么金沙澳门官

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

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

原文出处: 吴迪   

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

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

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

金沙澳门官网4166 1

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

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

金沙澳门官网4166 2

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

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

金沙澳门官网4166 3

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

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

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

金沙澳门官网4166 4

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

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

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

建立连接和发送请求

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

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

金沙澳门官网4166 5

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

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

金沙澳门官网4166 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,翻译过来就是统一资源定位符,俗称网址。打个比方,如果说网址是饭店店名,那浏览器就像外卖团队,你告诉浏览器你想吃的是哪家,它就派人去店里拿了外卖再送到你面前。

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

获得响应

当服务器获得请求之后,经过一系列的工作(可能是类似翻箱倒柜找材料之类的吧),最后将要送还给我的材料,包括网页的代码,全部打包起来形成一个响应(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)。在这里,响应主体就是网页的代码了。

金沙澳门官网4166 7

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

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

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

等等…啥是代码?

好问题!

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

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

1 赞 2 收藏 评论

金沙澳门官网4166 8

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)。

金沙澳门官网4166 9

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

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

金沙澳门官网4166 10

网络通信过程

1. DNS概述

DNS 是计算机域名系统 (Domain Name System 或Domain Name Service) 的缩写,由解析器和域名服务器组成的。

域名服务器是指保存有该网络中所有主机的域名和对应IP地址,并具有将域名转换为IP地址功能的服务器。

一般一个域名的 DNS解析时间 在10~60毫秒之间。

需要注意的是:一个域名必须对应一个IP地址,而一个IP地址不一定会有域名。

2. HTTP和HTTPS

HTTP协议(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收 HTML页面的方法。

HTTPS(Hypertext Transfer Protocol over Secure Socket Layer)简单讲是HTTP的安全版,在HTTP下加入SSL层。

SSL(Secure Sockets Layer 安全套接层)主要用于Web的安全传输协议,在传输层对网络连接进行加密,保障在Internet上数据传输的安全。

HTTP的端口号为80,

HTTPS的端口号为443

HTTP工作原理: 网络爬虫抓取过程可以理解为模拟浏览器操作的过程。

浏览器的主要功能是向服务器发出请求,在浏览器窗口中展示您选择的网络资源,HTTP是一套计算机通过网络进行通信的规则。

3. 浏览器发送HTTP请求的过程

当用户在浏览器的地址栏中输入一个URL地址并按回车键之后,浏览器会向HTTP服务器发送HTTP请求。

HTTP请求主要分为GetPost两种方法。

当我们在浏览器输入URLhttp://www.baidu.com的时候,浏览器发送一个Request请求去获取http://www.baidu.com的html文件,服务器把Response文件对象发送回给浏览器。

浏览器分析Response中的 HTML,发现其中引用了很多其他文件,比如Images文件,CSS文件,JS文件。 浏览器会自动再次发送Request去获取图片,CSS文件,或者JS文件等。

当所有的文件都下载成功后,网页会根据HTML语法结构,完整的显示出来了。

URL(Uniform / Universal Resource Locator的缩写):统一资源定位符,是用于完整地描述Internet上网页和其他资源的地址的一种标识方法。

金沙澳门官网4166 11

URL构成图

基本格式:scheme://host[:port]/path/…/[?query-string][#anchor]

scheme:协议(例如:http, https, ftp)

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

port:服务器的端口(如果是走协议默认端口,缺省端口80)

path:访问资源的路径

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

anchor:锚(跳转到网页的指定锚点位置)

4. 客户端HTTP请求

4.1 请求消息的格式

URL只是标识资源的位置,而HTTP是用来提交和获取资源。客户端发送一个HTTP请求到服务器的请求消息,包括以下格式:

请求行、请求头部、空行、请求数据

四个部分组成,下图给出了请求报文的一般格式。

金沙澳门官网4166 12

4.2  一个典型的HTTP请求示例

金沙澳门官网4166 13

请求示例

4.3 请求方法

根据HTTP标准,HTTP请求可以使用多种请求方法。

HTTP 0.9:只有基本的文本 GET 功能。

HTTP 1.0:完善的请求/响应模型,并将协议补充完整,定义了三种请求方法: GET, POST 和 HEAD方法。

HTTP 1.1:在 1.0 基础上进行更新,新增了五种请求方法:OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。

HTTP 2.0(未普及):请求/响应首部的定义基本没有改变,只是所有首部键必须全部小写,而且请求行要独立为 :method、:scheme、:host、:path这些键值对。

金沙澳门官网4166 14

4.4 HTTP请求主要分为Get和Post两类

GET是从服务器上获取指定页面信息,POST是向服务器提交数据并获取页面信息。

GET请求参数都显示在URL上,服务器根据该请求所包含URL中的参数来产生响应内容。"Get" 请求的参数 是URL的一部分。

POST请求参数在请求体当中,消息长度没有限制而且以隐式的方式进行发送,通常用来向HTTP服务器提交量比较大的数据(比如请求中包含许多参数或者文件上传操作等)。"POST"请求的参数 不在URL中,而在请求体中。

页面的form表单一般都有method属性,默认值是"get"。 举个栗子,登录时提交用户名和密码:

如果用"get"方式,提交表单后,则用户输入的用户名和密码将在地址栏中暴露无遗;

金沙澳门官网4166,如果设置为"post,则提交表单后,地址栏不会有用户名和密码的显示。

所以处理登录页面的form表单时,发送的请求都是"POST"方式。

5. 常用的请求报头

5.1 Host (主机和端口号)

Host:对应网址URL中的Web名称和端口号,用于指定被请求资源的Internet主机和端口号,通常属于URL的Host部分。

5.2 Connection (连接类型)

Connection:表示客户端与服务连接类型,通常情况下:

Client 发起一个包含 Connection:keep-alive 的请求(HTTP/1.1使用 keep-alive 为默认值,是长连接的类型)

Server收到请求后:

如果 Server 支持 keep-alive,回复一个包含 Connection:keep-alive 的响应,不关闭连接;

如果 Server 不支持 keep-alive,回复一个包含 Connection:close 的响应,关闭连接。

如果client收到包含 Connection:keep-alive 的响应,向同一个连接发送下一个请求,直到一方主动关闭连接。

Connection : keep-alive 在很多情况下能够重用连接,减少资源消耗,缩短响应时间。比如当浏览器需要多个文件时(比如一个HTML文件和多个Image文件),不需要每次都去请求建立连接。

5.3 Upgrade-Insecure-Requests (升级为HTTPS请求)

Upgrade-Insecure-Requests:升级不安全的请求,意思是会在加载 http 资源时自动替换成 https 请求,让浏览器不再显示https页面中的http请求警报。

HTTPS 是以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 HTTP 请求,一旦出现就是提示或报错。

5.4 User-Agent (浏览器名称)

User-Agent:标识客户端身份的名称,通常页面会根据不同的User-Agent信息自动做出适配,甚至返回不同的响应内容。

5.5 Accept (传输文件类型)

Accept:指浏览器或其他客户端可以接受的MIME(Multipurpose Internet Mail Extensions(多用途互联网邮件扩展))文件类型,服务器可以根据它判断并返回适当的文件格式。

Accept: */*:表示什么都可以接收。

Accept:image/gif:表明客户端希望接受GIF图像格式的资源;

Accept:text/html:表明客户端希望接受html文本。

Accept: text/html, application/xhtml+xml;q=0.9, image/*;q=0.8:表示浏览器支持的 MIME 类型分别是 html文本、xhtml和xml文档、所有的图像格式资源。

5.6. Referer (页面跳转来源)

Referer:表明产生请求的网页来自于哪个URL,用户是从该 Referer页面访问到当前请求的页面。这个属性可以用来跟踪Web请求来自哪个页面,是从什么网站来的等。

防盗链:有时候遇到下载某网站图片,需要对应的referer,否则无法下载图片,那是因为人家做了防盗链,原理就是根据referer去判断是否是本网站的地址,如果不是,则拒绝,如果是,就可以下载。

5.7  Accept-Encoding(文件编解码格式)

Accept-Encoding:指出浏览器可以接受的编码方式。编码方式不同于文件格式,它是为了压缩文件并加速文件传递速度。浏览器在接收到Web响应之后先解码,然后再检查文件格式,许多情形下这可以减少大量的下载时间

举例:Accept-Encoding:gzip;q=1.0, identity; q=0.5, *;q=0

如果有多个Encoding同时匹配, 按照q值顺序排列,本例中按顺序支持 gzip, identity压缩编码,支持gzip的浏览器会返回经过gzip编码的HTML页面。

如果请求消息中没有设置这个报头,通常服务器假定客户端不支持压缩,直接返回文本。

5.8  Accept-Language(语言种类)

Accept-Langeuage:指出浏览器可以接受的语言种类,如en或en-us指英语,zh或者zh-cn指中文,当服务器能够提供一种以上的语言版本时要用到。

如果目标网站支持多个语种的话,可以使用这个信息来决定返回什么语言的网页。

5.9  Accept-Charset(字符编码)

Accept-Charset:指出浏览器可以接受的字符编码。

举例:Accept-Charset:iso-8859-1,gb2312,utf-8

ISO8859-1:通常叫做Latin-1。Latin-1包括了书写所有西方欧洲语言不可缺少的附加字符,英文浏览器的默认值是ISO-8859-1.

gb2312:标准简体中文字符集;

utf-8:UNICODE 的一种变长字符编码,可以解决多种语言文本显示问题,从而实现应用国际化和本地化。

如果在请求消息中没有设置这个域,默认客户端是任何字符集都可以接受,则返回网页charset指定的编码。

5.10  Cookie

Cookie:浏览器用这个属性向服务器发送Cookie。Cookie是在浏览器中寄存的小型数据体,它可以记载和服务器相关的用户信息,也可以用来实现模拟登陆。

5.11 Content-Type (POST数据类型)

Content-Type:POST请求里用来表示的内容类型。

举例:Content-Type = Text/XML; charset=gb2312:

指明该请求的消息体中包含的是纯文本的XML类型的数据,字符编码采用“gb2312”。

6.  服务端HTTP响应

6.1 服务器响应格式

HTTP响应也由四个部分组成,分别是: 状态行、消息报头、空行、响应正文,如下图所示:

金沙澳门官网4166 15

响应格式

6.2 典型的服务器响应案例

金沙澳门官网4166 16

响应案例

6.3 常用的响应报头

1. Cache-Control:must-revalidate, no-cache, private。

这个值告诉客户端,服务端不希望客户端缓存资源,在下次请求资源时,必须要从新请求服务器,不能从缓存副本中获取资源。

Cache-Control是响应头中很重要的信息,当客户端请求头中包含Cache-Control:max-age=0请求,明确表示不会缓存服务器资源时,Cache-Control作为作为回应信息,通常会返回no-cache,意思就是说,"那就不缓存呗"。

当客户端在请求头中没有包含Cache-Control时,服务端往往会制定针对不同的资源,采用不同的缓存策略。比如说oschina在缓存图片资源的策略就是Cache-Control:max-age=86400,这个意思是,从当前时间开始,在86400秒的时间内,客户端可以直接从缓存副本中读取资源,而不需要向服务器请求。

2. Connection:keep-alive

这个字段作为回应客户端的Connection:keep-alive,告诉客户端服务器的tcp连接也是一个长连接,客户端可以继续使用这个tcp连接发送http请求。

3. Content-Encoding:gzip

告诉客户端,服务端发送的资源是采用gzip编码的,客户端看到这个信息后,应该采用gzip对资源进行解码。

4. Content-Type:text/html;charset=UTF-8

告诉客户端,资源文件的类型,还有字符编码,客户端通过utf-8对资源进行解码,然后对资源进行html解析。通常我们会看到有些网站是乱码的,往往就是服务器端没有返回正确的编码。

5. Date:Sun, 2 Sep 2015 05:10:11 GMT

这个是服务端发送资源时的服务器时间,GMT是格林尼治所在地的标准时间。http协议中发送的时间都是GMT的,这主要是解决在互联网上,不同时区在相互请求资源的时候,时间混乱问题。

6. Expires:Sun, 1 Jan 2000 01:00:00 GMT

这个响应头也是跟缓存有关的,告诉客户端在这个时间前,可以直接访问缓存副本,很显然这个值会存在问题,因为客户端和服务器的时间不一定会都是相同的,如果时间不同就会导致问题。所以这个响应头是没有Cache-Control:max-age=*这个响应头准确的,因为max-age=date中的date是个相对时间,不仅更好理解,也更准确。

7. Pragma:no-cache

这个含义与Cache-Control等同。

8.Server:Tengine/1.4.6

这个是服务器和相对应的版本,只是告诉客户端服务器的信息。

9. Transfer-Encoding:chunked

这个响应头告诉客户端,服务器发送的资源的方式是分块发送的。一般分块发送的资源都是服务器动态生成的,在发送时还不知道发送资源的大小,所以采用分块发送,每一块都是独立的,独立的块都能标示自己的长度,最后一块是0长度的,当客户端读到这个0长度的块时,就可以确定资源已经传输完了。

10. Vary: Accept-Encoding

告诉缓存服务器,缓存压缩文件和非压缩文件两个版本,现在这个字段用处并不大,因为现在的浏览器都是支持压缩的。

本文由计算机网络发布,转载请注明来源:当你打开一个网页的时候发生了什么金沙澳门官