So I had a page, (actually it's for my home built tivo) that took forever to load because each time it loaded it would re-generate the content. The page listed all the programs currently recorded on the system, (which can get get quite large as I don't get around to watching many things for a while. ) But the problem was that on the top of the page it listed each category and how many files were in it. This data was not known until the page had fully loaded, so I had to buffer all the content and then build the header and finally display the list of files.

Depressingly this could take many seconds to load. It was quite irritating and started to make my wife think the system was too slow to use. My fix for this was two fold. First I put the list of the files into a database table that is frequently updated. This lets me skip doing a ls command over the lan. This saves some time. But the big thing I did to improve the perceived speed of the list page was to use dynamic html.

Rather than waiting until I have loaded the whole list to display the category headers I display empty ones at the top of the page then use javascript commands at the end of the page to update the values and hide empty ones. This way the user sees the page start loading immediately, and since most often you are looking for stuff on the top of the page ( most recently recored) you see what you want right away. The perceived load time drops to less than a second. (even if it might be much longer till the page is completely loaded. )

The procedure for this is quite simple. At the top of the page I display all the possible category links.

<a id='70s' href=listmovies.cgi?filter=70s>That '70s Show()</a><span id='line_70s' > | </span>
<a id='Aeon' href=listmovies.cgi?filter=Aeon>Aeon Flux()</a><span id='line_Aeon' > | </span>
.......

Each line is a category link. It has an ID set to it that is unique. the ID is used later by the javascript. This code is generated by a perl foreach script .

At the end of the load , the perl then runs back through the categories and updates the text to indicate the current total.

<script>
var link = document.getElementById("70s");
link.textContent="That '70s Show(26)";
link = document.getElementById("Aeon");
link.textContent="Aeon Flux(7)";
.....

link = document.getElementById("Brady");
link.textContent="";
link = document.getElementById("line_Brady");
link.textContent="";

foreach (sort keys %FILTER)
  {
   if ($CAT{$_} eq "")
   {
   print "link = document.getElementById(\"$_\");\n";
   if ($HIT{$_}>0)
          { print "link.textContent=\"$NAME{$_}(".$HIT{$_}.")\";\n";}
       else
          { print "link.textContent=\"\";";
            print "link = document.getElementById(\"line_$_\");"; ## this blanks out extra |'s
            print "link.textContent=\"\";";
          };
   }; ## if this isn't a catagory

  }