Curious on the order of files

**stever** · 21 May 2010 8:28 AM

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?

Code:

	 <!-- Ext Touch CSS -- >
	 <link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css" >
	
	 <!-- Ext Touch JS -- >	
	 <script type="text/javascript" src="../../ext-touch-debug.js" > </script >
	
	 <!-- Application JS -- >
	 <script type="text/javascript" src="src/index.js" > </script >

	 <!-- Application CSS -- >
	 <link rel="stylesheet" href="css/guide.css" type="text/css" >

I would have expected the CSS together and then the JS together, but perhaps that is not the optimized order? Again, just curious...

**jay@moduscreate.com** · 21 May 2010 8:49 AM

I wonder if the well-known paradigm of CSS up top and javascript at the bottom works for the mobile world.

**davidkaneda** · 21 May 2010 10:34 AM

Not sure how much the order affects mobile WebKit, but we probably should keep them up top for consistency. Thanks for highlighting.

**mystix** · 24 May 2010 7:58 AM

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>.

**jay@moduscreate.com** · 24 May 2010 7:59 AM

Is the mobile browser optimized to handle JS files in the head better than non mobile?

**mystix** · 24 May 2010 8:11 AM

Originally Posted by jgarcia@tdg-i.com

Is the mobile browser optimized to handle JS files in the head better than non mobile?

sorry jay, should've been clearer -- i noticed that slowdown in safari mobile.

on desktop browsers, i've yet to notice any slowdown when including everything in the <head>.

**jay@moduscreate.com** · 24 May 2010 8:13 AM

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.

**jay@moduscreate.com** · 24 May 2010 8:15 AM

Put Scripts at the Bottom

tag: javascript

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.

**mystix** · 24 May 2010 8:21 AM

Originally Posted by jgarcia@tdg-i.com

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.

i used to think so, which is why i started developement by including everything in the head.

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.

Curious on the order of files

Thread Tools

Search Thread

Display

Curious on the order of files

Curious on the order of files

Similar Threads

[CLOSED][3.??] Byte-order marks inside ext-lang-*.js files

Curious (non-)behaviour

Next Revision - Curious

Curious about examples