XMLHttpRequest的五种状态描述——常见的请求头和相应头都有什么——reflow(回流）repaint(重绘）引起变换的原因

Posted 2022-08-29 勇敢*牛牛

XMLHttpRequest对象的readyState与status的几种状态码表示的意思:

readyState有五种状态：

参数	功能
0 (未初始化)：	(XMLHttpRequest)对象已经创建，但还没有调用open()方法；
1 (载入)：	已经调用open() 方法，但尚未发送请求；
2 (载入完成)：	请求已经发送完成；
3 (交互)：	可以接收到部分响应数据；
4 (完成)：	已经接收到了全部数据，并且连接已经关闭。

status实际是一种状态判断，只是status更多是服务器方的状态判断。

关于status，由于它的状态有几十种，我只列出平时常用的几种：

参数	功能
1xx——信息类	表示收到Web浏览器请求，正在进一步的处理中。如，100：客户必须继续发出请求；101：客户要求服务器根据请求转换HTTP协议版本
2xx——成功	表示用户请求被正确接收，理解和处理。例如，200：OK；201：提示知道新文件的URL
3xx——重定向	表示请求没有成功，客户必须采取进一步的动作。如，300：请求的资源可在多处得到；301：删除请求数据
4xx——客户端错误	表示客户端提交的请求有错误。如，404：NOT Found，意味着请求中所引用的文档不存在。
5xx——服务器错误	表示服务器不能完成对请求的处理。如，500，服务器产生内部错误

常见的请求头和相应头都有什么呢？

1)请求(客户端->服务端[request])
GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号)

项目	Value
Accept:	/(客户端能接收的资源类型)
Accept-Language:	en-us(客户端接收的语言类型)
Connection:	Keep-Alive(维护客户端和服务端的连接关系)
Host: localhost:	8080(连接的目标主机和端口号)
Referer:	http://localhost/links.asp(告诉服务器我来自于哪里)
User-Agent:	Mozilla/4.0(客户端版本号的名字)
Accept-Encoding:	gzip, deflate(客户端能接收的压缩数据的类型)
If-Modified-Since:	Tue, 11 Jul 2000 18:23:51 GMT(缓存时间)
Cookie	(客户端暂存服务端的信息)
Date:	Tue, 11 Jul 2000 18:23:51 GMT(客户端请求服务端的时间)

2)响应(服务端->客户端[response])
HTTP/1.1(响应采用的协议和版本号) 200(状态码) OK(描述信息)

项目	Value
Location:	http://www.baidu.com(服务端需要客户端访问的页面路径)
Server:	apache tomcat(服务端的Web服务端名)
Content-Encoding:	gzip(服务端能够发送压缩编码类型)
Content-Length:	80(服务端发送的压缩数据的长度)
Content-Language:	zh-cn(服务端发送的语言类型)
Content-Type:	text/html; charset=GB2312(服务端发送的类型及采用的编码方式)
Last-Modified:	Tue, 11 Jul 2000 18:23:51 GMT(服务端对该资源最后修改的时间)
Refresh:	1;url=http://www.it315.org(服务端要求客户端1秒钟后，刷新，然后访问指定的页面路径)
Content-Disposition:	attachment; filename=aaa.zip(服务端要求客户端以下载文件的方式打开该文件)
Transfer-Encoding:	chunked(分块传递数据到客户端）
Set-Cookie:	SS=Q0=5Lb_nQ; path=/search(服务端发送到客户端的暂存数据)
Expires:	-1//3种(服务端禁止客户端缓存页面数据)
Cache-Control:	no-***(服务端禁止客户端缓存页面数据)
Pragma:	no-***(服务端禁止客户端缓存页面数据)
Connection:	close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)
Date:	Tue, 11 Jul 2000 18:23:51 GMT(服务端响应客户端的时间)

在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息，解决跨域的一种方法。

简要：整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow(回流)和repaint(重绘) 会大大影响web性能，尤其是手机页面。因此我们在页面设计的时候要尽量减少reflow和repaint。

什么是reflow和repaint

reflow：例如某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为回流。

reflow：几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint：如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow

下面情况会导致reflow发生

1：改变窗口大小
2：改变文字大小
3：内容的改变，如用户在输入框中敲字
4：激活伪类，如:hover
5：操作class属性
6：脚本操作DOM
7：计算offsetWidth和offsetHeight
8：设置style属性