Why is document write considered a bad practice

Question

I know document write is considered bad practice  and I m hoping to compile a list of reasons to submit to a 3rd party vendor as to why they shouldn t use document write in implementations of their analytics code   Please include your reason for claiming document write as a bad practice below

User · Answer

Off the top of my head    document write needs to be used in the page load or body load   So if you want to use the script in any other time to update your page content document write is pretty much useless  Technically document write will only update HTML pages not XHTML XML   IE seems to be pretty forgiving of this fact but other browsers will not be    http   www w3 org MarkUp 2004 xhtml-faq docwrite

User · Answer

Based on analysis done by Google-Chrome Dev Tools  Lighthouse Audit       For users on slow connections  external scripts dynamically injected via document write   can delay page load by tens of seconds

User · Answer

I don t think using document write is a bad practice at all  In simple words it is like a high voltage for inexperienced people  If you use it the wrong way  you get cooked  There are many developers who have used this and other dangerous methods at least once  and they never really dig into their failures  Instead  when something goes wrong  they just bail out  and use something safer  Those are the ones who make such statements about what is considered a  Bad Practice    It s like formatting a hard drive  when you need to delete only a few files and then saying  formatting drive is a bad practice

User · Answer

A few of the more serious problems    document write  henceforth DW  does not work in XHTML DW does not directly modify the DOM  preventing further manipulation  trying to find evidence of this  but it s at best situational  DW executed after the page has finished loading will overwrite the page  or write a new page  or not work DW executes where encountered  it cannot inject at a given node point DW is effectively writing serialised text which is not the way the DOM works conceptually  and is an easy way to create bugs   innerHTML has the same problem    Far better to use the safe and DOM friendly DOM manipulation methods

User · Answer

One can think of document write    and  innerHTML  as evaluating a source code string  This can be very handy for many applications  For example if you get HTML code as a string from some source  it is handy to just  evaluate  it   In the context of Lisp  DOM manipulation would be like manipulating a list structure  e g  create the list  orange  by doing    cons  orange        And document write   would be like evaluating a string  e g  create a list by evaluating a source code string like this    eval-string   cons  orange          Lisp also has the very useful ability to create code using list manipulation  like using the  DOM style  to create a JS parse tree   This means you can build up a list structure using the  DOM style   rather than the  string style   and then run that code  e g  like this    eval   cons  orange         If you implement coding tools  like simple live editors  it is very handy to have the ability to quickly evaluate a string  for example using document write   or  innerHTML  Lisp is ideal in this sense  but you can do very cool stuff also in JS  and many people are doing that  like http   jsbin com

User · Answer

A simple reason why document write is a bad practice is that you cannot come up with a scenario where you cannot find a better alternative  Another reason is that you are dealing with strings instead of objects  it is very primitive   It does only append to documents  It has nothing of the beauty of for instance the MVC  Model-View-Controller  pattern  It is a lot more powerful to present dynamic content with ajax jQuery or angularJS

User · Answer

It breaks pages using XML rendering  like XHTML pages    Best  some browser switch back to HTML rendering and everything works fine    Probable  some browser disable the document write   function in XML rendering mode   Worst  some browser will fire an XML error whenever using the document write   function

User · Answer

It can block your page  document write only works while the page is loading  If you call it after the page is done loading  it will overwrite the whole page   This effectively means you have to call it from an inline script block - And that will prevent the browser from processing parts of the page that follow  Scripts and Images will not be downloaded until the writing block is finished

User · Answer

Another legitimate use of document write comes from the HTML5 Boilerplate index html example    lt  -- Grab Google CDN s jQuery  with a protocol relative URL  fall back to local if offline -- gt   lt script src    ajax googleapis com ajax libs jquery 1 6 3 jquery min js  gt  lt  script gt   lt script gt window jQuery    document write   lt script src  js libs jquery-1 6 3 min js  gt  lt   script gt    lt  script gt    I ve also seen the same technique for using the json2 js JSON parse stringify polyfill  needed by IE7 and below     lt script gt window JSON    document write   lt script src  json2 js  gt  lt   script gt    lt  script gt

User · Answer

