从浏览器输入回车到内容呈现的过程是怎样的？

从浏览器输入回车到内容呈现的过程是怎样的？

 

当我们打开浏览器，在地址栏中输入URL，然后我们就看到了网页。 原理是怎样的呢？

 

实际上我们输入URL后，我们的浏览器给Web服务器发送了一个Request, Web服务器接到Request后进行处理，生成相应的Response，然后发送给浏览器， 浏览器解析Response中的HTML,这样我们就看到了网页，过程如下图所示

 

 

 

 

 

 

我们的Request 有可能是经过了代理服务器，最后才到达Web服务器的。

 

过程如下图所示

 

 

当地输入完url后，按回车：

浏览器会进行解析URL

 

浏览器通过URL能够知道下面的信息：

Protocol ”http”

使用HTTP协议

Resource ”/”

请求的资源是主页(index)

 

浏览器会分析输入的是URL还是搜索的关键字？

 

当协议或主机名不合法时，浏览器会将地址栏中输入的文字传给默认的搜索引擎。大部分情况下，在把文字传递给搜索引擎的时候，URL会带有特定的一串字符，用来告诉搜索引擎这次搜索来自这个特定浏览器。

 

检查HSTS列表···

 

浏览器检查自带的“预加载HSTS（HTTP严格传输安全）”列表，这个列表里包含了那些请求浏览器只使用HTTPS进行连接的网站

如果网站在这个列表里，浏览器会使用HTTPS而不是HTTP协议，否则，最初的请求会使用HTTP协议发送

注意，一个网站哪怕不在HSTS列表里，也可以要求浏览器对自己使用HSTS政策进行访问。浏览器向网站发出第一个HTTP请求之后，网站会返回浏览器一个响应，请求浏览器只使用HTTPS发送请求。然而，就是这第一个HTTP请求，却可能会使用户收到 downgrade attack 的威胁，这也是为什么现代浏览器都预置了HSTS列表。

 

转换非ASCII的Unicode字符

 

浏览器检查输入是否含有不是 a-z， A-Z，0-9， - 或者 . 的字符

这里主机名是 google.com ，所以没有非ASCII的字符，如果有的话，浏览器会对主机名部分使用Punycode 编码

 

DNS查询···

 

当服务器获取响应返回了的对应资源时，主要做了什么？

 

当服务器提供了资源之后（HTML，CSS，JS，图片等），浏览器会执行下面的操作：

 

解析 HTML，CSS，JS

渲染——构建 DOM 树 -> 渲染 -> 布局 -> 绘制

浏览器

 

浏览器的功能是从服务器上取回你想要的资源，然后展示在浏览器窗口当中。资源通常是 HTML 文件，也可能是 PDF，图片，或者其他类型的内容。资源的位置通过用户提供的 URI(Uniform Resource Identifier) 来确定。

 

浏览器解释和展示 HTML 文件的方法，在 HTML 和 CSS 的标准中有详细介绍。这些标准由 Web 标准组织 W3C(World Wide Web Consortium) 维护。

 

  HTML 解析

 

浏览器渲染引擎从网络层取得请求的文档，一般情况下文档会分成8kB大小的分块传输。

 

HTML解析器的主要工作是对HTML文档进行解析，生成解析树。

 

解析树是以DOM元素以及属性为节点的树。DOM是文档对象模型(Document Object Model)的缩写，它是HTML文档的对象表示，同时也是HTML元素面向外部(如Javascript)的接口。树的根部是”Document”对象。整个DOM和HTML文档几乎是一对一的关系。

当使用了代理服务器就是网络信息的中转站，有什么功能呢？

 

1. 提高访问速度， 大多数的代理服务器都有缓存功能，如我们uc的可以做中转压缩功能，省流。

 

2. 突破限制，也就是FQ了，如印尼这边运营商屏蔽了黄站，利用这个可以绕过运营商屏蔽

 

3.流量监控，云端代码处理等。

URL详解

 

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

 

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

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

 

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

 

port#                 HTTP服务器的默认端口是80，这种情况下端口号可以省略。如果使用了别的端口，必须指明，例如 http://www.cnblogs.com:8080/

 

path                   访问资源的路径

 

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

 

anchor-             锚

 

 

 

egg: http://www.test.com/test.aspx?name=sviergn&x=true#stuff

 

Schema:                 http

host:                   www.test.com

path:                   /test.aspx

Query String:           name=sviergn&x=true

Anchor:                 stuff

 

 

打开一个网页需要浏览器发送很多次Request

 

1. 当你在浏览器输入URL http://www.cnblogs.com 的时候，浏览器发送一个Request去获取 http://www.cnblogs.com 的html.  服务器把Response发送回给浏览器.

 

2. 浏览器分析Response中的 HTML，发现其中引用了很多其他文件，比如图片，CSS文件，JS文件。

 

3. 浏览器会自动再次发送Request去获取图片，CSS文件，或者JS文件。

 

4. 等所有的文件都下载成功后。 网页就被显示出来了。

HTTP消息的结构

 

先看Request 消息的结构,   Request 消息分为3部分，第一部分叫Request line, 第二部分叫Request header, 第三部分是body. header和body之间有个空行， 结构如下图

 

第一行中的Method表示请求方法,比如"POST","GET",  Path-to-resoure表示请求的资源， Http/version-number 表示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来获取变量的值。

 

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

get方法， body是为空

post的时候

我们再看Response消息的结构, 和Request消息的结构基本一样。 同样也分为三部分,第一部分叫Response line, 第二部分叫Response header，第三部分是body. header和body之间也有个空行,  结构如下图

 

其实两者类似

状态码

 

Response 消息中的第一行叫做状态行，由HTTP协议版本号， 状态码， 状态消息 三部分组成。

 

状态码用来告诉HTTP客户端,HTTP服务器是否产生了预期的Response.

 

HTTP/1.1中定义了5类状态码， 状态码由三位数字组成，第一个数字定义了响应的类别

 

1XX  提示信息 - 表示请求已被成功接收，继续处理

 

2XX  成功 - 表示请求已被成功接收，理解，接受

 

3XX  重定向 - 要完成请求必须进行更进一步的处理

 

4XX  客户端错误 -  请求有语法错误或请求无法实现

 

5XX  服务器端错误 -   服务器未能实现合法的请求

200 OK

最常见的就是成功响应状态码200了， 这表明该请求被成功地完成，所请求的资源发送回客户端

302 Found

重定向，新的URL会在response 中的Location中返回，浏览器将会自动使用新的URL发出新的Request

304 Not Modified

代表上次的文档已经被缓存了， 还可以继续使用

If-None-Match和ETag一起工作，工作原理是在HTTP Response中添加ETag信息。 当用户再次请求该资源时，将在HTTP Request 中加入If-None-Match信息(ETag的值)。如果服务器验证资源的ETag没有改变（该资源没有更新），将返回一个304状态告诉客户端使用本地缓存文件。否则将返回200状态和新的资源和Etag.  使用这样的机制将提高网站的性能

 

400 Bad Request  客户端请求与语法错误，不能被服务器所理解

403 Forbidden 服务器收到请求，但是拒绝提供服务

404 Not Found

从HTTP/1.1起，默认都开启了Keep-Alive，保持连接特性，简单地说，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接

Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间

该文章主要参考：http://www.cnblogs.com/tankxiao/archive/2012/02/13/2342672.html