PDA

View Full Version : 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?


<!-- 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
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
http://tdg-i.com/img/screencasts/2010-05-24_1214.png



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