Go to:  Site entry | Site contents | Site index | Internet | JavaScript | Text bottom

Productivity  Issues  of  the  "document.write"

The document.write operator (err, the "write" method of the "document" object) feeds the browser with the text that is actually the concatenation of its arguments.  Normally you would feed browser with HTML text that presents the page you want to construct.  The arguments of the document.write can be both strings and variables which makes it possible to create a part of a page (or entire page) dynamically.

There is one problem, however, with using many document.writes to build page dynamically: the more document.writes you use the slower page loads.  I got stuck completely with the attempt to build a page representing a 19x19 Go board.  It worked fine, but its loading time was far beyond what was acceptable.  This was a real roadblock of my plans to have the extensive Go section at Davar Web Site.  I turned to my children for help and finally after long discussions my elder son Daniel suggested that document.write might be inherently slow and that I would be better off using less document.writes (obviously with larger arguments to generate the same content)..

I wasn't much hopeful when I was making pages for a comparative test, but I had nothing better to try (needless to say that I have searched the newsgroups, but didn't find any discussion of that problem).  To go even further I avoided multiple arguments for document.write concatenating the entire table into single string (I used a repetitive element of a Go board to simplify the testing).

The difference in performance turned out to be quite impressive for a 450 Mhz processor: 1520 seconds for loading the page constructed with individual document.writes versus 35 seconds for loading the page constructed with single document.write having the entire table string as its only argument.  While 1520 seconds for page loading is definitely unacceptable, 35 second is just a little slow (most commercial pages stuffed with advertisement you never asked for load even longer).

This test shows clearly that document.write has a significant overhead and that page loading time can in most cases be improved simply by reducing the number of document.writes which are used for page construction.  There is no doubt that quicker processors will make this difference less noticeable, but then again why compete with Windows in wasting processor time you can't beat them at that.  From the programmer's point of view there is no difference at all it's simply the matter of adopting a certain style of using document.writes which results in a more effective code.  In my opinion, the effective code is always better than ineffective, regardless of the noticeability of the difference in results it's simply a good programming practice to think always about code effectiveness which pays off in the long run.

Below there is code for both test pages used in the comparison experiment described above.



<!-- Test Individual JavaScript "document.writes"  07/03/200011/21/2000 -->
<!-- -------------------------------------------------------- 11/21/2000 -->
<!-- www.davar.net/INTERNET/JAVA-SCR/TEST-IDW.HTM                        -->

<HTML>
<HEAD>
  <TITLE>Test Individual JavaScript "document.writes" (JavaScript at Davar Web Site)</TITLE>
  <META HTTP-EQUIV="Content-Type" CONTENT="Text/HTML; CharSet=ISO-88591">
  <META NAME   = Description
        CONTENT   ="Page: Test Individual JavaScript "document.writes".
                    Site: Davar Web Site,
                          Computer Science, Programming, Mainframe, Client/Server, PC, Internet,
                          Mathematics, Go, Zen, Quotations, Extracts, Humor, Russian.">
  <META NAME   = Keywords
        CONTENT   ="Davar Web Site, JavaScript, document.write">
  <META NAME   = Author CONTENT="Vladimir Veytsel">
  <LINK REV    = Made   HREF   ="mailto:nobody@nowhere.net">
</HEAD>

<!-- Page: Test Individual JavaScript "document.writes".
     Site: Davar Web Site,
           Computer Science, Programming, Mainframe, Client/Server, PC, Internet,
           Mathematics, Go, Zen, Quotations, Extracts, Humor, Russian. -->

<FONT FACE="Times New Roman" SIZE=3>
  <CENTER>
    <FONT SIZE=4 COLOR=Red><B><U>Test&nbsp; Individual&nbsp; JavaScript&nbsp; "document.write"s</U></B></FONT>
    <BR>&nbsp;
    <TABLE>
      <TR>
        <TD WIDTH=700>
          <P ALIGN=Justify>Every element of the table is used as an argument of
             a <B>document.write</B> that creates HTML code for the <U>individual</U>
             table cell.&nbsp; The <U>entire</U> table is the result of multiple
             <B>document.write</B>s.&nbsp; (Page loading/reloading time is
             noticeably <U>longer</U> than that for the test which uses <A HREF="TEST-JDW.HTM">joined</A>
             <B>document.write</B> to create HTML code for <U>each</U> element
             of the table).
          </P>
        </TD>
      </TR>
    </TABLE>
    <BR>
    <SCRIPT LANGUAGE=JavaScript>
      <!--
        document.write("<TABLE BORDER=1 CELLSPACING=0>")
        for (i=1;i<20;i++)
            {document.write("<TR>")
             for (j=1;j<20;j++)
                 {document.write("<TD><IMG SRC='EC.JPG' WIDTH=33 HEIGHT=33></TD>")}
             document.write("</TR>")
            }
        document.write("</TABLE>")
      //-->
    </SCRIPT>
    <BR>
    Use [<FONT COLOR=Red>Back</FONT>] button or
    [<FONT COLOR=Red>Alt</FONT>]+[<FONT COLOR=Red>CL</FONT>] to return to the
    previous page
  </CENTER>
