Best Practices

This page contains information on best-practices when developing web-based applications with JavaScript and/or WebCore.js.

Avoid document.getElementById()

The use of the document.elementById() method is strongly discouraged due to the fact that this method can be extraordinarily inefficient on certain browsers. Internet Explorer 6 (and possibly 7) have major performance issues with this method when used in combination with large DOM trees with large quantities of ids.

To workaround this issue, it is recommended that you retain references to DOM elements in your objects, and design around having to ever use document.getElementById() Be certain to remove all references to DOM elements before your object is dereferenced, or you may experience a very significant memory leak.

Do Not Use Internet Explorer CSS Expressions

Internet Explorer 6 does not provide support for four sided CSS positioning of elements, that is, the "left" and "right" and/or "top" and "bottom" style attributes may not be used in combination. The WebCore module provides a means to work around this issue in the form of Virtual Positioning.

There is another way to attempt to tackle this problem. IE6 has a proprietary feature called "CSS Expressions" wherein a line of JavaScript may be used to describe the value of a CSS property. An example:

width: expression((document.getElementById('xyz').offsetWidth - 200) + 'px');

The above would automatically make the width of an element 200 pixels less than the container width, assuming the container had id 'xyz'. This would fully rectify the four-sided CSS positioning issue, but for one significant problem.

The use of Internet Explorer CSS expressions has horrid performance consequences. All CSS expressions are recalculated after any JavaScript execution context is completed. Moving the mouse a single pixel will create a JavaScript execution context (to fire mousemove events, whether or not any listeners are interested) and cause all CSS expressions to be reevaluated. On even a moderate sized DOM with a dozen or so CSS expressions, performance degrades severely on state-of-the-art hardware.

This feature should never be used for any reason.

Test on Internet Explorer 6

If you are working with JavaScript or DOM manipulation in any capacity, make certain you test your work in Internet Explorer 6. Testing in IE7 is not adequate. Internet Explorer 6 has a large number of compatibility flaws, bugs, and the worst performance of any browser with measurable marketshare.

Test early in your development cycle and test often with IE6. Attempting to solve IE6-related issues with large bodies of code is an unpleasant experience at best. Ensure that performance is adequate on older/slower machines running IE6.

If you have a Windows computer with IE7 or later installed, testing with IE6 can be accomplished using a virtual machine. IEBlog has more information on this process and provides a VM disk image for Microsoft Virtual PC (free) here: http://blogs.msdn.com/ie/archive/2006/11/30/ie6-and-ie7-running-on-a-sin...

If you have a Linux or Macintosh computer, it is practical to install Internet Explorer 6 using Wine. This can be quickly accomplished using the IEs4Linux tool, which entirely automates the installation process.