Download and cache page without displaying it?

[Mark]

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

 

[Randy Webb]

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.

 

[Mark]

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]

Thanks, I'll give that a look.

Hmm. . .recursion. Luckily there are only a few dozen images in the
database.

 

[Randy Webb]

Mark said the following on 5/27/2006 3:01 PM:

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

Thanks, I'll give that a look.


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.

 

[Mark]

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

 

[Thomas 'PointedEars' Lahn]

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

 

[Randy Webb]

Mark said the following on 5/29/2006 2:00 AM:

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.

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

Thomas 'PointedEars' Lahn said the following on 5/29/2006 7:43 AM:

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.

 

[Mark]

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

 

[Randy Webb]

Mark said the following on 5/29/2006 12:18 PM:

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.

 

[Mark]

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.

 

[Randy Webb]

Mark said the following on 5/29/2006 3:34 PM:

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.

 

[Mark]

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?

 

[Randy Webb]

Mark said the following on 5/29/2006 7:16 PM:

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.

 

[Mark]

Search the archives for "Dynamically load JS Files" along with my name.

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

 

[Randy Webb]

Mark said the following on 5/30/2006 4:53 PM:

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.

 

[Mark]

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?

 

[Randy Webb]

Mark said the following on 5/31/2006 11:30 AM:

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.