Where should I include JS files

views:

348

answers:

+2 Q:

Where should I include JS files

Hello,

I have a PHP application in which there is a div container which includes the app which has been $_GET from the URL string.

Currently, there are two applications which require TinyMCE, and one application which requires jQuery and jQuery UI.

Question is, where should I include the files on the page?

In the header, the page loads really slowly, >30 seconds (now <10 seconds, using different router), at at the bottom, the pages which require the scripts fail to load correctly.

The JS files have already been minified and compressed.

TinyMCE won't gZIP becuase Zlib is installed (as a result of GD), so how should I optimise the situation?

+2 A:

At the bottom and run your scripts when the document is fully loaded (using "onload" event).

Adam Dziendziel 2009-05-30 19:18:48

the only script that fails now is tinymce, becuase it wants everything to be loaded before the textbox tag is called.

Shamil 2009-05-30 20:31:01

+4 A:

The Yahoo! Exceptional Performance team recommends to put the script elements at the end of the body element.

Gumbo 2009-05-30 19:20:27

Nope, scripts fail :|

Shamil 2009-05-30 20:21:11

Then you should fix that script. Find out why it fails and fix it.

Gumbo 2009-05-30 20:24:48

having said that, the only script that fails now is tinymce, becuase it wants everything to be loaded before the textbox tag is called.

Shamil 2009-05-30 20:30:56

The example on its website works fine even when the script is loaded after the form.

Gumbo 2009-05-30 20:38:44

I can't seem to find the page to which you are refencing.

Shamil 2009-05-30 21:43:10

Here: http://tinymce.moxiecode.com/examples/full.php

Gumbo 2009-05-30 22:17:49

+1 A:

By placing the JavaScript file just before the closing BODY tag, you are allowing the rest of the page to load while the JavaScript file is loading. If you place it in the HEAD section, the page will hang until the script loads.

If it's taking 30 seconds to load in the header, though, you are probably facing a different issue. TinyMCE should not take 30 seconds to load.

James Skidmore 2009-05-30 19:22:15

I think the 30 seconds was more becuase of my awful connection now - using another router brings it way down under 10 seconds.

Shamil 2009-05-30 20:21:46

+1 A:

There probably is no one correct answer for this.

Generally placing javascript to <head> works fine, but 30 seconds is way too much. I'm developing a JavaScript app which dynamically loads about 70 uncompressed javascript files (some quite large) and it doesn't take anywhere near 30 seconds.

Too little information to solve this.

Rene Saarsoo 2009-05-30 19:23:25

Ok - 30s must have been due to my bad connection - now seeing under 10s

Shamil 2009-05-30 20:29:29

+1 A:

How many JS files is it? If its many, then you may want to look at Steve Souders slides for Even Faster Websites. Downloading JS file is a blocking action. Souders has a nice solution for dealing with script blocking. Check the PPT from http://www.thebitsource.com/2009/03/14/sxsw-interactive-2009-steve-souders-on-even-faster-web-sites/

Also, where are you serving the JS from? Try serving jQuery from Google AJAX Libraries API. It uses their CDN and caches for a long time. So the user will only have to dl the files 1 time.

frio80 2009-05-30 19:33:02

There are 3. Becuase of the nature, it'll be on an extranet, and an intranet, loading from a CDN isn't an option, but I'll include it from the extranet point of view, and return what happens :)

Shamil 2009-05-30 20:19:30

I want my JS Code be completely seperated from the XHTML, thus putting it inline HTML before the body closing tag won't do for me.

I declare one single JS File in the html head. Then copy/paste all Libraries etc into that JS file. This will result in one HTTP Request, which speeds things up on mobile browsers too.

I then use Prototype to get DOM sensitive functions started:

document.observe("dom:loaded", function) { // code goes here });

Stephan Kristyn 2010-07-28 00:12:10

ansaurus

tags:

views:

answers:

Where should I include JS files

related questions