5

After read how browser works and browser rendering process, I still have confusion about browser parse process when encounter <script> tag, which the posts not really cover.

The main process is described in the following pic: enter image description here

Suppose we have a simple html

<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
<link rel="stylesheet" href="another.css">
</head>
<body>
</body>
</html>

Questions:

  1. Browser is single thread, so how does HTML Parser and CSS Parser work parallel
  2. In HTML Parser, when encounter <script> tag, does browser halt until js file is downloaded and executed complete? For this example, browser will not download another.css until main.js download and execute?
jason
  • 1,621
  • 6
  • 21
  • 39
  • `"Browser is single thread"` - says who? – Jonathon Reinhart Oct 31 '13 at 09:22
  • Concerning the `script` tag, the browser wait for it wherever the script tag is (head or body): for instance, when it's in the head, the browser halts to parse it totally before rendering the `body`. – Maen Oct 31 '13 at 09:22
  • @Bigood, so when parse script, everything is halt, just waiting for it complete? Any download also halt? – jason Oct 31 '13 at 10:22
  • @JonathonReinhart, javascript is single threaded, but browser is not single thread, right? – jason Oct 31 '13 at 10:30

1 Answers1

7

1: The browser is not singlethreaded, if you keep an eye on your taskmanager, you'll see that the browser in fact uses several threads. i think the browser reserves 1 thread for the htmlpage, and creates a new thread/reuses threads to fetch images, css and js, thus not blocking the main html-thread.

2: When the HTML parser encounters the <script src="main.js"></script> tag, it will download the main.js to the client and execute whatever js-code it can find.

Normally it would be in your best interests to halt the execution of the js. This is why you normally put all your js functionality into functions and have an init or load function that triggers your js when all elements on htmlpage are loaded.

You can do this by attaching an eventlistener to the body.onload-event <body onload="load()"> where load() is a function in your main.js

Take a look at this: Link

Community
  • 1
  • 1
Raveno
  • 71
  • 2
  • for the second question,when download the main.js and execute code, the other things are all halted? The browser will not download another.css until main.js executed? If so, any tools to observe? – jason Oct 31 '13 at 14:35
  • The thread that handles the main.js will not do anything else until it is done with the task at hand. The other elements that need downloading, such as another.css, it will be handled by another thread and will not block the execution of the html nor the js. This is again why you would want to execute your js on the body onload event. As for tools, if you are using Chrome, you can inspect the networktraffic by pressing Ctrl+Shift+I and choose the Network tab. Here you'll find that several requests (threads) are running simultaneously. – Raveno Oct 31 '13 at 18:42