Questions about on-demand dynamic javascript loading

[Venkatesh]

Hello All,

I have couple of doubts regarding the concept of on-demand javascript
loading using javascript code. I could see on the net different
techniques for achieving this - techniques like:

1. document.write("<script src=[source of script]
language='JavaScript'></script>);
2. sc = document.createElement("<script>"); sc.setAttribute("src",
[source]); and append this to the head
3. Get the script file using XmlHTTPRequest() and do an eval on the
text downloaded

etc...

There are few things not yet clear for me:

1. Which of these techniques perform synchronous load without much
effort (i.e. prevent me from writing all callbacks/event listeners and
instead allow me to write just one API function on whose return I can
be sure that javascript file is loaded).

Method 3 is kind of synchronous but I'm not able to use eval() inside a
function because the scope of eval is within the scope of the function
calling the eval, effectively making the functions inside the loaded
javascript file inaccessible to the rest of the code.

2. Which of these techniques are having risks like - memory leaks etc
.... The reason I'm asking this is: For us every time a server hit is
made, the server response returns the list of javascript files to be
loaded. This list will not vary often but whenever the list contains
new javascript files to be loaded, I have to load those files. If I
adopt method 1 for our scenario, is it fine if my load function keeps
adding the text <script src=""></script> to document, even if the file
was downloaded earlier? Or should my load function maintain a list of
scripts loaded earlier and take actions only if a request for some new
javascript file is made?

Request anybody having knowledge about this to throw some light.

Thank you,
Venkatesh

 

[RobG]

Hello All,

I have couple of doubts regarding the concept of on-demand javascript
loading using javascript code. I could see on the net different
techniques for achieving this - techniques like:

1. document.write("<script src=[source of script]
language='JavaScript'></script>);

That is hardly "on demand", it is more a convenience for those without
script capabilities - it saves them downloading what, for them, is
useless content.

2. sc = document.createElement("<script>"); sc.setAttribute("src",
[source]); and append this to the head

That works OK, but to be robust in all browsers you need to use a
setTimeout() callback to separate the function that loads the script
from those that try to call functions within it.

3. Get the script file using XmlHTTPRequest() and do an eval on the
text downloaded

As you note below, that has its drawbacks.

etc...

There are few things not yet clear for me:

1. Which of these techniques perform synchronous load without much
effort (i.e. prevent me from writing all callbacks/event listeners and
instead allow me to write just one API function on whose return I can
be sure that javascript file is loaded).

XHR does, but that may not be what you really want.

Method 3 is kind of synchronous but I'm not able to use eval() inside a
function because the scope of eval is within the scope of the function
calling the eval, effectively making the functions inside the loaded
javascript file inaccessible to the rest of the code.

There are ways around that, but I don't think you want to do it.

[...]

Request anybody having knowledge about this to throw some light

Read this thread "createTextNode and IE7":

<URL:
http://groups.google.com.au/group/c...ipt+element+ie7&rnum=1&hl=en#5aebcff147d2e442

 

[Randy Webb]

RobG said the following on 1/9/2007 4:27 AM:

Hello All,

I have couple of doubts regarding the concept of on-demand javascript
loading using javascript code. I could see on the net different
techniques for achieving this - techniques like:

1. document.write("<script src=[source of script]
language='JavaScript'></script>);

That is hardly "on demand", it is more a convenience for those without
script capabilities - it saves them downloading what, for them, is
useless content.

I am not sure I agree with that. I have never seen a UA that is script
incapable that will download an external script file. It is one of the
benefits of putting it in an external file versus inline for non-script
users.

 

[Randy Webb]

Venkatesh said the following on 1/8/2007 11:11 PM:

Hello All,

I have couple of doubts regarding the concept of on-demand javascript
loading using javascript code. I could see on the net different
techniques for achieving this - techniques like:

1. document.write("<script src=[source of script]
language='JavaScript'></script>);

Doing that as the page loads is fine. Doing it after the page loads is
disastrous. So I wouldn't call that "loading on demand" per se.

2. sc = document.createElement("<script>"); sc.setAttribute("src",
[source]); and append this to the head

Search the archives for loadJSFile and you can find more reading on that
than you probably ever cared to read about it.

3. Get the script file using XmlHTTPRequest() and do an eval on the
text downloaded

As Rob pointed out, there are scope issues with eval'ing the text that
gets downloaded.

etc...

There are few things not yet clear for me:

1. Which of these techniques perform synchronous load without much
effort (i.e. prevent me from writing all callbacks/event listeners and
instead allow me to write just one API function on whose return I can
be sure that javascript file is loaded).

Method 1 and Method 3.

2. Which of these techniques are having risks like - memory leaks etc

If any do, all of them do.

