Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#11197 closed bug (fixed)

Feature detecting outerWidth setter API expensive

Reported by: igrunert Owned by: igrunert
Priority: minor Milestone: 1.12.0
Component: ui.core Version: 1.8.24
Keywords: Cc:
Blocked by: Blocking:

Description

jQuery UI core contains the following feature detection for the outerWidth setter:

if ( !$( "<a>" ).outerWidth( 1 ).jquery ) {

This causes a Recalculate Style / Layout operation in Chrome on jQuery 1.7.2, which is expensive (~25ms).

This code is present up to jQuery UI 1.11.3.

Change History (5)

comment:1 Changed 2 years ago by Scott González

I suppose we can infer based on the function length, but I'd really prefer to keep the real feature detect. Ideally we'll get this split out into a file for supporting old jQuery Core and then you can just exclude that in your build.

I'll leave this open until we can discuss it with the whole team.

comment:2 Changed 2 years ago by Scott González

Owner: set to igrunert
Status: newpending

Can you provide the test page you're using that's showing ~25ms reflow time? My test page is admittedly simple, but I'm only getting ~1ms time spent on the detection, ~2ms total time spent on detection + implementation. I'm even seeing similar performance in IE8.

comment:3 Changed 2 years ago by igrunert

Status: pendingnew

Due to having jQuery UI in the head, and early on in our scripts, this triggers one of our first recalculate style / layout / rendering.

The cost of that reflow should be proportional to the size and complexity of the page. The 1ms / 2ms numbers you quote for a test page make sense to me, it's only on the large DOM we're dealing with that would cause the 20ms+ reflow time.

It's a little tricky to distill a meaningful test page that shows it - but it can be seen clear as day on one of our production systems. It's about 20ms on this page as seen in the chrome dev tools timeline: https://confluence.atlassian.com/404.action and here's a screenshot of the dev tools https://s3.amazonaws.com/uploads.hipchat.com/10804/51242/J7tb07lp7m6H7yj/Screen%20Shot%202015-02-27%20at%2010.48.43%20am.png

comment:4 Changed 2 years ago by Scott González

Resolution: fixed
Status: newclosed

Core: Drop feature detection for version check to support jQuery 1.7

Fixes #11197 Closes gh-1458

Changeset: c077e0a347826c7acca4ca2f775ca59e3b5f8d07

comment:5 Changed 2 years ago by Scott González

Milestone: none1.12.0
Note: See TracTickets for help on using tickets.