JavaScrip - DOM - document.write

javascript-dom

https://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/ - done reading but still need to read the comments
http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
https://developers.google.com/analytics/devguides/collection/gajs/?csw=1

document.write

We should avoid document.write (especially for script insertion) because:
1. It causes performance issue for the browser.  Effective as of version 53 or
   54, Chrome do not execute scripts injected via document.write when certain
   conditions are met (poor network connectivity, the script is parser-blocking
   and is not already in the browser cache).

Beside the issue with using document.write for script insertion, there is really
no compelling reason for not using document.write.  It has the same limitation
as using innerHTML (injecting a string of HTML which may not be valid).  Other
reason may include the fact that if document.write is executed after the page
is loaded, it will overwrite the existing page, but this is a logic problem (we
just have to make sure that we only use document.write when the page is not
yet fully loaded).

Although the browser is beginning to block document.write for script insertion,
it is not blocking document.write for all usages (although the browsers may
block document.write for all usages in the future), knowing when to use 
document.write may be beneficial in some circumstances.  Other reason for not
using document.write: When we use document.write, the browser has to stop its 
normal parsing, and parse the supplied HTML, so using document.write may have
some impact on performance but that is a relative thing.

document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");
document.write(Date());

document.open();
document.write("<h1>Hello World</h1>");
document.close();

// Using document.write to load scripts:
document.write('<script src="' + src + '" type="text/javascript"><\/script>'):
document.write('<script src="https://example.com/script.js"></script>');

Do not use document.write to load scripts.  The problem with document.write for 
script loading is:

1. Every DOM element below the inserted script is blocked from rendering until 
   the script is done downloading.
2. It blocks other dynamic scripts. One exception is if multiple scripts are 
   inserted using document.write within the same SCRIPT block

The reason why document.write to dynamically insert scripts produce these bad 
performance effects:

1. The normal script tag (without the async or defer attribute) blocks rendering for 
    all subsequent DOM elements.
2. document.write is evaluated immediately before script execution releases control 
   and the page resumes.  If we use document.write inside a script tag that has
   the defer or async attribute, the document.write may end up being executed 
   after the page is fully loaded, and therefore overwrite the page completely.

// Instead of using document.write for script insertion, we can use:
var sNew = document.createElement("script");
sNew.async = true;
sNew.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js";
var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(sNew, s0);

The above code is known as the createElement-insertBefore pattern.  This was 
popularized by the Google Analytics async snippet.  Scripts inserted using the 
createElement-insertBefore technique do not block rendering. In fact, if document.write 
generated a createElement-insertBefore snippet then rendering would also not be 
blocked.

See the comments at the bottom of
https://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/ for
reasons on why document.write should be deprecated.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License