It overwrites content on the page which is the most obvious reason but I wouldn t call it  bad    It just doesn t have much use unless you re creating an entire document using JavaScript in which case you may start with document write   Even so  you aren t really leveraging the DOM when you use document write--you are just dumping a blob of text into the document so I d say it s bad form

User · Answer

Pro    It s the easiest way to embed inline content from an external  to your host domain  script  You can overwrite the entire content in a frame iframe   I used to use this technique a lot for menu navigation pieces before more modern Ajax techniques were widely available  1998-2002     Con    It serializes the rendering engine to pause until said external script is loaded  which could take much longer than an internal script  It is usually used in such a way that the script is placed within the content  which is considered bad-form

User · Answer

There s actually nothing wrong with document write  per se   The problem is that it s really easy to misuse it   Grossly  even   In terms of vendors supplying analytics code  like Google Analytics  it s actually the easiest way for them to distribute such snippets   It keeps the scripts small They don t have to worry about overriding already established onload events or including the necessary abstraction to add onload events safely It s extremely compatible   As long as you don t try to use it after the document has loaded  document write is not inherently evil  in my humble opinion

User · Answer

Here s my twopence worth  in general you shouldn t use document write for heavy lifting  but there is one instance where it is definitely useful    http   www quirksmode org blog archives 2005 06 three javascrip 1 html  I discovered this recently trying to create an AJAX slider gallery  I created two nested divs  and applied width height and overflow  hidden to the outer  lt div gt  with JS  This was so that in the event that the browser had JS disabled  the div would float to accommodate the images in the gallery - some nice graceful degradation    Thing is  as with the article above  this JS hijacking of the CSS didn t kick in until the page had loaded  causing a momentary flash as the div was loaded  So I needed to write a CSS rule  or include a sheet  as the page loaded    Obviously  this won t work in XHTML  but since XHTML appears to be something of a dead duck  and renders as tag soup in IE  it might be worth re-evaluating your choice of DOCTYPE

User · Answer

Browser Violation  write is considered a browser violation as it halts the parser from rendering the page  The parser receives the message that the document is being modified  hence  it gets blocked until JS has completed its process  Only at this time will the parser resume  Performance The biggest consequence of employing such a method is lowered performance  The browser will take longer to load page content  The adverse reaction on load time depends on what is being written to the document  You won t see much of a difference if you are adding a  lt p gt  tag to the DOM as opposed to passing an array of 50-some references to JavaScript libraries  something which I have seen in working code and resulted in an 11 second delay - of course  this also depends on your hardware   All in all  it s best to steer clear of this method if you can help it  For more info see Intervening against document write

User · Answer

Chrome may block document write that inserts a script in certain cases  When this happens  it will display this warning in the console      A Parser-blocking  cross-origin script       is invoked via   document write  This may be blocked by the browser if the device has   poor network connectivity    References    This article on developers google com goes into more detail  https   www chromestatus com feature 5718547946799104

User · Answer

The disadvantages of document write mainly depends on these 3 factors   a  Implementation  The document write   is mostly used to write content to the screen as soon as that content is needed  This means it happens anywhere  either in a JavaScript file or inside a script tag within an HTML file  With the script tag being placed anywhere within such an HTML file  it is a bad idea to have document write   statements inside script blocks that are intertwined with HTML inside a web page   b  Rendering  Well designed code in general will take any dynamically generated content  store it in memory  keep manipulating it as it passes through the code before it finally gets spit out to the screen  So to reiterate the last point in the preceding section  rendering content in-place may render faster than other content that may be relied upon  but it may not be available to the other code that in turn requires the content to be rendered for processing  To solve this dilemma we need to get rid of the document write   and implement it the right way   c  Impossible Manipulation  Once it s written it s done and over with  We cannot go back to manipulate it without tapping into the DOM

User · Answer

I think the biggest problem is that any elements written via document write are added to the end of the page s elements  That s rarely the desired effect with modern page layouts and AJAX   you have to keep in mind that the elements in the DOM are temporal  and when the script runs may affect its behavior    It s much better to set a placeholder element on the page  and then manipulate it s innerHTML

[javascript] Why is document.write considered a "bad practice"?

Examples related to javascript