Forums
View unanswered posts | View active topics It is currently Fri Oct 31, 2014 3:52 am



Reply to topic  [ 5 posts ] 
 Performance tips when using PIE on hundreds of objects? 
Author Message

Joined: Fri Aug 13, 2010 12:14 am
Posts: 10
Post Performance tips when using PIE on hundreds of objects?
Hi,

can anyone suggest any tips for improving the page load times when using PIE on several hundred objects?
If you look at the following pages you will see the page load time in IE is considerably slower for the page using PIE:

Without PIE: http://www.go-dove.com/event-15196/BioP ... ots?pp=250
With PIE: http://www.go-dove.com/auctions/catalog ... 196&pp=250

I've also generated waterfall charts for these pages using webpagetest.org:
Without PIE: hhttp://www.webpagetest.org/result/110604_PA_RHS0/
With PIE: http://www.webpagetest.org/result/110604_G2_RHRX/

Any tips would be greatly appreciated!!

Cheers


Sat Jun 04, 2011 1:24 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Performance tips when using PIE on hundreds of objects?
It looks like you're already using -pie-lazy-init, which would have been my suggestion. Unfortunately it just isn't possible to handle that many elements without some noticeable performance hit. Personally I would choose not to use PIE in this situation.


Sat Jun 04, 2011 11:34 pm
Profile

Joined: Fri Aug 13, 2010 12:14 am
Posts: 10
Post Re: Performance tips when using PIE on hundreds of objects?
Thanks for taking a look, I had a feeling that would be the case.


Sun Jun 05, 2011 12:26 am
Profile

Joined: Fri Aug 13, 2010 12:14 am
Posts: 10
Post Re: Performance tips when using PIE on hundreds of objects?
Hi Jason,

it's been a while, but I think I've come up with a possible workaround to the performance issues I spotted.
I've include a 'nopie' class on the elements I want to have rounder corners and drop shadow (e.g. class="cssButton1 nopie"), which includes 'behavior:none!imporant', then after the page has loaded, I use jQuery to remove the 'nopie' class leaving just the 'cssButton1' class which uses 'behvior:pie.htc', so PIE is loaded in earlier versions of IE.
The results in webpagetest.org show that working this way doesn't affect the initial page load times, but I'm wondering if you know of any issues with this workaround?

You can see an example on this page:
http://www.go-dove.com/auctions/catalog ... cid=webdev

Cheers


Tue Jul 12, 2011 6:15 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Performance tips when using PIE on hundreds of objects?
The only downside I can think of is that since it now waits until after page load, your users will see the page rendered unstyled at first, whereas letting the behavior attach while the page loads often eliminates that flash of unstyled content. But given the alternative that's probably not too much of a bad thing.

I would also be concerned that while yes this decreases the time until the page is first rendered, the page will still hang while your script runs and the behaviors are applied. This might still be annoying to users since they can see the page but can't interact with it, but I don't know what is worse.

Thanks for reporting back your findings! This is very interesting. :)


Tue Jul 12, 2011 8:50 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 5 posts ] 

Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.