</FONT>
</BODY>
</HTML>
  


<!-- Test Joined JavaScript "document.writes"  07/03/200011/21/2000 -->
<!-- ---------------------------------------------------- 11/21/2000 -->
<!-- www.davar.net/INTERNET/JAVA-SCR/TEST-JDW.HTM                    -->

<HTML>
<HEAD>
  <TITLE>Test Individual JavaScript "document.writes" (JavaScript at Davar Web Site)</TITLE>
  <META HTTP-EQUIV="Content-Type" CONTENT="Text/HTML; CharSet=ISO-88591">
  <META NAME   = Description
        CONTENT   ="Page: Test Individual JavaScript "document.writes".
                    Site: Davar Web Site,
                          Computer Science, Programming, Mainframe, Client/Server, PC, Internet,
                          Mathematics, Go, Zen, Quotations, Extracts, Humor, Russian.">
  <META NAME   = Keywords
        CONTENT   ="Davar Web Site, JavaScript, document.write">
  <META NAME   = Author CONTENT="Vladimir Veytsel">
  <LINK REV    = Made   HREF   ="mailto:nobody@nowhere.net">
</HEAD>

<!-- Page: Test Individual JavaScript "document.writes".
     Site: Davar Web Site,
           Computer Science, Programming, Mainframe, Client/Server, PC, Internet,
           Mathematics, Go, Zen, Quotations, Extracts, Humor, Russian. -->

<FONT FACE="Times New Roman" SIZE=3>
  <CENTER>
    <FONT SIZE=4 COLOR=Red><B><U>Test&nbsp; Joined&nbsp; JavaScript&nbsp; "document.write"</U></B></FONT>
    <BR>&nbsp;
    <TABLE>
      <TR>
        <TD WIDTH=700>
          <P ALIGN=Justify>All elements of the table are <U>joined</U> (concatenated)
             into <U>one</U> string which is used as an argument of a <U>single</U>
             <B>document.write</B> that creates HTML code for the <U>entire</U>
             table.&nbsp; (Page loading/reloading time is noticeably <U>shorter</U>
             than that for the test which uses <A HREF="TEST-IDW.HTM">individual</A>
             <B>document.write</B>s to create HTML code for <U>each</U> element
             of the table).
          </P>
        </TD>
      </TR>
    </TABLE>
    <BR>
    <SCRIPT LANGUAGE=JavaScript>
      <!--
        Buffer="<TABLE BORDER=1 CELLSPACING=0>"
        for (i=1;i<20;i++)
            {Buffer=Buffer+"<TR>"
             for (j=1;j<20;j++)
                 {Buffer=Buffer+"<TD><IMG SRC='EC.JPG' WIDTH=33 HEIGHT=33></TD>"}
             Buffer=Buffer+"</TR>"
            }
        Buffer=Buffer+"</TABLE>"
        document.write(Buffer)
      //-->
    </SCRIPT>
    <BR>
    Use [<FONT COLOR=Red>Back</FONT>] button or
    [<FONT COLOR=Red>Alt</FONT>]+[<FONT COLOR=Red>CL</FONT>] to return to the
    previous page
  </CENTER>
</FONT>
</BODY>
</HTML>
  

View Individual "document.write" page       View [and save] TEST-IDW.TXT text
View      Joined "document.write" page       View [and save] TEST-JDW.TXT text
(Use [Back] button or [Alt]+[CL] to return here from page/text view)
To make each text executable rename it to *.HTM and
make a global change of "&lt;" into "<" signs and "&amp;" into "&" signs.
Go to:  Site entry | Site contents | Site index | Internet | JavaScript | Text top