SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot SlaveToTheMan's Avatar
    Join Date
    Aug 2001
    Location
    Land of OZ
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question on document.write use to import js files

    OK, I have an html page where right before the closing body tag I have the following js import...

    Code HTML4Strict:
    <script src="/javascript/importA.js" type="text/javascript"></script>

    The importA.js imports another js file using the Document.write() method as follows...

    Code JavaScript:
    /*******************************************************************
      Add other JS files.
    *******************************************************************/
     
    document.write("<scr" + "ipt src='/javascript/importB.js' type='text/javascript'><\/scr" + "ipt>");
     
    alert(2);

    The importB.js file contains...

    Code JavaScript:
    alert(1);

    When it runs, I would expect the browser to execute alert 1 first and then alert 2 however that's not the case. I see alert 2 then 1. WHY????????

    I thought since importA.js calls importB.js (which contains alert 1) using document.write() before alert 2 is called would mean alert(1) method would execute when document.write is executed but it's not the case. It seems everything in importA.js is executed first including all methods and then the browser executes the methods in import2.js no matter in what sequence I put the document.write import.

    Can anyone explain why?

  2. #2
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.write is really strange, since it plugs in to how the browser loads documents. What happens is, as follows: The browsers loader will read until it reaches the importA.js tag. It will then give control to the javascript engine, which inserts a HTML-fragment at the current position of the loader, into the document. Since the loader has just read the <script src="/javascript/importA.js"/> part, the current position is after this. The javascript engine is already busy, executing the contents of importA.js, so it will keep doing that. When it's done, the browser gives control back to the loader, which will continue from its current position. The next thing it sees, is the new importB.js script tag.

  3. #3
    SitePoint Zealot SlaveToTheMan's Avatar
    Join Date
    Aug 2001
    Location
    Land of OZ
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, where did you learn that? I would like to know because it are details like these that I'm looking for.

    Second, I think I understand. To paraphrase, it working as follows:

    1) browser loads the page

    2) browser loader comes across the JS import so control is given to the JS engine

    3) JS engine is executing importA.js and comes across the document.write method in importA.js. Since this is HTML which is handled by the browser loader, the JS engine just inserts the HTML fragment (my js script import for importB.js) into the document at the point where the JS script originally executed. However, the JS engine will continue to execute the rest of the importA.js before giving control back to the browser loader.

    4) JS engine finishes executing the importA.js and gives control back to the browser loader.

    5) Browser loader begins to continue to load the page and it's next item is actually the HTML fragment I added from importA.js file which is to load the importB.js script.

    6) The JS engine kicks in again executing importB.js

    Is that about right? I guess it is equivalent to just putting the following into the HTML doc...

    Code HTML4Strict:
    <script src="/javascript/importA.js" type="text/javascript"></script>
    <script src="/javascript/importB.js" type="text/javascript"></script>

  4. #4
    SitePoint Zealot SlaveToTheMan's Avatar
    Join Date
    Aug 2001
    Location
    Land of OZ
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So if I were to decide to load up several JS files into a document via a single js file I could do it by having the following in the HTML doc...

    Code HTML4Strict:
    <script src="/javascript/importA.js" type="text/javascript"></script>

    ...and then the following in importA.js

    Code JavaScript:
    /*******************************************************************
      Add other JS files.
    *******************************************************************/
     
    document.write("<scr" + "ipt src='/javascript/importB.js' type='text/javascript'><\/scr" + "ipt>");
    document.write("<scr" + "ipt src='/javascript/importC.js' type='text/javascript'><\/scr" + "ipt>");
    document.write("<scr" + "ipt src='/javascript/importD.js' type='text/javascript'><\/scr" + "ipt>");

    This is equivalent to saying

    Code HTML4Strict:
    <script src="/javascript/importA.js" type="text/javascript"></script>
    <script src="/javascript/importB.js" type="text/javascript"></script>
    <script src="/javascript/importC.js" type="text/javascript"></script>
    <script src="/javascript/importD.js" type="text/javascript"></script>

    Very cool! I learned something! Thanks kyberfabrikken!

    I'm asking because I have a bunch of pages that need to upload various js files. I don't want to manage the different imports in the HTML. I want to load up a single js file that then loads everything else (like the above example). This way if there is a change I can make the change in the imported js file in one place and all pages receive the change.

    Sound like a good idea?

  5. #5
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SlaveToTheMan View Post
    First, where did you learn that? I would like to know because it are details like these that I'm looking for.
    Douglas Crockford covers it well in his video presentation Theory of the DOM. Excellent video series by the way.

    Quote Originally Posted by SlaveToTheMan View Post
    Is that about right? I guess it is equivalent to just putting the following into the HTML doc...
    Yes, that's what I meant. It came out a little less clear, but you got the point.

  6. #6
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SlaveToTheMan View Post
    Sound like a good idea?
    What's a good idea in most other languages, is often a bad idea in Javascript. From a design perspective, it makes perfectly good sense, to split code out into separate files. However, performance wise, it's a very bad idea to do so. Each file must be requested separately, which means a separate HTTP-request for each. This is a very costly operation, which is especially bad at load time, since the browser will freeze the page (cease loading), until the file is received. On top of that, is the management problem of including files, as you have noted.

    All considered, you're properly better off merging your files into one big chunk. You can write a small script (in perl or shell script or similar), which merges multiple files into on for you. That way, you can use multiple files during development, but merge it for deployment. Sort of like a compile-step. One additional benefit of this is, that you can add a javascript optimiser to that script, which can give a few extra percent of performance for you.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Anything done using document.write in JavaScript really out to be rewritten to use server side scripting instead. All the document.writes have to run while the page is originally loading and so server side processing will be way more efficient for writing your dynamic content than using document.write would be.

    The only benefit to multiple JavaScript files is being able to dynamically load the extra ones after the page has loaded and that can't be done using document.write, the best way to do that is to use DOM commands to add the script element to the end of the head of the page where it will run once it finishes loading.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •