Introduction
As PHP developers we were asked to optimize a JavaScript list page that had thousands of entries. The page needed to allow the categorization and sub-categorization of all of these entries, which in the existing implementation, involved on the order of n^3 possible combinations...
The client was using an interface similar to this triple combo box script, but with selection boxes instead of combo boxes, as well as a small amount of custom PHP and MySQL work. This solution had worked well for a while, but as the needs of our client and the size of the list grew the pages were becoming unmanageably slow.
After switching the client from Internet Explorer to Mozilla/Firefox, which had a different Javascript implementation, the interface seemed much faster, and the client was happy for a while, as were we because it seemed to be an easy solution.
Then we started to notice that we were missing entries in our arrays at random intervals because of faulty garbage collection (memory management) We looked for memory optimization techniques, as well as ways to control the garbage collector, but in the end we decided that the real problem was that Javascript could not handle the amount of information that we were throwing at it.
The amount of data that we were managing meant that, in Internet Explorer, page loading and initialization would take several minutes, and both Mozilla and Firefox, though faster, were randomly deleting array elements through their Javascript garbage collection process. So we decided to simplify the code, and reduce the Javascript to a minimum by getting entries from the server as they were needed. This reduced page load times and improved interactivity by orders of magnitude. And, since we didn't want the page to refresh every time a browser clicked on a new category, we reloaded hidden iframes instead. The following simplified code illustrates how this works.
See it Work
Here is a demo of this code in action
Conclusion
With a little tweaking, and by adding your own data and features, using iFrames to pass information from the client to the server and back again can be a great way to maximize the efficiency of a triple combo box interface, especially when dealing with larger data sets, without requiring any additional page loads.
If you have a blog or website and liked this page and found it useful, please take a few minutes to link to it. We like links. Otherwise, please contact us with comments, suggestions, and/or encouragement.
|
