how does browser know loading progress?

Question 1

When you load a page in browser, it shows the percentage loaded while loading the page. Same with when you do an AJAX request with XMLHttpRequest (XHR), it allows you to see the loading percentage.

I'm just curious how such feature is been achieved behind the scene. How does client know the data size it will receive beforehand? Personally, when I create my web server using Node.js, I didn't manually implement such capability like sending the client the percentage loaded on every interval of milliseconds, etc.

Just how does this all work?

enter image description here

Question 2

i'm in no way an expert on this, but i think that the percentage loaded is just the percentage of the website that has been RENDERED. When the browser retrieves data from the server, it knows the exact size, and then just updates the remaining data after each element has been rendered. But i'm not sure.

Question 3

Probably by reading Content-Length entity-header?

Question 4

When a browser requests a resource from a server, in most cases the server replies with the size of the requested resource, before the download begins. For Example:

HTTP/1.1 200 OK
Date: 2005年5月23日 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Last-Modified: 2003年1月08日 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>

In the above server response, the length of the requested resource is given, so the client will know how many bytes to read. This allows the client to display a meaningful progress indicator.

Question 5

Welcome to Stack Overflow! Nice answer. I just wanted to let you know I submitted an edit that will include the example in the answer itself beside the link. You did a fine job, but it's not good practice to post a link without a synopsis of what it leads to because your answer could be made useless if the linked website changes, or the link breaks.

Paul Lutus 362 bronze badges · Accepted Answer · 2014-10-02 17:00:50Z

When a browser requests a resource from a server, in most cases the server replies with the size of the requested resource, before the download begins. For Example:

HTTP/1.1 200 OK
Date: 2005年5月23日 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Last-Modified: 2003年1月08日 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>

In the above server response, the length of the requested resource is given, so the client will know how many bytes to read. This allows the client to display a meaningful progress indicator.

Welcome to Stack Overflow! Nice answer. I just wanted to let you know I submitted an edit that will include the example in the answer itself beside the link. You did a fine job, but it's not good practice to post a link without a synopsis of what it leads to because your answer could be made useless if the linked website changes, or the link breaks.

CollectivesTM on Stack Overflow

how does browser know loading progress?

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related