Mark Leighton Fisher

LOINC's RELMA tool can display HTML details pages for each LOINC. Unfortunately, we have an over 800:1 file size ratio between the smallest set of details (like the Simple Display of 13308-2, Deprecated DNA) and the largest set of details (which may be the Comprehensive Display of 45981-8, MDS full assessment form - version 2.0, with 627 LOINCs totaling 13MB (300,000+ HTML DOM elements)).

Since we are speeding up RELMA by caching the generated pages, we decided to generate only 1 (one) file per LOINC and show/hide the various sections of the HTML using JavaScript. Previously, we generated a file for the Simple Display, the Comprehensive Display, and each type of Custom Display, re-using the filename for each display type so there was 1 (one) file created per LOINC but different file contents for each display type.

For standalone (non-panel/form/survey) LOINCs, showing/hiding the sections when showing/hiding by individual elements has acceptable performance. (Showing/hiding by individual element is the common case for the example JavaScript code you will see on the Web.) But for large panels (like the 13MB panel mentioned above), working with individual elements is far too slow (10+ minutes to finish rendering the page). A few notes on how to speed up your performance in this situation:

1. You need to show/hide sections by their CSS style, not by their individual element. This change (coupled with others mentioned below) reduced the HTML rendering time on my new PC of the 13MB file to 23s from 10+ minutes (26X+ speed increase).
2. Because LOINCs can have multiple sections that should be shown or hidden together, RELMA needed to show/hide by CSS rule name not element ID. (HTML element IDs must be unique.)
3. A 2X speed increase in RELMA's case was gained by creating a new array of all of the relevant CSS rules, then working with that array rather than the live collection of all of the CSS rules (we had about twice as many of "all rules" vs. "relevant rules").
4. 23s is still a long time to wait for an HTML page to render. This was reduced to 10s for the aforementioned 13MB LOINC by this JavaScript, which forces the browser to perform only 2 reflows (I think (not measured)) - the initial/on-load layout reflow and the re-layout at the end reflow:

    document.body.style.display = 'none';
 
    [.... show/hide by CSS rule name ...]
 
    document.body.style.display = 'block';

I was surprised that this document.body.style.display tactic is not more widely shown in example JavaScript - it is a long-standing tactic in the graphics world.

(This was tested on the embedded WebBrowser Windows control, Internet Explorer 9, and Firefox 6. As document.body.style.display is a part of DOM Level 2, this tactic should work on many browsers currently in use.)

This material contains content from LOINC® (http://loinc.org). The LOINC table, LOINC codes, and LOINC panels and forms file are copyright © 1995-2011, Regenstrief Institute, Inc. and the Logical Observation Identifiers Names and Codes (LOINC) Committee and available at no cost under the license at http://loinc.org/terms-of-use.