Tag Archives: TextArea

Fast output into TextArea

Posted by on October 7, 2010 No comments

Note: The example here has been written in VBScript, but the principles should apply to JavaScript as well.

While I was working on the KML generator for work, I wanted a text log to show errors if they came up.  The information wasn’t important enough to save to a file, but it needed to be displayed to the user.  However, as the HTA would go through data, the speed at which the log file would update would become slower and slower, eventually appearing to lock up.  Considering it was dealing with approx. 500kb across three CSV files, this was not acceptable.

Here is a simplified version of the HTA script:

<HEAD>
  <TITLE>KML Generator</TITLE>
  {Omitted}
</HEAD>
<SCRIPT LANGUAGE="VBScript">
Do Until (conditions)
  {Code}
  realTimeOutput.value = realtimeinfo.value & "Message. " & vbCrLf
  Loop
</SCRIPT>
<BODY>
   <textarea id="realTimeOutput" readonly>Waiting for data.</textarea>
</BODY>

The code in red is fine for a quick addition, but terrible for fast successive additions to the textarea.  The content of the textarea was being copied, the addition appended, then the entire value was being written back in.  So, after several searches and attempting other re-workings of that same idea, I found this method of doing it:

realTimeOutput.appendChild(document.createtextnode("Message" & vbCrLf))

In this case everything (except vbCrLf) is carried out via DOM functions, allowing the text to be appended into the textarea without copying everything already in there.  The speed difference was very apparent, as what would come to a near-lockup was now instant.  It seems unusual to create a new text node just to add text, but it’s the only way to update the textarea via the DOM.  In a more memory-sensitive environment, you could assign the node to a variable and null it out as needed. But honestly, at that point I’d ask why VBScript is still being used.