[Original] JavaScript, css, and Image Blocking in Firefox (1)

External js files block images in the body

Take the following html as an example:

1 <! Doctype html> 2

After firebug network analysis:

Figure 1-1

Observe Figure 1-1 and draw the following two conclusions:

1. the browser processes requests (slices) concurrently. When the IP address and port number are the same,The default number of concurrent requests in Firefox is 6 (The number of concurrent requests for HTTP1.1 and HTTP1.0 varies depending on the browser version.)The six images are downloaded from the server at the same time.

2. After the js file is loaded, there is about idle time in the middle. During this time, the browser did not perform any operations. This phenomenon can be calledBlocking,The external js file blocks the img request in the body.

 

IfPlace external js files before </body>To eliminate blocking.

 

1 <! Doctype html> 2  

Figure 1-2

Compared to Figure 1-1 and figure 1-2, the same file is loaded, but the order is different, figure 1-2 saves about 0.1 s compared with Figure 1-1 (the test results are random)