Is a script in the footer "render-blocking"?

Question

After discussing it with a colleague, we need an answer to the question: Is a script in the footer "render-blocking"? I mean, is any content showed to the user before the script is completely loaded?

Thank you

Yes it is blocking. However, the parts before ( the body) has already rendered — Jonas Wilms, Jul 06 '17 at 15:52
I would say that any JS which is not inline, or asyc/deferred, is render-blocking. — evolutionxbox, Jul 06 '17 at 15:52
Possible duplicate of [**Benefits of loading JS at the bottom as opposed to the top of the document**](https://stackoverflow.com/questions/5329807/benefits-of-loading-js-at-the-bottom-as-opposed-to-the-top-of-the-document) - In addition jQuery might be better off at the top as other scripts could avail of it right away — Nope, Jul 06 '17 at 15:53
@Fran I'm not sure they're the same. One is discussing the benefits, the other is asking for a definition. — evolutionxbox, Jul 06 '17 at 15:55
@evolutionxbox - I thought it answered this question `If I put it in the footer, will rendering start before the script finishes downloading?` — Nope, Jul 06 '17 at 15:55
@evolutionxbox Then what is OP's question, as he clearly states he knows the outcome when he puts it in the body. — Johan Karlsson, Jul 06 '17 at 16:00

score 3 · Accepted Answer · answered Aug 09 '17 at 09:27

It is coming late but I found the answer: No, a script is not render-blocking, a script is parse-blocking. Only CSS files are render-blocking.

If the script is inside the body, it will be parse-blocking but the content parsed before the script can already be rendered (if it is in the head nothing will be rendered because no content has been parsed yet). So, yes, content can be showed/rendered before the script is completely downloaded.

Please, see these two examples:

Screenshot Test1: Content rendered before the large JS file finishes downloading

<!DOCTYPE html>
<html lang="en"> 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <section>
  <h2>testing</h2>
  <h4>Lorem Ipsum has been the industry's standard dummy text printer took a galley of type and scrambled</h4>
  <img src="img/icon_128.png" width="128px" alt="">
  <h3>We are testing</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesf own printer.</p>
 </section>
 <script src="js/main.js"></script>
</body>
</html>

Screenshot Test2: Content before the large JS file is rendered. The rest has to wait until the JS finishes downloading

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <section>
  <h2>testing</h2>
  <h4>Lorem Ipsum has been the industry's standard dummy text printer took a galley of type and scrambled</h4>
  <img src="img/icon_128.png" width="128px" alt="">
  <script src="js/main.js"></script>
  <h3>We are testing</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesf own printer.</p>
 </section>
</body>
</html>

Den Isahac · Answer 2 · 2017-07-06T16:38:22.980

When you place javascript in the footer of the page; i.e. before the closing</body> without hte defer/async attribute then it is render blocking.

When the browser constructs the DOM and reads a script tag even in the footer and without the defer/async attribute, then, the browser can only continue the construction of the DOM if the script is completely downloaded.

Note that the DOM construction is not yet visible in the browser, until the browser paints the result.

The browser goes to 4 major steps before we can actually see the results.

DOM and CSSOM constructions.
Render Tree
Layout - computes the exact position and size of each object.
Paint - is the last step; renders the resulting pixels to the screen.

Links for Removing Render-Blocking Javascript and Render-tree Construction, Layout, and Paint

score -2 · Answer 3 · answered Jul 06 '17 at 15:52

Generally, every script is a blocker, but it is better to hold js in the footer.

Html page is executed by browser line by line as like as your code. If your script will be in the footer - that means that everything that before this script - is already rendered.

Is a script in the footer "render-blocking"?

3 Answers3

The browser goes to 4 major steps before we can actually see the results.