高性能网站优化——请求响应原理

当浏览器中只点击了一个超级链接，却发送了多个数据包。那是因为,我们请求的网页文件中有很多图片、音乐、电影等信息时，

服务器返回的信息中并不直接包含图片数据，而只是保存该图片的链接，当浏览器进行解释的时候，遇到图片的url时,才向服务器发出对图片的请求信息。

当客户端和服务端建立TCP连接后，客户端就会向服务器发送一个请求信息。http 请求由三部分组成，分别是：请求行、消息报头、请求正文，如：

1.GET / HTTP/1.1

2.Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, application/x-silverlight, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */* 客户端可识别的内容类型列表。

3.Accept-Language: zh-cn 客户端所能解释的语言：简体中文
4.UA-CPU: x86
5.Accept-Encoding: gzip, deflate 客户端可以解释的类型
6.User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; EmbeddedWB 14.52 from: http://www.bsalsa.com/ EmbeddedWB 14.52; .NET CLR 2.0.50727; InfoPath.1; CIBA) 客户端浏览器型号
7.Host: http://www.google.cn/ 提交请求页面
8.Connection: Keep-Alive TCP连接保持打开

9.

该请求信息主要由4部分组成：
请求方法：最常用的为GET和POST方法
请求报头：2-8行，包含许多有关客户端环境和请求正文的有用信息。
空行 ：9 请求报头和请求正文之间是一个空行，这个行非常重要，表示请求报头已经结束，接下来是正文，这个行非常重要，它表示请求报头已经结束，接下来是请求正文。
请求正文：请求正文中可以包含客户提交的查询字符串信息，如用户名和密码等。

 

GET方法是默认的HTTP请求方法，我们日常用GET方法来提交表单数据，然而用GET方法提交的表单数据只经过了简单的编码，同时它将作为URL的一部分向Web服务器发送，因此，如果使用GET方法

来提交表单数据就存在着安全隐患上，同时这个URL长度还有限制，不允许超过1k。

POST方法是GET方法的一个替代方法，它主要是向Web服务器提交表单数据，尤其是大批量的数据。POST方法克服了GET方法的一些缺点。通过POST方法提交表单数据时，数据不是作为URL请求的一

部分而是作为标准数据传送给Web服务器，这就克服了GET方法中的信息无法保密和数据量太小的缺点。因此，出于安全的考虑以及对用户隐私的尊重，通常表单提交时采用POST方法。

 

协议状态描述

200 OK表示服务器已经成功处理了客户端发出的请求。200表示HTTP的应答成功。

HTTP应答码由3位数字构成，其中首位数字定义了应答码的类型：
1XX－信息类(Information),表示收到Web浏览器请求，正在进一步的处理中
2XX－成功类（Successful）,表示用户请求被正确接收，理解和处理例如：200 OK
3XX-重定向类(Redirection),表示请求没有成功，客户必须采取进一步的动作。
4XX-客户端错误(Client Error)，表示客户端提交的请求有错误 例如：404 NOT Found，意味着请求中所引用的文档不存在。
5XX-服务器错误(Server Error)表示服务器不能完成对请求的处理：如 500

通常碰到的：200， 304，500,403，404（找不到文件）

2.客户端浏览器对服务器端进行一次请求的演示图：

<1>.客户端发送请求。浏览器向服务器发送请求URL；
<2>.服务器接收请求。服务器接收到该浏览器发送的请求；
<3>.服务器生成HTML。服务器解析请求的URL，根据URL确定请求的目标资源文件；
<4>.服务端响应请求。生成HTML文档以后，服务器响应浏览器的请求，将生成的HTML文档发送给客户端浏览器；
<5>.客户端接收响应。浏览器接收服务端发出的请求得来HTML文档；
<6>.客户端解析HTML。浏览器对HTML文档进行解析，并加载相关的资源文件（JS，CSS，多媒体资源，内嵌网页）等，(在这里浏览器解悉完HTML文档以后，就会进行呈现，但同时也会向服务器发送请求来请求其它相关的资源文件)
<7>.服务器发送资源文件。服务器接到浏览器对资源文件的请求，将相应的资源文件响应给客户端浏览器；
<8>.客户端加载资源文件。客户端浏览器将接收服务器发送的资源文件，整理并呈现到页面中；
<9>.客户端从上到下加载。在进行页面呈现的时候，浏览器会从上到下执行HTML文档，当遇到相应的页面脚本的时候，会对脚本进行分析，并解释执行相应的脚本代码。

在第6步以后，我们就可以看到一部分页面内容了，不过可能是纯文本内容，没有样式，没有图片或其它资源。待到浏览器请求得到某资源的时候就会进行组织呈现，直到整个页面所有资源加载完毕,显示完成，请求响应完毕。

3.服务器端

由Web 浏览器(客户机)和Web服务器(服务器)构成，两者之间采用超文本传送协议（HTTP）进行通信，HTTP协议的作用原理包括：连接，请求，应答。

根据上述HTTP协议的作用原理，服务器端通过创建ServerSocket类对象，监听端口8080； 等待、接受客户机连接到端口8080； 创建与socket字相关联的输入流和输出流;然后，读取客户机的请求信息，若请求类型是GET，则从请求信息中获取所访问的HTML文件名，如果HTML文件存在，则打开HTML文件，把HTTP头信息和HTML文件内容通过socket传回给Web浏览器，然后关闭文件。否则发送错误信息给Web浏览器。最后，关闭与相应Web浏览器连接的socket字。

HTTP协议是基于TCP/IP协议之上的协议，是Web浏览器和Web服务器之间的应用层协议，是通用的、无状态的、面向对象的协议。HTTP协议的作用原理包括三个步骤：

　　(1) 连接：Web浏览器与Web服务器建立连接，打开一个称为socket（套接字）的虚拟文件，此文件的建立标志着连接建立成功。

　　(2) 请求：Web浏览器通过socket向Web服务器提交请求。HTTP的请求一般是GET或POST命令（POST用于FORM参数的传递）。GET命令的格式为：

　　GET 路径/文件名 HTTP/1.0

　　文件名指出所访问的文件，HTTP/1.0指出Web浏览器使用的HTTP版本。

　　(3) 应答：Web浏览器提交请求后，通过HTTP协议传送给Web服务器。Web服务器接到后，进行事务处理，处理结果又通过HTTP传回给Web浏览器，从而在Web浏览器上显示出所请求的页面。

　　例：假设客户机与www.mycompany.com:8080/mydir/index.html建立了连接，就会发送GET命令：GET /mydir/index.html HTTP/1.0。主机名为www.mycompany.com的Web服务器从它的文档空间中搜索子目录mydir的文件index.html。如果找到该文件，Web服务器把该文件内容传送给相应的Web浏览器。

为了告知 Web浏览器传送内容的类型，Web服务器首先传送一些HTTP头信息，然后传送具体内容（即HTTP体信息），HTTP头信息和HTTP体信息之间用一个空行分开。

常用的HTTP头信息有：

　　① HTTP 1.0 200 OK

　　这是Web服务器应答的第一行，列出服务器正在运行的HTTP版本号和应答代码。代码“200OK”表示请求完成。

　　② MIME_Version:1.0

　　它指示MIME类型的版本。

　　③ content_type:类型

　　这个头信息非常重要，它指示HTTP体信息的MIME类型。如：content_type:text/html指示传送的数据是HTML文档。

　　④ content_length:长度值

　　它指示HTTP体信息的长度（字节）。

　　(4) 关闭连接：当应答结束后，Web浏览器与Web服务器必须断开，以保证其它Web浏览器能够与Web服务器建立连接。

 4.浏览器的工作原理

1.DNS解析（多级缓存）

2.请求（TCP建连、HTTP报文）

3.解析（解压、缓存处理、引用资源）

4.构建：DOM树（节点显隐、层次结构）

5.构建：CSSOM树（CSS优先级）

6.Render树（CSS匹配规则）

7.脚本：文档状态（阻塞和延迟、内联和外联）

8.渲染页面

Repaint+Reflow

1.Repaint：皮肤类外观改变引发的重新渲染，如背景色

2.Reflow:位置、大小、盒模型等发生变化需要重新布局

3.常见的诱因：页面滚动、页面缩放、添加样式、操作DOM（属性、样式、增删节点）（解决方法操作dom批量化）、计算宽高位置等