Questions about on-demand dynamic javascript loading

Discussion in 'Javascript' started by Venkatesh, Jan 9, 2007.

  1. Venkatesh

    Venkatesh Guest

    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
    Venkatesh, Jan 9, 2007
    #1
    1. Advertising

  2. Venkatesh

    RobG Guest

    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.

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



    --
    Rob
    RobG, Jan 9, 2007
    #2
    1. Advertising

  3. Venkatesh

    Randy Webb Guest

    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. It is one of the
    benefits of putting it in an external file versus inline for non-script
    users.

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Jan 9, 2007
    #3
  4. Venkatesh

    Randy Webb Guest

    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.

    <snip>

    > 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 :)

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Jan 9, 2007
    #4
  5. Venkatesh

    RobG Guest

    Randy Webb wrote:
    > 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?


    --
    Rob
    RobG, Jan 10, 2007
    #5
  6. Venkatesh

    Randy Webb Guest

    RobG said the following on 1/9/2007 7:10 PM:
    > Randy Webb wrote:
    >> 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.

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Jan 10, 2007
    #6
  7. Venkatesh

    Venkatesh Guest

    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
    Venkatesh, Jan 13, 2007
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. robertm
    Replies:
    1
    Views:
    284
    Dino Chiesa [MSFT]
    Aug 12, 2003
  2. Jens Klingelhöfer

    How to send a website to a client without demand?

    Jens Klingelhöfer, Nov 30, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    317
    Steve C. Orr [MVP, MCSD]
    Dec 1, 2003
  3. Plutian

    Application on demand

    Plutian, Aug 30, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    409
    Ben Lovell
    Aug 30, 2004
  4. JavaScript on Demand

    , May 25, 2007, in forum: Javascript
    Replies:
    6
    Views:
    108
    Jeff North
    May 26, 2007
  5. Adnan Siddiqi

    using On-Demand Javascript to load function

    Adnan Siddiqi, Jul 26, 2007, in forum: Javascript
    Replies:
    5
    Views:
    116
    David Mark
    Jul 27, 2007
Loading...

Share This Page