Stack Overflow
Stack Overflow

document.createElement('script') vs – webjay Feb 02 '13 at 21:36

  • 1
    @axel.michel standards say script tag should be ignored when there is no js support available – Parv Sharma Feb 02 '13 at 21:38

    • 3 Answers3

    32

    The <script src=...> blocks the browser while document.createElement('script') loads the JavaScript asynchronously; this is the primary reason.

    The <script src=...> tag blocks browser from displaying rest of the page until the script is loaded and executed. This ensures that scripts are executed in correct order and any document.write() in that script work as expected. However this creates a laggy browsing experience for the user.

    When the script is loaded asynchronously, the browser can download the script without blocking the page display. This improves the browsing experience dramatically.

    To load the scripts asynchronously one can use HTML markup:

    <script src="..." async defer></script>

    The async attribute was introduced in HTML5 while the defer attribute can be added as a fallback for older versions of IE. This document describes how async and defer attribute work.

    Alternately, one can use JavaScript to build a script tag:

    var s = document.createElement('script');
s.src = "...";
document.getElementsByTagName("head")[0].appendChild(s);

    JavaScript generated script tags work in most browsers even if they do not understand the async attribute or .async = true property.

    About schemeless URIs (//example.com/script.js): schemeless URIs seem to work almost everywhere (see this question).

    About the Google Analytics example: both old and new code use JavaScript to detect the protocol then load http://www. or https://ssl. which is not possible via HTML markup.

    Community
    • 1
    • 1
    Salman A
    • 262,204
    • 82
    • 430
    • 521
    • 1
      excellent, so provided I only care about users riding recent browsers and if my site is only available via HTTP the best approach would be `` and perhaps even put it in the bottom of the page. – webjay Feb 02 '13 at 22:13
    • @webjay Also note the facebook script contains additional logic: it checks it the script was already added to the page, and don't add it again if that's the case. – bfavaretto Feb 02 '13 at 22:14
    • Yes, doesn't even have to be on the bottom! – Salman A Feb 02 '13 at 22:16
    • I don't see a reason why you would add defer to a script tag at the end of the document. See here my reason's for that: https://stackoverflow.com/questions/47065664/is-google-using-defer-the-wrong-way – Maarten Bruins Nov 02 '17 at 18:08
    • @MaartenBruins a synchronous script placed at the end could still take seconds to download (or minutes or not download at all) and delay the dom loaded event in the mean time. – Salman A Nov 03 '17 at 11:08
    • @SalmanA I know, but if the script tag is at the end of the document, then it has only influence on " – Maarten Bruins Nov 03 '17 at 11:35
    • @MaartenBruins I see your point but still... what if there are other scripts on the page that run on document ready? Their functionality will be blocked until that script is loaded. – Salman A Nov 03 '17 at 19:44
    • @SalmanA That's why i wrote "if you would have 1 script tag". Decisions are just depending on the situation. – Maarten Bruins Nov 03 '17 at 20:34
    2

    In addition to Salman A's excellent point about deferred loading this technique is used when the static solution won't work.

    • I've seen it used when caching is an issue (a unique time based hash is added to the URL)
    • In the case of the google link shown above SSL can be dynamically turned on.
    • In the facebook code it checks if the script already exists (this can avoid bugs where the same script is loaded twice).

    There can be other reasons too. All of them have to do with needing a dynamic solution.

    Hogan
    • 69,564
    • 10
    • 76
    • 117
    • I can't see a reason for the facebook code - if you will read my and you will – Parv Sharma Feb 02 '13 at 21:42
    • @ParvSharma - I didn't see a reason for the facebook code in your answer, but Salman A did give a compelling reason. – Hogan Feb 02 '13 at 21:59
    • this way websites can check whether the same script is present and then choose not to download it again as being done in facebooks example – Parv Sharma Feb 02 '13 at 22:00
    0

    yes that can be written in a script tag but the examples you have quoted are the ones where the website is providing user with some code block which they are required to copy paste in their websites
    so injecting is better because this way the website like google and facebook

    1.as you can see in the googles example you have provided it dynamically detectes http OR https

    2. this way websites can check wethther the same script is present and then choose not to download it again as being done in facebooks example

    3. have more control over what is being injected. as the script that is being injected can be changed dynamically without users being required to change the url of the script being injected and this is necessary as many browsers just keep the scripts in cache

    4.this way these websites keep their codes sort and less prone to user interference

    Parv Sharma
    • 12,581
    • 4
    • 48
    • 80