... The reason I'm asking this is: For us every time a server hit is
made, the server response returns the list of javascript files to be
loaded. This list will not vary often but whenever the list contains
new javascript files to be loaded, I have to load those files.

When is that request made? Is it made on a setTimeout/Interval basis
while the app is running or is it made when the page is initially
loaded? How you go about dealing with loading .js files will depend -
directly - on the answer to that question.

If I adopt method 1 for our scenario, is it fine if my load function keeps
adding the text <script src=""></script> to document, even if the file
was downloaded earlier?

That depends on header's and cache settings. It may load twice for User1
but only once for User2.

Or should my load function maintain a list of scripts loaded earlier
and take actions only if a request for some new javascript file is made?

That makes it sound like you are polling the server to see if new files
are available while the app is running. Without knowing when you are
checking it is impossible to come up with a definitive answer though. It
also depends on how your .js files are created/formatted.

Request anybody having knowledge about this to throw some light.

I tried throwing light but it kept slipping through my fingers

 

[RobG]

RobG said the following on 1/9/2007 4:27 AM:

Hello All,

I have couple of doubts regarding the concept of on-demand javascript
loading using javascript code. I could see on the net different
techniques for achieving this - techniques like:

1. document.write("<script src=[source of script]
language='JavaScript'></script>);

That is hardly "on demand", it is more a convenience for those without
script capabilities - it saves them downloading what, for them, is
useless content.

I am not sure I agree with that. I have never seen a UA that is script
incapable that will download an external script file.

Which is not to say one doesn't or wont exist - I haven't tested them
all, or even a majority of them.

It was my short-cut way of covering both script-ignorant and
script-disabled browsers, though I agree with your statement.

It is one of the
benefits of putting it in an external file versus inline for non-script
users.

I fully agree, I was trying to make the point (obviously poorly worded)
that it is more a pleasant side effect than a significant criterion
when deciding whether to put script in the page or in an external file.
e.g. I don't think anyone would recommend using document.write() for
all script elements because it saves script-disabled browsers a bit of
bandwidth.

If you disable scripting, do browsers download external script files
anyway?

 

[Randy Webb]

RobG said the following on 1/9/2007 7:10 PM:

RobG said the following on 1/9/2007 4:27 AM:

Venkatesh wrote:
Hello All,

I have couple of doubts regarding the concept of on-demand javascript
loading using javascript code. I could see on the net different
techniques for achieving this - techniques like:

1. document.write("<script src=[source of script]
language='JavaScript'></script>);
That is hardly "on demand", it is more a convenience for those without
script capabilities - it saves them downloading what, for them, is
useless content.

I am not sure I agree with that. I have never seen a UA that is script
incapable that will download an external script file.

Which is not to say one doesn't or wont exist - I haven't tested them
all, or even a majority of them.

It was my short-cut way of covering both script-ignorant and
script-disabled browsers, though I agree with your statement.

It is one of the
benefits of putting it in an external file versus inline for non-script
users.

I fully agree, I was trying to make the point (obviously poorly worded)
that it is more a pleasant side effect than a significant criterion
when deciding whether to put script in the page or in an external file.
e.g. I don't think anyone would recommend using document.write() for
all script elements because it saves script-disabled browsers a bit of
bandwidth.

If you disable scripting, do browsers download external script files
anyway?

An educated guess based on disabled images says no. But nothing MS does
is educated.

 

[Venkatesh]

Hello Randy,

Thanks for replying. Just thought of giving a clear picture of how our
app is running.

When is that request made? Is it made on a setTimeout/Interval basis
while the app is running or is it made when the page is initially
loaded? How you go about dealing with loading .js files will depend -
directly - on the answer to that question.

The request is an AJAX request that happens everytime user clicks on
hyperlinks present in our document. The response from server contains
list of HTML elements to be changed and list of javascript files to be
loaded. The technique we have adopted is - Update the HTML element
changes (i.e. update the DOM), then load the javascript files from the
list present in server's response, then allow user to perform any other
clicks.

So, both method 2 i.e. adding document.createElement("script") ....;
and method 3 "i.e. getting javascript contents as response and doing an
eval" work for us.

That makes it sound like you are polling the server to see if new files
are available while the app is running. Without knowing when you are
checking it is impossible to come up with a definitive answer though. It
also depends on how your .js files are created/formatted.

I'm now able to use eval and get the function declarations go global
(i.e. have variables and functions declared in global scope) ...
window.eval -> for non IE browsers and window.execScript() for IE are
doing the job for me ... So, a synchronous get from XMLHttpRequest()
and eval is achieving the synchronization we wanted. and since I'm
doing an eval now, my load function is keeping track of js files
downloaded just to ensure the next time request for download is made we
are not doing a get and eval again.

Once again, thanks everyone for replying.

-Venkatesh