Last night, I wrote an essay about the rendering process of the browser, but I just explained it through a small piece of code. I did not pass the browser test, it was not convincing enough, and there were many incomplete aspects. I tested it in the browser today and shared the test results with everyone. The test process may be a bit messy, I hope everyone understands it.
Test browsers : Chrome v24.0.1312.52 m, Firefox v18.0, Opera v12.12.In the WebKit kernel, when the web page is displayed, there will be a parser (Parser) to parse the html document, then generate a rendering tree (Render Tree), and finally render the page. This is done in one thread, so both will not be done at the same time.
I divided it into the following two situations and tested it in different browsers.
The style file is in the head, and the other script file is connected to the beginning of the body and the other is at the bottom of the body. The style file is in the beginning of the body and the script file is the same as above.The test result is like this: In Chrome, the location of the style file will affect the download time of the image, while in the other two browsers there is no difference between the two situations. The following is a detailed test process.
Test 1: The style file is in the head, and the other script file is connected to the beginning of the body and the other is at the bottom of the body.Tested code:
Copy the code