79739

What is the difference between dynamically creating a script tag and statically embed a script tag?

Question:

I know lots of web analytic tools use the following script to create a script tag dyanmically:

<script type="text/javascript"> var s = document.createElement( 'script' ); s.type = 'text/javascript'; s.src = 'http://s/s.js'; document.body.appendChild( s );</script>

My Question is if there is a difference if I embed the script statically like the following:

<script type="text/javascript" src="http://s/s.js"></script>

Answer1:

They do it so that it loads asynchronously, or at least so it is only loaded once the normal JS has loaded and been executed. It avoids making the rendering tree wait for this JS to load so the page is quicker.

Answer2:

When you statically embed a script tag the file is downloaded when the browser passes through the script tag defined in the dom. Further processing of the html doc is stopped till the js file is downloaded which might slow down the page load time and that is why it is suggested to keep your script tags at the end of the dom

But by adding it to the DOM dynamically you ensure that the script file is downloaded only when the javascript is run. Note this code is executed when it is encountered in the DOM and thus having it in the middle of the html file will still block further rendering of the page.

Recommend

  • Auto-configure routes with Zuul and Eureka
  • Remove alt-codes from string
  • Failed to sync gradle project (Unknown host 'services.gradle.org')
  • Azure ARM DSC scale set deployment - cannot locate script
  • Error With Dynamically Created SQL Insert statement
  • Updating price of in app purchase
  • Wordpress plugins it asks for FTP Details
  • how to transform dataframe that contains list in every row of each column
  • NodeJS - installing local module
  • Joining across databases with dbplyr
  • how to add Image in JPanel
  • Avoiding duplicated data in same table with jquery
  • Android NDK refer to external libraries in JNI
  • How to manipulate content of a comment with Apache POI
  • Can someone explain how Yii minimizing assets is supposed to work on Heroku?
  • How exactly do you use json_decode to pass a javascript array to php?
  • SELECT on JSONField with Django
  • Jekyll - How do I create pages in the root directory?
  • Check 'Manager can update membership list' in AD
  • Using loops in Jasmine (with injected service)
  • How to search for a method or variable name within android project?
  • Why am I getting an Argument exception when creating event handler dynamically?
  • Smarter Removing Unnecessary WhiteSpace CSV
  • Write to elasticsearch from spark is very slow
  • Bison does not appear to recognize C string literals appropriately
  • Authorize Attribute Authentication with Postman in Web Api
  • cSPADE data mining in R using arulesSequences - Error while converting to “transactions” format
  • Swift manually rotate view controller
  • How to use AJAX to upload large CSV file? [closed]
  • 'Edit' function for forum posts and such
  • Annotate objects in a queryset with next and previous object ids
  • How to write seo friendly url's using htaccess?
  • Typeahead.js does give me suggestions but doesn't select them
  • How to split wav file into two or more parts using c#
  • Content-Type alternative in MQTT
  • I am consuming a WCF service that requires headers from a .NET 2 website. How can I programmatically
  • Cloud Code: Creating a Parse.File from URL
  • How to encrypt Connectionstring written in web.config from codebehind?
  • Call Microservice from another Microservice within Docker
  • media foundation H264 decoder not working properly