Side navigation
#12269 closed bug (wontfix)
Opened August 12, 2012 12:16PM UTC
Closed August 15, 2012 07:49PM UTC
Last modified October 15, 2012 08:16PM UTC
width() and height() significantly slower in 1.8 in WebKit browsers
| Reported by: | twadzilla | Owned by: | mikesherov |
|---|---|---|---|
| Priority: | blocker | Milestone: | 1.8.1 |
| Component: | css | Version: | 1.8.0 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
jQuery version: 1.8
Browsers affected: Chrome 21-23, Safari 5-6
Browsers not affected: IE, Firefox
Operating systems: Windows XP SP3, Windows 7 x64, Mac OS 10.7
Repro link: http://jsfiddle.net/jkvFN/
Expected result: when applying width() or height() over a large (500+) collection of elements, performance should be roughly equivalent to css().
Actual result:
width() and height() perform several orders of magnitude slower than css() in 1.8.0 compared to 1.7.2. A trace in the timeline feature of Chrome seems to indicate a large number of layout/style recalculations happening in curCSS (line 6617).
Attachments (0)
Change History (8)
Changed August 13, 2012 01:13AM UTC by comment:1
| component: | unfiled → css |
|---|---|
| keywords: | → needsdocs |
| priority: | undecided → high |
| resolution: | → worksforme |
| status: | new → closed |
Changed August 13, 2012 01:15AM UTC by comment:2
| resolution: | worksforme |
|---|---|
| status: | closed → reopened |
Actually, maybe I got it backwards here. Sorry for that.
Changed August 13, 2012 01:19AM UTC by comment:3
Yeah, this is interesting. I apologize for the hasty reply. I'm investigating now.
Changed August 13, 2012 02:02AM UTC by comment:4
Right, so, this is slower in every browser, but more noticeable in webkit. This is due to what I had originally mentioned. It's still true that I've actually sped up some code paths when box-sizing:border-box is true, but also, we've become more precise with .width() vs. .css('width').
Again, .width() accounts for which box-sizing model is being used, and .css('width') does not. As a consequence, we query the box-sizing property when using .width(), which is the cause of the slowdown. Use .css('width') if you'd like to avoid this.
I'll continue to investigate this in the mean time.
Changed August 14, 2012 12:58AM UTC by comment:5
| milestone: | None → 1.8.1 |
|---|---|
| owner: | → mikesherov |
| priority: | high → blocker |
| status: | reopened → assigned |
Changed August 15, 2012 07:49PM UTC by comment:6
| resolution: | → wontfix |
|---|---|
| status: | assigned → closed |
We discussed this at length at the team meeting. We are keeping this behavior, as although it may be slower. If you are not using border-box, use .css('width'). If you need it to be content-width regardless of box-sizing, use .width().
Changed August 15, 2012 08:01PM UTC by comment:7
almost same problem on firefox 14.0.1
so linux ubuntu 12.
JQuery 1.8.0
Advertencia: Propiedad desconocida 'box-sizing'. Declaración rechazada.
Changed October 15, 2012 08:16PM UTC by comment:8
| keywords: | needsdocs |
|---|
Actually, you should be happy. Change your tests to use jquery 1.7.2, and you'll see just how slow the old methods were. In jquery 1.8, I've significantly sped up certain code paths. As well, .width() as a setter and .css('width') as a setter do different things. .wdith() sets content width, where as .css('width') sets the "width" attribute, which can be content-width if box-sizing is content box, or content-width plus padding plus border if box-sizing is border-box.
Adding needsdocs because we haven't properly publicized this change.