Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Dynamic loading of javascript files into web pages (http://www.velocityreviews.com/forums/t938934-dynamic-loading-of-javascript-files-into-web-pages.html)

neilc 06-25-2009 03:21 PM

Dynamic loading of javascript files into web pages
 
Hello I've got the following code

<script type="text/javascript">

var aScripts = [ "scripts/jquery.js", "scripts/jquery.scrollTo-
min.js", "scripts/jquery.localscroll-min.js" ];

function forEach( array, action ) {
for (var i = 0; i < array.length; i++)
action(array[i]);
}

function loader_( array ) {
forEach(array, function (element) {
var p = document.getElementsByTagName( "HEAD" )[0];
var c = document.createElement( "script" );
c.type= "text/javascript";
c.src = element;
p.appendChild( c );
});
}

loader_( aScripts );

</script>

Which I've placed into the <head> element of my html page. The idea is
to speed up the loading of the javascript into the page. Some pages
load in 10 or so other javascript pages and this really helps.

The problem is that it doesnt want to work properly in IE 6 or Safari
4. Neither browser tells me what the problem is but I just wanted to
know if anyone had any suggestions as to where I should be looking
next.

thanks
Neil

Thomas 'PointedEars' Lahn 06-25-2009 03:28 PM

Re: Dynamic loading of javascript files into web pages
 
neilc wrote:
> Hello I've got the following code
>
> <script type="text/javascript">
>
> var aScripts = [ "scripts/jquery.js", "scripts/jquery.scrollTo-
> min.js", "scripts/jquery.localscroll-min.js" ];


My condolences.

> function forEach( array, action ) {
> for (var i = 0; i < array.length; i++)
> action(array[i]);
> }


JavaScript 1.7+ (current: 1.8) already as Array.prototype.forEach(), you
should use that where available.

> function loader_( array ) {
> forEach(array, function (element) {
> var p = document.getElementsByTagName( "HEAD" )[0];


Should be lowercase.

> var c = document.createElement( "script" );
> c.type= "text/javascript";
> c.src = element;
> p.appendChild( c );
> });
> }
>
> loader_( aScripts );
>
> </script>
>
> Which I've placed into the <head> element of my html page. The idea is
> to speed up the loading of the javascript into the page.


By loading more script code? Think again.

> Some pages load in 10 or so other javascript pages and this really helps.


Rubbish.


PointedEars

Peter Michaux 06-25-2009 05:50 PM

Re: Dynamic loading of javascript files into web pages
 
On Jun 25, 8:21 am, neilc <capho...@gmail.com> wrote:
> Hello I've got the following code
>
> <script type="text/javascript">
>
> var aScripts = [ "scripts/jquery.js", "scripts/jquery.scrollTo-
> min.js", "scripts/jquery.localscroll-min.js" ];
>
> function forEach( array, action ) {
> for (var i = 0; i < array.length; i++)
> action(array[i]);
> }
>
> function loader_( array ) {
> forEach(array, function (element) {
> var p = document.getElementsByTagName( "HEAD" )[0];
> var c = document.createElement( "script" );
> c.type= "text/javascript";
> c.src = element;
> p.appendChild( c );
> });
> }
>
> loader_( aScripts );
>
> </script>
>
> Which I've placed into the <head> element of my html page. The idea is
> to speed up the loading of the javascript into the page.


The above script shouldn't be speeding up the process of loading
JavaScript files. The same files are still travelling across the wires
from the server to the browser.

> Some pages
> load in 10 or so other javascript pages and this really helps.


I don't see how it helps. Do you have some definitive tests showing it
does?

> The problem is that it doesnt want to work properly in IE 6 or Safari
> 4. Neither browser tells me what the problem is but I just wanted to
> know if anyone had any suggestions as to where I should be looking
> next.


You've replaced using straightforward, well supported script tags with
a src attributes by the complex and iffy script above. Even had you
not reported problems, I would suspect some browsers wouldn't react
well to what you are doing.

Peter

Peter Michaux 06-25-2009 05:57 PM

Re: Dynamic loading of javascript files into web pages
 
On Jun 25, 8:28*am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> neilc wrote:
> > Hello I've got the following code

>
> > <script type="text/javascript">

>
> > * * * * * *var aScripts = [ *"scripts/jquery.js", "scripts/jquery.scrollTo-
> > min.js", "scripts/jquery.localscroll-min.js" ];

>
> My condolences.
>
> > * * * * * *function forEach( array, action ) {
> > * * * * * * *for (var i = 0; i < array.length; i++)
> > * * * * * * * *action(array[i]);
> > * * * * * *}

>
> JavaScript 1.7+ (current: 1.8) already as Array.prototype.forEach(), you
> should use that where available.


I'd say, in this case, if this script has to stay at all, for some
unknown reason to me, then just get rid of forEach as it is bulking up
what is supposed to be a small helper script. Use a for loop in the
loader_ function and avoid the idea of using the native
Array.prototype.forEach all together.

Peter

Jeremy J Starcher 06-25-2009 06:46 PM

Re: Dynamic loading of javascript files into web pages
 
On Thu, 25 Jun 2009 17:28:28 +0200, Thomas 'PointedEars' Lahn wrote:

> neilc wrote:
>>
>> Which I've placed into the <head> element of my html page. The idea is
>> to speed up the loading of the javascript into the page.

>
> By loading more script code? Think again.


Although I have not run my own tests, there are a number of timing tests
out there that indicate many browsers will load script elements embedded
in the HTML one at a time, blocking all other IO until the script is
loaded.

Load four scripts, they load one after another while blocking all other
elements on the page from loading at the same time. By making them
dynamically declared script elements (either using document.write or
dynamic SCRIPT elements), it allows concurrent loading with other
elements.

IIRC, The "Why Slow" Or 'yslow' extension for Firefox demonstrates this.
I forget how they tested the other browsers.

Peter Michaux 06-25-2009 07:00 PM

Re: Dynamic loading of javascript files into web pages
 
On Jun 25, 11:46*am, Jeremy J Starcher <r3...@yahoo.com> wrote:


> Load four scripts, they load one after another while blocking all other
> elements on the page from loading at the same time. *By making them
> dynamically declared script elements (either using document.write or
> dynamic SCRIPT elements), it allows concurrent loading with other
> elements.


I wish Randy Webb was around right now. I've cc'ed him on this
message. He is/was a fan of dynamic script tag insertion at least for
some purposes.

Peter

Thomas 'PointedEars' Lahn 06-25-2009 07:47 PM

Re: Dynamic loading of javascript files into web pages
 
Jeremy J Starcher wrote:
> Thomas 'PointedEars' Lahn wrote:
>> neilc wrote:
>>> Which I've placed into the <head> element of my html page. The idea is
>>> to speed up the loading of the javascript into the page.

>> By loading more script code? Think again.

>
> Although I have not run my own tests, there are a number of timing tests
> out there that indicate many browsers will load script elements embedded
> in the HTML one at a time, blocking all other IO until the script is
> loaded.


Works as designed.

> Load four scripts, they load one after another while blocking all other
> elements on the page from loading at the same time. By making them
> dynamically declared script elements (either using document.write or
> dynamic SCRIPT elements), it allows concurrent loading with other
> elements.


And risking runtime errors because required methods and properties are
not yet there, if ever? No, thanks. But wait -- these tests have been
performed by people who are clueless enough to advocate "Unobtrusive
JavaScript" and huge abominations like jQuery, yes?

10 scripts in one document ... o tempora, o mores.


PointedEars

neilc 06-26-2009 07:24 AM

Re: Dynamic loading of javascript files into web pages
 
On 25 June, 18:50, Peter Michaux <petermich...@gmail.com> wrote:
> On Jun 25, 8:21 am, neilc <capho...@gmail.com> wrote:
>
>
>
> > Hello I've got the following code

>
> > <script type="text/javascript">

>
> > * * * * * * * * var aScripts = [ *"scripts/jquery.js", "scripts/jquery.scrollTo-
> > min.js", "scripts/jquery.localscroll-min.js" ];

>
> > * * * * * * * * function forEach( array, action ) {
> > * * * * * * * * * for (var i = 0; i < array.length;i++)
> > * * * * * * * * * * action(array[i]);
> > * * * * * * * * }

>
> > * * * * * * * * function loader_( array ) {
> > * * * * * * * * * forEach(array, function (element) {
> > * * * * * * * * * * * * var p = document.getElementsByTagName( "HEAD" )[0];
> > * * * * * * * * * * * * * * * * var c = document.createElement( "script" );
> > * * * * * * * * * * * * * * * * c.type= "text/javascript";
> > * * * * * * * * * * * * * * * * c.src = element;
> > * * * * * * * * * * * * * * * * p.appendChild( c );
> > * * * * * * * * * });
> > * * * * * * * * }

>
> > * * * * * * * * loader_( aScripts );

>
> > </script>

>
> > Which I've placed into the <head> element of my html page. The idea is
> > to speed up the loading of the javascript into the page.

>
> The above script shouldn't be speeding up the process of loading
> JavaScript files. The same files are still travelling across the wires
> from the server to the browser.
>
> > Some pages
> > load in 10 or so other javascript pages and this really helps.

>
> I don't see how it helps. Do you have some definitive tests showing it
> does?
>
> > The problem is that it doesnt want to work properly in IE 6 or Safari
> > 4. Neither browser tells me what the problem is but I just wanted to
> > know if anyone had any suggestions as to where I should be looking
> > next.

>
> You've replaced using straightforward, well supported script tags with
> a src attributes by the complex and iffy script above. Even had you
> not reported problems, I would suspect some browsers wouldn't react
> well to what you are doing.
>
> Peter


Thanks for all the replies, I've created some passionate feelings
here !

Some of you totally missed the point with this and obviously
understand how the web browsers works.

But thanks to Jeremy J Starcher for getting what I meant.

> Although I have not run my own tests, there are a number of timing tests
> out there that indicate many browsers will load script elements embedded
> in the HTML one at a time, blocking all other IO until the script is
> loaded.


This is exactly what happens and this is an attempt to load all
scripts at the same time. If you use firebug and look at the .net tab
you will see how this works.

My tests show that I've consistently saved 1 second by implementing
this method (in firefox and ie7) but as I mentioned ie6 and safari 4
seem barf.

There is a discussion here

http://stackoverflow.com/questions/2...ink-cs-include
and
http://www.artzstudio.com/2008/07/be...ynchronous-js/

For those who do not get it (ie PointedEars)


Thomas 'PointedEars' Lahn 06-26-2009 07:54 AM

Re: Dynamic loading of javascript files into web pages
 
neilc wrote:
> There is a discussion here
>
> http://stackoverflow.com/questions/2...ink-cs-include
> and
> http://www.artzstudio.com/2008/07/be...ynchronous-js/


How typical, script-kiddie. You need to refer to work of
other people because you don't have any arguments yourself.

> For those who do not get it (ie PointedEars)


*You* don't get it. If you continue loading the document while scripts are
loading (if that, all of this is based on the weak assumption that scripts
can be dynamically loaded everywhere), methods that these scripts provide
may or may not be available while the document is loading.

That is not a problem if you follow the ill-advised "Unobtrusive JavaScript"
approach to the letter because then there is no script code in the `body'
element. However, if you follow the standards-compliant and reliable
approach which includes event delegation, event listeners that call methods
that do not yet exist (because the scripts that define them have not been
loaded or not fully loaded yet) cause runtime errors. And because the
scripts may not be loaded in sequential order, if at all, and features of
the scripts are likely not be used in sequential order in the document, it
will work on one element and fail on another. So much for user experience.

Then again, when it has become necessary to load scripts dynamically in
order to create a viable document, maybe, just maybe, there is something
wrong with the scripts, such as size (for including a lot of unused
features, or providing them through unnecessarily extensive method
overloading), or runtime efficiency (for thinking every computer is under
all conditions as fast as the testing system, and for foolishly thinking it
would be faster to add a listener to every element in sight instead of event
delegation)?

And when there are 10 scripts or more in a document, maybe, just maybe,
somebody has not understood a first thing about browser scripting and Web
authoring, and just tries to have their tag soup spiced by including a dozen
script libraries from everywhere, written by equally clueless people?


PointedEars

neilc 06-26-2009 08:32 AM

Re: Dynamic loading of javascript files into web pages
 
Thanks for you response, this is a much better explanation than your
previous efforts which were rude and unhelpful. I appreciate you
taking the time to explain. You're tone is a quite uptight and
childish, you might enjoy life more if you had some therapy ? Being
nice to people is much more rewarding. You should try it.

From what you've suggested perhaps the best thing to do is try and put
all the scripts in one file perhaps and minify this, rather than the
approach I've taken. Then I could just use a standard include method.

I agree that the scripts/libraries I'm including could have some
excess baggage, but I don't have the time to go through and trim them
so I'm looking at other methods to speed up page loading. Don't get me
wrong - my pages are quite fast anyway and dont provide a problem -
but I'm just looking at ways of trimming a few milliseconds off them.


All times are GMT. The time now is 05:07 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.