On Tue, Jun 9, 2009 at 4:20 AM, Luke <[email protected]> wrote:
> > I've just started using jQuery and have been looking for various > plugins and writing my own custom ones. I always download the source, > then use Apache Ant to concatenate the files together then compress > that file. I do this with my CSS files too. This usually leaves me > with only 3 external files being downloaded, (screen.css, print.css > and unobtrusive.js), which are sent compressed by gzip from the server > to the visitor. > > So bearing in mind filesizes are important to me, and other > developers, I try to aim to have the average page load filesize under > 250kb (without any cached content). The full jQuery UI download is > 450kb, as I just want to use tabs and datepicker, I remove everything > except those and core. The download is now 250kb. Seems a bit much > when comparing it with alternatives. When you say full download, are you talking about the size of the zip file you download, which includes compressed and uncompressed files, as well as demos and documentation for each plugin? Or the size of the js and css that the user will have to download? I just created a 1.7.2 download selecting Tabs and Datepicker and I got this: js/jquery-1.3.2.min.js 20kb js/jquery-ui-1.7.2.custom.min.js 17kb css/theme-name/jquery-ui-1.7.2.custom.css 6kb css/theme-name/images/ 26kb > If I use DOMTab, datePicker, > bgiframe and date the uncompressed filesize is 96.1kb - and there > isn't a long pause of unstyled content. UI Core, Tabs, and Datepicker uncompressed is 29kb. It should be noted that the 32kb above for css and images is the entire jQuery UI CSS Framework, ready to style all jQuery UI plugins, and any other plugin that's ThemeRoller-ready. You could create your own theme or minimize that css by hand, if that doesn't suit your purposes and needed to get that size down even further. > I haven't had problems with FOUC for a few years now, but it appears > most things on the jQuery UI demos suffer badly from it, it's not even > a flash, it seems to sit there in a mess for a few seconds before > loading. I'm not seeing this. On jqueryui.com/demos? Which browser? And if Firefox, would you mind taking a look in Firebug or YSlow and see where the holdup is? For me, which I navigate to each demo, I don't see any FOUC, not even for a fraction of a second. > There are bugs regarding FOUC reported for tabs, but they > don't seem to be fixed. I was under the impression that an FOUC was > easily avoidable, or are the filesizes just too large to avoid this? It's not about file sizes. It's about accessibility. You can apply some css classes right in your markup that will completely eliminate a FOUC, but as mentioned here, it's going to make the content inaccessible without JavaScript: http://docs.jquery.com/UI/Tabs#...prevent_a_FOUC_.28Flash_of_Unstyled_Content.29_before_tabs_are_initialized "note that this will *not* degrade gracefully with JavaScript being disabled:" Here's a method you might consider: http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content > > Or is it because the core.css file has to load about 20 other files > separately (using @import, which is bad: > http://developer.yahoo.com/performance/rules.html#csslink > ) instead of building the CSS into a single file to load using <link> > in the header. The ui.core.css file is for development. If you're going for performance, use the production-ready jquery-ui-1.7.2.custom.css file, which has all the css combined into one file, with 0 @imports. > > Thanks for jQuery, but jQuery UI isn't appealing in its current state. I hope you'll reconsider with the above information. Please let us know if you still have any concerns. Thanks. - Richard --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
