高性能网站优化——请求响应原理
当浏览器中只点击了一个超级链接,却发送了多个数据包。那是因为,我们请求的网页文件中有很多图片、音乐、电影等信息时,
服务器返回的信息中并不直接包含图片数据,而只是保存该图片的链接,当浏览器进行解释的时候,遇到图片的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批量化)、计算宽高位置等