Productivity Issues of document.write (Internet JavaScript at Davar Web Site)

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: 15–20 seconds for loading the page constructed with individual document.writes versus 3–5 seconds for loading the page constructed with single document.write having the entire table string as its only argument. While 15–20 seconds for page loading is definitely unacceptable, 3–5 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.

<HTML> <HEAD> <TITLE>Test Individual JavaScript "document.writes" (JavaScript at Davar Web Site)</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="Text/HTML; CharSet=ISO-8859-1"> <META NAME = Description CONTENT ="Page: Test Individual JavaScript "document.writes". Site: Davar Web Site, Computer Science, Programming, Mainframe, UNIX, 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>  <CENTER> Test  Individual  JavaScript  "document.write"s   <TABLE> <TR> <TD WIDTH=700> Every element of the table is used as an argument of a document.write that creates HTML code for the individual table cell.  The entire table is the result of multiple document.writes.  (Page loading/reloading time is noticeably longer than that for the test which uses <A HREF="TEST-JDW.HTM">joined</A> document.write to create HTML code for each element of the table). </TD> </TR> </TABLE> <SCRIPT LANGUAGE=JavaScript>  </SCRIPT> Use [Back] button or [Alt]+[CL] to return to the previous page </CENTER> </BODY> </HTML>

<HTML> <HEAD> <TITLE>Test Individual JavaScript "document.writes" (JavaScript at Davar Web Site)</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="Text/HTML; CharSet=ISO-8859-1"> <META NAME = Description CONTENT ="Page: Test Individual JavaScript "document.writes". Site: Davar Web Site, Computer Science, Programming, Mainframe, UNIX, 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>  <CENTER> Test  Joined  JavaScript  "document.write"   <TABLE> <TR> <TD WIDTH=700> All elements of the table are joined (concatenated) into one string which is used as an argument of a single document.write that creates HTML code for the entire table.  (Page loading/reloading time is noticeably shorter than that for the test which uses <A HREF="TEST-IDW.HTM">individual</A> document.writes to create HTML code for each element of the table). </TD> </TR> </TABLE> <SCRIPT LANGUAGE=JavaScript>  </SCRIPT> Use [Back] button or [Alt]+[CL] to return to the previous page </CENTER> </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 "<" into "<" signs and "&" into "&" signs.