The best way to load external Javascript 2

[BabyJeffy]

I was doing some surfing today (during lunch!) and discovered this blog post that explains the "Best Way" to load external javascript:

The best way to load external Javascript

The technique is very sound - and certainly worth playing with (especially as you start a new site/project).

I really hope others find this useful, too!

Cheers,
Jeff

[tt]Visit my blog [!]@[/!]

http://www.coderambler.com/

Visit Code Couch [!]@[/!]

http://www.codecouch.com/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[1DMF]

So this now makes me as my question again, how big is too big?

When would a JS file be so big it needs to be loaded asyncronously via AJAX to stop it slowing down page loads?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[BabyJeffy]

When would a JS file be so big it needs to be loaded asyncronously via AJAX to stop it slowing down page loads?

- When your next target from business is "reduce the time that the user has to wait for the page to become functional"

- If load times are important to your business model.

- If the time taken to load the JS prevents your page from "appearing" swiftly.

Cheers,
Jeff

[tt]Visit my blog [!]@[/!]

http://www.coderambler.com/

Visit Code Couch [!]@[/!]

http://www.codecouch.com/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[1DMF]

I get that Jeff but it's relative isn't it?

Relative to the power of client machine, internet connection, LAN speed etc..

Seings as my machine is kick ass, it's no good for testing on.

I think i'll just carry on as is and wait for any complaints.

No point in implementing all this code just to load external files when there is no requirment to do so.

But nice code all the same.

In fact it made think of how to get round the issue of ajax not firing returned JS.

from what I can tell , this code simpy changes the source of the script tag.

So if you write JS to a file then altered a dummy script tag's source that would cause the browser to interpret the new code won't it?





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[BabyJeffy]

Yes... you can do that! That's actually how I see a lot of the ad campaign sites work.

Check out the example page he has: Sample slow loading page

Cheers,
Jeff

[tt]Visit my blog [!]@[/!]

http://www.coderambler.com/

Visit Code Couch [!]@[/!]

http://www.codecouch.com/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[feherke]

Hi

When <script> tags are in the flow of an HTML document, the browser must stop rendering and wait for the script file to download and execute before continuing (example).

defer [CI]
When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g., no "document.write" in javascript) and thus, the user agent can continue parsing and rendering.

( HTML 4.01 | Scripts | Designing documents for user agents that support scripting | The [tt]SCRIPT[/tt] element | defer )

I see there is no reaction there on this comment :

How about defining the defer attribute on the script element?

Could we discuss it here, please ? To me it seems that the author's base idea is wrong.

Feherke.

http://rootshell.be/~feherke/

 

[1DMF]

If it works feherke and is W3C standards compliant, nice spot.

Why use a sledgehammer to crack a walnut, especially if it's already part of the DOM.

However, it does make executing dynamic scripts created by AJAX applications easier, without striping content with regex's and evaluating the code.

I couldn't find an example of it's use though, is the sysntax

defer="defer"

it's boolean, but i've noticed when coding in X/HTML , you don't actually set things to true e.g.

selected="selected"
disabled="disabled"

is that correct?




"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[feherke]

Hi

Yes, that is how it has to be set.

In meantime I found an irritating "may" word :

defer [highlight #ffffe1][small]New in Firefox 3.5[/small][/highlight]
This Boolean attribute is set (to the value defer) to indicate to a browser that it may continue parsing and rendering a document without waiting for a script to be executed. Since this feature is optional, authors should not assume that the script’s execution will actually be deferred.

( Mozilla Developer Center | HTML | Element | script )

Feherke.

http://rootshell.be/~feherke/

 

[1DMF]

No way -> wonderfull firefox , the most standards compliant browser on the planet 'may' obey the attribute setting.

Surely not

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[feherke]

Hi

[tt][ignore][offtopic][/ignore][/tt]

wonderfull firefox , the most standards compliant browser on the planet

Personally I always considered Opera stricter on standards than Mozillas.
[tt][ignore][/offtopic][/ignore][/tt]

Well, actually W3C says the [tt]defer[/tt] attribute "provides a hint". I would say, that "may" in the MDC is in concordance with W3C's "hint". What I really hate in the MDC's quoted paragraph is the lack of hints about how that "may" works. If it depends on doctype, rendering mode, presence of other [tt]script[/tt] tags or anything.

Feherke.

http://rootshell.be/~feherke/

 

[1DMF]

oh well looks like Jeff's way is the only sure way to force JS to load asynchronously!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[feherke]

Hi

[tt][ignore][opinion src="personal"][/ignore][/tt]
That is where things start going wrong : when webmasters wants to force something - the browsers, the spiders, the visitors, the advertisements, everything.
[tt][ignore][/opinion][/ignore][/tt]


Feherke.

http://rootshell.be/~feherke/

 

[BabyJeffy]

I'll set up a test harness and do some testing using defer... but I have a sneaky suspicion that whilst it's supported by MS browsers, it's effectively ignored by the others. I will do the work to confirm this... and I'll report back to this thread.

@feherke - there are a lot of "hint" and "suggest" words in the spec I can understand why they do it (so as not to force a specific implementation to the user agent)... but it's a pain.

Cheers,
Jeff

[tt]Visit my blog [!]@[/!]

http://www.coderambler.com/

Visit Code Couch [!]@[/!]

http://www.codecouch.com/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[1DMF]

That is where things start going wrong : when webmasters wants to force something

How do you work that out?

I'll write app that REQUIRES JavaScript and if you don't have JS running it won't work.

You're taking the word force in the wrong context me thinks.

I also never understand why people have a problem with 'requirements'.

If a site requires JS and you are not prepared to have the 'requirements' then quite simply you won't be able to use the application.

Do you tell the police the same thing when he asks for your driving licence, as it's a 'Requirement' to drive, or your insurance, or road tax.

My defence your honour is you shouldn't 'force' anything upon me...err sorry sir, it's a requirement, and if you aren't prepared to meet the requirements, you can't drive , end of, not open for discussion!

What I won't do is 'force' people to use my site, you are quite free to go somewhere else! ;-)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[feherke]

Hi

Until now there was no word about JavaScript vs no JavaScript.

Excuse me, I will not reply to that, so we can stop here.


Feherke.

http://rootshell.be/~feherke/

 

[1DMF]

- man you really don't have a sense of humour do you!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!