JQuery animate lags on first run

I’m troubleshooting a bug in a UI where the first time the menu is opened it is very slow. Anywhere from 1-3 seconds. Subsequent openings are just as fast as you would expect.

Below you will see the code, then after that a few javascript profiles. You’ll notice on each first run (after a page load) that (program) is at the top and is taking >500ms of the total time. On subsequent runs (second, third) you will see (idle) at the top and (program) only taking 40-90 ms.

Even though I only provided 5 data points below, I’ve run this dozens of times and it is very consistent.

Can anyone explain this or at least give me some tips on how to troubleshoot further?

edit: I should note, the performance profiles below are in Chrome Canary. The actual code runs in Coherent UI in Unity and the delay is multiplied.


Code:

function openPane(callback) {
    console.profile('openPane');
    if (!$pane.is(':visible')) {
        $pane.css('display', 'block');
    }

    if (typeof $slideinc.length !== 'undefined') {
        for (i = 0; i < $slideinc.length; i++) {
            // This element has been configured to slide with the pane element
            if ($dir == "left") {
                $($slideinc[i]).animate({
                    left: convertPXtoVW((parseFloat($slideorigins[i].left) + parseFloat($pane.outerWidth(true)) +
                                         parseFloat($paneorigin.left)).toString())
                }, function() {
                });
            } else {
                $($slideinc[i]).animate({
                    right: convertPXtoVW((parseFloat($slideorigins[i].right) + parseFloat($pane.outerWidth(true)) +
                                        parseFloat($paneorigin.right)).toString())
                }, function() {
                });
            }
        }
    }

    // Depending on the configured direction animate left or right
    if ($dir == "left") {
        $pane.animate({ left: convertPXtoVW($paneorigin.left) }, function () {
            console.profileEnd();
        });
    } else {
        $pane.animate({ right: convertPXtoVW($paneorigin.right) }, function () {
            console.profileEnd();
        });
    }
    // Attribute added to determine when pane is opened
    $pane.attr('data-pane-open', true);
}

Profiles (First Page Load)

First run:

enter image description here

Second run:

enter image description here


Profiles (Second Page Load)


First Run:

enter image description here

Second Run:

enter image description here

Third Run:

enter image description here