div.offsetHeight takes long time at document ready with a big document

[rubenortizgonzalez]

Hi,

We are using jquery 1.8.2 and detected that with long documents (5 megas html) the method that is executed at document ready and calculates support.boxSizing, support.reliableHiddenOffsets, takes long time. It seems the calls to div.offsetX takes long time, one second in Chrome 42 and 10 seconds in IE10 (with a intel Core i5 in windows).

I marked the points with <-- HERE

Is there another way to calculate this with a better performance? Best regards.

// Run tests that need a body at doc ready
jQuery(function() {
var container, div, tds, marginDiv,
divReset = "padding:0;margin:0;border:0;display:block;overflow:hidden;",
body = document.getElementsByTagName("body")[0];

    if ( !body ) {
        // Return for frameset docs that don't have a body
        return;
    }

    container = document.createElement("div");
    container.style.cssText = "visibility:hidden;border:0;width:0;height:0;position:static;top:0;margin-top:1px";
    body.insertBefore( container, body.firstChild );

    // Construct the test element
    div = document.createElement("div");
    container.appendChild( div );

    // Check if table cells still have offsetWidth/Height when they are set
    // to display:none and there are still other visible table cells in a
    // table row; if so, offsetWidth/Height are not reliable for use when
    // determining if an element has been hidden directly using
    // display:none (it is still safe to use offsets if a parent element is
    // hidden; don safety goggles and see bug #4512 for more information).
    // (only IE 8 fails this test)
    div.innerHTML = "<table><tr><td></td><td>t</td></tr></table>";

    tds = div.getElementsByTagName("td");

    tds[ 0 ].style.cssText = "padding:0;margin:0;border:0;display:none";
    isSupported = ( tds[ 0 ].offsetHeight === 0 ); // <--- HERE
    tds[ 0 ].style.display = "";
    tds[ 1 ].style.display = "none";
    // Check if empty table cells still have offsetWidth/Height
    // (IE <= 8 fail this test)
    support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 ); // <--- HERE
    // Check box-sizing and margin behavior
    div.innerHTML = "";
    div.style.cssText = "box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;";
    support.boxSizing = ( div.offsetWidth === 4 ); <-- HERE
    support.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== 1 ); 
    // NOTE: To any future maintainer, we've window.getComputedStyle
    // because jsdom on node.js will break without it.
    if ( window.getComputedStyle ) {
        support.pixelPosition = ( window.getComputedStyle( div, null ) || {} ).top !== "1%";
        support.boxSizingReliable = ( window.getComputedStyle( div, null ) || { width: "4px" } ).width === "4px";

        // Check if div with explicit width and no margin-right incorrectly
        // gets computed margin-right based on width of container. For more
        // info see bug #3333
        // Fails in WebKit before Feb 2011 nightlies
        // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
        marginDiv = document.createElement("div");
        marginDiv.style.cssText = div.style.cssText = divReset;
        marginDiv.style.marginRight = marginDiv.style.width = "0";
        div.style.width = "1px";
        div.appendChild( marginDiv );
        support.reliableMarginRight =
            !parseFloat( ( window.getComputedStyle( marginDiv, null ) || {} ).marginRight );
    }

...

[dmethvin]

Have you tried the most recent version? That code looks very different now and is performed on an as-needed basis.

[rubenortizgonzalez]

Hi,

Do you refer to jquery 2.x version? We are using this version to be compatible with old browsers.

[mgol]

Dave meant jQuery 1.11.3.

Michał Gołębiowski

[rubenortizgonzalez]

Ok. Now I have tested with the latest version 1.11.3 and the problem is similar, in IE10 the call to div.offsetWidth takes 4.5 seconds.

This is the line:

support.inlineBlockNeedsLayout = val = div.offsetWidth === 3;

[timmywil]

@rubenortizgonzalez Thank you for making us aware. Could you copy your test case into http://jsbin.com for us?

[rubenortizgonzalez]

Hi Timmy, it was impossible to copy a file of 3.3Megas into jsbin, I shared with you the file from this source:

https://dl.dropboxusercontent.com/u/16911948/test.html

The test.html file references a jquery 1.11.3 version modified with a print to console of the times of document ready functions.

[dmethvin]

it was impossible to copy a file of 3.3Megas into jsbin

jQuery has to do various feature detects, some of which force layout and would be very expensive for a document of that size. The 3.0 version will have more of those taken out and done on a lazy basis I think, but really the best solution is to only load the HTML needed for the initial view and pull the rest in via .$.ajax() to make the page load faster.