jQuery Profiling

Purpose

This document outlines my attempt at trying to troubleshoot/resolve some UI issues in a web application built using jQuery.

Problem

In particular, we have one page that displays a list of fields that represent columns in a file. The list is retrieved via Ajax based on a drop down selection of files. There is a significant degredation of performace when loading a list with a large data set. And the problem increases when selecting a new file to load or leaving (unload) the page.

Data

The data being retrieved is in the form of:

<div>
  <input type="radio" name="tfId" id="tfId1" value="182"/>
  <label for="tfId1">column name</label>
</div>

Steps

The following is a list of pages I created to represent various attempts at identifying and resolving the issue.

• Original - the page that started it all
• Remove Livequery - same page, but using manual event binding/unbinding
• innerHTML - same as above and use innerHTML to wipe out data before appending new content.
• Unload - same as above and use onbeforeunload to remove bound events function.