浏览器如何知道加载进度?

在浏览器中加载页面时,显示加载页面时加载的百分比。 与使用XMLHttpRequest(XHR)执行AJAX请求时一样,它允许您查看加载百分比。

我只是好奇这样的function是如何在幕后实现的。 客户如何知道预先收到的数据大小? 就我个人而言,当我使用Node.js创build我的Web服务器时,我没有手动实现这样的function,比如发送客户端的时间间隔为毫秒,等等。

这一切如何工作?

在这里输入图像说明

当浏览器从服务器请求资源时,在大多数情况下,服务器会在下载开始之前回复所请求资源的大小。 例如:

HTTP/1.1 200 OK Date: Mon, 23 May 2005 22:38:34 GMT Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT ETag: "3f80f-1b6-3e1cb03b" Content-Type: text/html; charset=UTF-8 Content-Length: 131 Accept-Ranges: bytes Connection: close <html> <head> <title>An Example Page</title> </head> <body> Hello World, this is a very simple HTML document. </body> </html> 

在上面的服务器响应中,所请求的资源的长度是给定的,所以客户端将知道要读取多less个字节。 这允许客户端显示一个有意义的进度指示器。