jquery memory cleanup ideas

jquery memory cleanup ideas

Hello,

I built a single page template that essentially just uses ajax to bring in the next pages content when the user navigates. Everything is working well but each page contains a lot of javascript. Some pages have up to 50+ events. After some time though there seems to be a huge build up in memory that continues to grow. After about 10 different page loads the browser is choppy, and doesn't smooth out till I refresh the page.

  1. $(document).ready(function () {

  3. function PegAjaxContent(page, websiteid) {
    $.post('/aspx/WorkerPage.aspx?Command=PegAjaxContent',
  4. { websiteid: websiteid, page: page, time: $.now() },
  5. function (data) {
  6.       if (typeof data.page != 'undefined' && data.page.length > 0) {
          $('#PegContentContainer').empty().append(udecode(data.page.content));
  7.       }
  8. }
    },'json').fail(function () {
  9. $('#PegContentContainer').empty();
  10. });
  11. }

  13. });

I'm registering handlers using the .on jquery command. I thought maybe I could setup clean up event that I would trigger upon each page ajax. Then per each page I could register the event and when triggered it would fire the .off command for each handler and clean things up but I'm not sure if this would solve the issue or if there is a better way. I was under the impression that if I emptied the container of all the content that the memory would be released somehow, but I'm really not very experienced with javascript. Any pointers on what I could do to clean up the memory?