1

First Way:

<script type="text/javascript" src="jquery.js"></script>

Second Way:

var js = document.createElement("script");
js.type = "text/javascript";
js.src = "jquery.js";
js.async = false;//THIS ATTRIBUTE

var h = document.getElementsByTagName("head")[0];
h.parentNode.appendChild(js);

Question: What is the difference between above two ways. Google Page Speed Insight Tool doesn't complain about First Way as Render blocking issue.

FYI: We have to load jQuery file without async because GTM is dependent upon it.

Improve this question
12
  • Where and how are you running the "Second Way" above? Commented Aug 4, 2017 at 4:35
  • 1
    "FYI: We have to load jQuery file without async because GTM is dependent upon it." All that means is that you need to load GTM after jQuery. It doesn't mean you have to load jQuery synchronously. Commented Aug 4, 2017 at 4:37
  • 1
    @T.J.Crowder: I run it in place of First Way at the top of page and before GTM. And GTM is loaded async. So, jQuery can't be async as well. Commented Aug 4, 2017 at 4:38
  • 1
    GTM is Google Tag Manager. Its not just Google Tag Manager that I have to load but also Google Optimize and Google Analytics for Google Experiments. And they all load async. Commented Aug 4, 2017 at 4:48
  • 1
    That's fine. There's no reason you can't have multiple <script src="..." async></script> tags. Which is almost certainly what Google means; if you look deeper in the documentation, you should find actual examples. Commented Aug 4, 2017 at 4:49

2 Answers 2

Reset to default
2

The WHAT-WG HTML spec goes into great detail about how scripts are loaded.

The fundamental difference — try not to laugh — is that the one is part of the HTML and the other is generated by JavaScript code.

With the script tag in the HTML:

  • The browser can discover and begin downloading (but not executing) the script in parallel with the DOM builder until the DOM builder reaches that point in the token stream
  • The script is also allowed to use document.write without blowing away the document
  • The main JavaScript UI thread isn't held up until the script is actually executed

When you add the script element with JavaScript code with async = false:

  • The browser can't pre-download it
  • The script can't use document.write without blowing away the document
  • The main JavaScript UI thread is blocked waiting for the download, not just when the script is executing

While it's true that <script src="..."></script> without the async or defer attribute (e.g., a blocking script tag) blocks page load, the impact can be less severe.

That said, I'd be very surprised if PageSpeed doesn't complain about a blocking script tag in the head. Without very good reason to do something else, blocking script tags should be at the end of body, just prior to the closing </body> tag.

From the comments, it seems you're using Google scripts, and you've said they want the script tags in head. They probably mean for you to use defer (to preserve order between the scripts):

<script src="jquery.js" defer></script>
<script src="gtm.js" defer></script>

...in head. defer means that the scripts don't hold up the DOM (they download in parallel but don't run until DOM parsing is complete), but do execute in order.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

As per new guidelines by Google, its script should load async and at the top of head tag to avoid any page tracking miss. Also, I using Google Experiments so I have to load it as early as possible to avoid FLASH of document.
@iMatoria: (Please don't mark up non-code as code, it impairs readability.) Perhaps you could refer us to the doc in question. I would expect them to suggest defer, not async, if there's dependency between the scripts.
-1

For 1st method : There are several ways an external script can be executed.

  • If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)
  • If async is not present and defer is present: The script is executed when the page has finished parsing
  • If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page

For 2nd method

  • async:false = Code paused. (Other code waiting for this to finish.)
  • async:true = Code continued. (Nothing gets paused. Other code is not waiting.)
Improve this answer

2 Comments

Yea, we know it. But, question is in relation to script tag.
I doubt that is entirely correct because Google Page Speed Insight doesn't complain about the Second way for Render blocking script. I believe Second way doesn't completely block the thread.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.