21 May 2010 8:28 AM #1
Curious on the order of files
Curious on the order of files
I don't know the internals of webkit as well as I do Gecko, so I'm curious why in the getting started guide it is recommended to interleave the CSS and JS files in this order: CSS, JS, JS, CSS?
21 May 2010 8:49 AM #2
21 May 2010 10:34 AM #3
Not sure how much the order affects mobile WebKit, but we probably should keep them up top for consistency. Thanks for highlighting.
24 May 2010 7:58 AM #4
i've noticed a noticeable slowdown in rendering when js files are included in the <head> in mobile safari.
i've since moved all js files to just before the closing </body> tag.
all my css includes remain in the <head>.
24 May 2010 7:59 AM #5
24 May 2010 8:11 AM #6
24 May 2010 8:13 AM #7
the rules are the same.
Includ all JS in the head, the body never gets rendered until the JS is loaded and parsed.
Include CSS in the head and JS at the bottom, the body is loaded and formatted (rendered) and then the JS is loaded
These are standard web optimization rules.
24 May 2010 8:15 AM #8
Put Scripts at the Bottom
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.
An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.
24 May 2010 8:21 AM #9
unfortunately, safari mobile doesn't behave the way we'd like it to.
i'm currently working on an iPad app using just ext-core and a handrolled unminified 9.7k css file (sorry devs -- started this a week before you all launched the Ext.Touch beta).
if i include ext-core,js in the <head>, there's a noticeable 0.5s - 1s delay before my styles kick in.
if i move that include to just before the closing <body> tag, that delay is gone.
By renku in forum Ext 3.x: BugsReplies: 2Last Post: 2 Dec 2009, 6:42 AM
By neonfly in forum Ext 2.x: Help & DiscussionReplies: 2Last Post: 19 Feb 2009, 5:49 AM
By patspats in forum Ext 2.x: Help & DiscussionReplies: 7Last Post: 28 Mar 2007, 10:39 AM
By baggins2000 in forum Ext 1.x: Help & DiscussionReplies: 8Last Post: 15 Nov 2006, 8:19 AM