Download and cache page without displaying it?

Discussion in 'Javascript' started by Mark, May 27, 2006.

  1. Mark

    Mark Guest

    Hello.

    I am looking for a way to download and cache a web page that the user has
    not yet requested, and write the web page to the browser cache without
    displaying it. My intention is to improve display performance when the user
    eventually requests the cached document.

    Is there a way to do this in Javascript?

    Thanks
    -Mark
    Mark, May 27, 2006
    #1
    1. Advertising

  2. Mark

    Randy Webb Guest

    Mark said the following on 5/27/2006 2:32 PM:
    > Hello.
    >
    > I am looking for a way to download and cache a web page that the user has
    > not yet requested, and write the web page to the browser cache without
    > displaying it.


    And how can you ensure that the user is going to request it?

    Load it in a hidden IFrame, it will get cached and then if it is
    requested then it will half way do what you want it to do.

    > My intention is to improve display performance when the user
    > eventually requests the cached document.


    You are looking in the wrong direction.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 27, 2006
    #2
    1. Advertising

  3. Mark

    Mark Guest

    "Randy Webb" <> wrote:
    >
    > And how can you ensure that the user is going to request it?


    I can't be sure. But it is likely. The context is one in which the user is
    invited to scroll through a series of images which are displayed
    one-at-a-time (a server-side Perl CGI script retrieves the image information
    from a database and generates the web page.)

    I have improved performance quite a bit by preloading the image that will be
    displayed on the next page in the sequence. I'm just wondering whether I can
    take that a step further and preload the entire page.

    >
    > Load it in a hidden IFrame, it will get cached and then if it is requested
    > then it will half way do what you want it to do.


    Thanks, I'll give that a look.

    >
    > You are looking in the wrong direction.


    I am always happy to have someone point me in the right direction. You are
    welcome to blindfold me, spin me around a few times, and place a keyboard in
    my hand. . .

    -Mark
    Mark, May 27, 2006
    #3
  4. Mark

    Mark Guest

    "Mark" <> wrote:
    > "Randy Webb" <> wrote:
    >>
    >> Load it in a hidden IFrame, it will get cached and then if it is
    >> requested then it will half way do what you want it to do.

    >
    > Thanks, I'll give that a look.
    >


    Hmm. . .recursion. Luckily there are only a few dozen images in the
    database.
    Mark, May 27, 2006
    #4
  5. Mark

    Randy Webb Guest

    Mark said the following on 5/27/2006 3:01 PM:
    > "Randy Webb" <> wrote:
    >> And how can you ensure that the user is going to request it?

    >
    > I can't be sure. But it is likely. The context is one in which the user is
    > invited to scroll through a series of images which are displayed
    > one-at-a-time (a server-side Perl CGI script retrieves the image information
    > from a database and generates the web page.)


    Is it a thumbnail scenario where the user browses through the thumbnails
    on a single page or does every image have it's own thumbnail on it's own
    page?

    > I have improved performance quite a bit by preloading the image that will be
    > displayed on the next page in the sequence. I'm just wondering whether I can
    > take that a step further and preload the entire page.


    Sure. That is the basis for AOL/Netscapes "Top Speed Technology" where
    it attempts to preload potential pages the user might load while the
    user isn't loading anything and thus it can be considered "download down
    time".

    >> Load it in a hidden IFrame, it will get cached and then if it is requested
    >> then it will half way do what you want it to do.

    >
    > Thanks, I'll give that a look.
    >
    >> You are looking in the wrong direction.

    >
    > I am always happy to have someone point me in the right direction. You are
    > welcome to blindfold me, spin me around a few times, and place a keyboard in
    > my hand. . .


    If the load time of a plain HTML document is large enough that you are
    attempting to speed up that load time, you may want to look at trimming
    down the page/HTML itself - if possible. But, trying to blanket preload
    any potential page that a user may go to is going to be a challenge on
    any page that has more than 2 or 3 links in it.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 28, 2006
    #5
  6. Mark

    Mark Guest

    "Randy Webb" <> wrote:
    >
    > Is it a thumbnail scenario where the user browses through the thumbnails
    > on a single page or does every image have it's own thumbnail on it's own
    > page?


    One thumbnail per page. There are arrows to scroll forwards and backwards.


    > But, trying to blanket preload any potential page that a user may go to is
    > going to be a challenge on any page that has more than 2 or 3 links in it.


    Nope, I just want to preload the page that the user will be loading if he
    presses the forward scroll button.

    I tried it with an Iframe, and it did work. But of course the contents of
    the Iframe are interpreted and its scripts executed, which causes the next
    page in the scroll sequence to be downloaded. . .and then the next. . .and
    then the next. . .

    Ideally what I would like to do is create a new document object outside of
    any context where its contents would be interpreted. Just download it, and
    stick it in the browser cache. But my investigation so far has uncovered no
    apparent way to do this. I must use an Iframe, or create a document object
    in a new window context. In either case the downloaded page will be
    interpreted and its scripts executed, leading to recursion.

    -Mark
    Mark, May 29, 2006
    #6
  7. Mark wrote:

    > I am looking for a way to download and cache a web page that the user has
    > not yet requested, and write the web page to the browser cache without
    > displaying it. My intention is to improve display performance when the
    > user eventually requests the cached document.
    >
    > Is there a way to do this in Javascript?


    There is no way at all. Because with regard to display performance, such
    attempts at preloading at first _decrease_ that performance in favor of
    the /generally/ less likely event that exactly the preloaded content is
    accessed later.

    Believe it or not, users /like/ incremental display. The obvious reason
    is that they can see, and possibly use, the top of the content /before/
    the bottom is loaded.

    Don't get me wrong: This is not to say preloading is a Bad Thing. It
    is certainly useful (iff it works, you have no control over the cache
    features) if a dynamic effect needs to work regardless of known timing
    issues. But such /excessive/ preloading as you want it, is nonsense.


    PointedEars
    --
    Indiana Jones: The Name of God. Jehovah.
    Professor Henry Jones: But in the Latin alphabet,
    "Jehovah" begins with an "I".
    Indiana Jones: J-...
    Thomas 'PointedEars' Lahn, May 29, 2006
    #7
  8. Mark

    Randy Webb Guest

    Mark said the following on 5/29/2006 2:00 AM:
    > "Randy Webb" <> wrote:
    >> Is it a thumbnail scenario where the user browses through the thumbnails
    >> on a single page or does every image have it's own thumbnail on it's own
    >> page?

    >
    > One thumbnail per page. There are arrows to scroll forwards and backwards.


    If the pages you are trying to preload are taking a while to load,
    something is wrong in the page you are trying to preload. If you are
    already loading the image, the only thing left to load is the html file
    and the time to load a html file should be negligent compared to the
    loading of the images.

    >
    >> But, trying to blanket preload any potential page that a user may go to is
    >> going to be a challenge on any page that has more than 2 or 3 links in it.

    >
    > Nope, I just want to preload the page that the user will be loading if he
    > presses the forward scroll button.
    >
    > I tried it with an Iframe, and it did work. But of course the contents of
    > the Iframe are interpreted and its scripts executed, which causes the next
    > page in the scroll sequence to be downloaded. . .and then the next. . .and
    > then the next. . .


    Have your IFrame check to see if it is the top document or if it is in
    an IFrame. If it is not in an IFrame, load the next page. If it is in an
    IFrame, you do nothing.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 29, 2006
    #8
  9. Mark

    Randy Webb Guest

    Thomas 'PointedEars' Lahn said the following on 5/29/2006 7:43 AM:
    > Mark wrote:
    >
    >> I am looking for a way to download and cache a web page that the user has
    >> not yet requested, and write the web page to the browser cache without
    >> displaying it. My intention is to improve display performance when the
    >> user eventually requests the cached document.
    >>
    >> Is there a way to do this in Javascript?

    >
    > There is no way at all.


    Yes there is.

    > Because with regard to display performance, such attempts at preloading
    > at first _decrease_ that performance in favor of the /generally/ less
    > likely event that exactly the preloaded content is accessed later.


    I suppose you use that same argument to tell people not to pre-load
    images? It is a flawed argument. Trying to preload the next page does
    not decrease the display performance for the current page if it is
    implemented correctly and uses the browsers "down time" for making HTTP
    Requests to the server.

    > Believe it or not, users /like/ incremental display.


    That has nothing to do with the question. It wasn't about trying to
    speed up the current page, it was about trying to speed up the
    transition from one page to the next.

    And no, users do not like to wait. Given the same exact content/pages,
    if a user is confronted with two scenarios:

    Scenario 1: Pages flow seemlessly, no wait.
    Scenario 2: User has to wait for the next page to load.

    The user will inevitably use the first page more often.

    > The obvious reason is that they can see, and possibly use, the top
    > of the content /before/ the bottom is loaded.


    That wasn't the issue. Please read it carefully again.

    > Don't get me wrong: This is not to say preloading is a Bad Thing.


    Huh? Even in this one post you are contradicting yourself. You say
    trying to preload decreases performance and argue against it, then you
    say it isn't a bad thing. Make up your mind please.

    > It is certainly useful (iff it works, you have no control over the cache
    > features) if a dynamic effect needs to work regardless of known timing
    > issues. But such /excessive/ preloading as you want it, is nonsense.


    "excessive preloading"? WTF are you smoking? Trying to preload one image
    and an HTML file is *not* "excessive preloading" by *any* stretch of the
    imagination.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 29, 2006
    #9
  10. Mark

    Mark Guest

    "Randy Webb" <> wrote:
    >
    > If the pages you are trying to preload are taking a while to load,
    > something is wrong in the page you are trying to preload. If you are
    > already loading the image, the only thing left to load is the html file
    > and the time to load a html file should be negligent compared to the
    > loading of the images.


    You are correct. Preloading the image has improved performance
    substantially. I am just trying to eke out that last bit of performance to
    make the transition a bit "snappier." And of course the improvement would be
    even more noticeable to a user on dialup.

    > Have your IFrame check to see if it is the top document or if it is in an
    > IFrame. If it is not in an IFrame, load the next page. If it is in an
    > IFrame, you do nothing.


    Ah, good idea. Thanks, I will try that.

    -Mark
    Mark, May 29, 2006
    #10
  11. Mark

    Randy Webb Guest

    Mark said the following on 5/29/2006 12:18 PM:
    > "Randy Webb" <> wrote:
    >> If the pages you are trying to preload are taking a while to load,
    >> something is wrong in the page you are trying to preload. If you are
    >> already loading the image, the only thing left to load is the html file
    >> and the time to load a html file should be negligent compared to the
    >> loading of the images.

    >
    > You are correct. Preloading the image has improved performance
    > substantially. I am just trying to eke out that last bit of performance to
    > make the transition a bit "snappier." And of course the improvement would be
    > even more noticeable to a user on dialup.


    Don't use independent pages then. Just preload the next image in the
    thumbnails and then change the image on the current page. The image
    itself is already preloaded, so it would just be a matter of changing it:

    document.images['imageName'].src = newImage

    And then preload the next image.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 29, 2006
    #11
  12. Mark

    Mark Guest

    "Randy Webb" <> wrote:
    >
    > Don't use independent pages then. Just preload the next image in the
    > thumbnails and then change the image on the current page. The image itself
    > is already preloaded, so it would just be a matter of changing it:
    >
    > document.images['imageName'].src = newImage
    >
    > And then preload the next image.


    Sorry, I should have been more specific. The thumbnail appears with various
    text describing it (artwork title, price, availability, and so on.) So I do
    need to change the page.
    Mark, May 29, 2006
    #12
  13. Mark

    Randy Webb Guest

    Mark said the following on 5/29/2006 3:34 PM:
    > "Randy Webb" <> wrote:
    >> Don't use independent pages then. Just preload the next image in the
    >> thumbnails and then change the image on the current page. The image itself
    >> is already preloaded, so it would just be a matter of changing it:
    >>
    >> document.images['imageName'].src = newImage
    >>
    >> And then preload the next image.

    >
    > Sorry, I should have been more specific. The thumbnail appears with various
    > text describing it (artwork title, price, availability, and so on.) So I do
    > need to change the page.


    You can change the text on the page as well as the image.

    <URL: http://jibbering.com/faq/#FAQ4_15>

    IF you are preloading the image, you could get the text from the server
    as well and change the innerHTML of a div tag accordingly.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 29, 2006
    #13
  14. Mark

    Mark Guest

    "Randy Webb" <> wrote:
    >
    > You can change the text on the page as well as the image.
    >
    > <URL: http://jibbering.com/faq/#FAQ4_15>
    >
    > IF you are preloading the image, you could get the text from the server as
    > well and change the innerHTML of a div tag accordingly.


    Hmm. . .I would still need to query the server to obtain the text to be
    displayed with the next image in the scroll order. How would I do that
    without loading a new HTML page? XMLHttpRequest, perhaps?
    Mark, May 30, 2006
    #14
  15. Mark

    Randy Webb Guest

    Mark said the following on 5/29/2006 7:16 PM:
    > "Randy Webb" <> wrote:
    >> You can change the text on the page as well as the image.
    >>
    >> <URL: http://jibbering.com/faq/#FAQ4_15>
    >>
    >> IF you are preloading the image, you could get the text from the server as
    >> well and change the innerHTML of a div tag accordingly.

    >
    > Hmm. . .I would still need to query the server to obtain the text to be
    > displayed with the next image in the scroll order. How would I do that
    > without loading a new HTML page? XMLHttpRequest, perhaps?


    Perhaps XMLHTTPRequest but if it were me, I would just dynamically load
    a .js file that only needed to have two or three variables defined and a
    simple function call:

    var nextImage = "nextImagePath";
    var nextImageText = "Text for next Image";
    var anotherImage = true/false;
    someFunctionInThePageToUpdateIt();

    Where anotherImage would be a boolean that the server could write out to
    let you know if there is indeed another image coming next or if you have
    reached the end of the line in which case the nextImageText could be:

    "You have reached the end of the Internet, there are no more images to
    see". (Seen that commercial?)

    Search the archives for "Dynamically load JS Files" along with my name.
    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 30, 2006
    #15
  16. Mark

    Mark Guest

    "Randy Webb" <> wrote:
    >
    > Search the archives for "Dynamically load JS Files" along with my name.


    I can't find it. Can you post the URI?
    Mark, May 30, 2006
    #16
  17. Mark

    Randy Webb Guest

    Mark said the following on 5/30/2006 4:53 PM:
    > "Randy Webb" <> wrote:
    >> Search the archives for "Dynamically load JS Files" along with my name.

    >
    > I can't find it. Can you post the URI?
    >
    >


    function loadJSFile(fileURL){
    var loadScript = document.createElement('script');
    loadScript.type = "text/javascript";
    loadScript.src = fileURL;
    document.getElementsByTagName('head')[0].appendChild(loadScript);
    }

    and then call it like this:

    loadJSFile('URL to .js File');

    How much further you take that function depends on how far backwards
    compatible you want to go. It needs some feature detection for
    createElement, getElementsByTagName and appendChild.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 30, 2006
    #17
  18. Mark

    Mark Guest

    "Randy Webb" <> wrote:
    >
    > function loadJSFile(fileURL){
    > var loadScript = document.createElement('script');
    > loadScript.type = "text/javascript";
    > loadScript.src = fileURL;
    > document.getElementsByTagName('head')[0].appendChild(loadScript);
    > }
    >
    > and then call it like this:
    >
    > loadJSFile('URL to .js File');
    >


    Ok, but would this not require that I have a collection of javascript files
    defined on the server, one for each set of data that I plan to display to
    the client? If so, then I could still create the JS files programmatically
    on the server, but I would need to give them user-specific naming (including
    the user's IP and the system time in the JS filename for example.) I would
    also need a server-side cleanup routine to periodically dispose of orphaned
    JS files.

    If this is the case, then XMLHttpRequest() might be a better approach, no?
    Mark, May 31, 2006
    #18
  19. Mark

    Randy Webb Guest

    Mark said the following on 5/31/2006 11:30 AM:
    > "Randy Webb" <> wrote:
    >> function loadJSFile(fileURL){
    >> var loadScript = document.createElement('script');
    >> loadScript.type = "text/javascript";
    >> loadScript.src = fileURL;
    >> document.getElementsByTagName('head')[0].appendChild(loadScript);
    >> }
    >>
    >> and then call it like this:
    >>
    >> loadJSFile('URL to .js File');
    >>

    >
    > Ok, but would this not require that I have a collection of javascript files
    > defined on the server, one for each set of data that I plan to display to
    > the client?


    Yes. But as I understand it, you have a collection of html files now
    that have that data and image and other HTML data in alreay.

    > If so, then I could still create the JS files programmatically on the server,
    > but I would need to give them user-specific naming (including the user's IP
    > and the system time in the JS filename for example.)


    No, you just need a static .js file for each image is all. Or, you could
    just have a DB with the data, and then a single server side script file
    that dynamically created the return data to the browser.

    > I would also need a server-side cleanup routine to periodically dispose of orphaned
    > JS files.


    No different than having to clean up orphaned HTML files now.

    > If this is the case, then XMLHttpRequest() might be a better approach, no?


    No.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 31, 2006
    #19
    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. DesignerX

    Page.Cache vs HttpContext.Current.Cache

    DesignerX, Jan 20, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    8,224
    vMike
    Jan 20, 2004
  2. John
    Replies:
    2
    Views:
    1,170
  3. Richard L Rosenheim

    Problem displaying page before initiating file download

    Richard L Rosenheim, Jan 30, 2005, in forum: ASP General
    Replies:
    0
    Views:
    117
    Richard L Rosenheim
    Jan 30, 2005
  4. Ron Lessnick
    Replies:
    2
    Views:
    105
    Ron Lessnick
    Feb 4, 2005
  5. kevin
    Replies:
    1
    Views:
    359
    Kairi Zikpin
    Jul 21, 2006
Loading...

Share This Page