< >

Why don't web browsers do this?

Posted 13 years ago

In the 80's, computers started instantly. They were READY to go when they first turned on.

Over the next few decades, people wanted to do more things and operating systems got slower to initialize. To solve this, OS and hardware manufacturers created hibernate and standby modes.

Now, many people have stopped using native applications and moved to the web. When I load facebook or gmail, it takes dozens of seconds to start up, and minutes over a slower connection. During this time,

The source files for the application are loaded from the server,
The source code is compiled and run.
Requests are made to retrieve the application state from the server, and
the DOM is manipulated to present the state to the user.

It would be trivial to snapshot the DOM and application state in Javascript and provide access to these snapshots with a simple API. The API would also allow you to discard an application version that is too old, or convert the state to the newer one. Then, application startup would be instantaneous.

Or, without any co-operation from standards, browsers can do this RIGHT NOW and snapshot commonly used pages instead of discarding them when users close a tab. When the url is re-entered, from the application perspective it is just as if the machine went into standby and then resumed. The browser could take cookie expiration into account, or to be totally safe, web pages could opt in with a meta tag.

Just sayin'.

Steve Hanov makes a living working on Rhymebrain.com, rapt.ink, www.websequencediagrams.com, and Zwibbler.com. He lives in Waterloo, Canada.

Post comment

edit

kaustubh kendurkar

ten years ago

I think we can have a screen for remote view of gmail app,

that way you can hide implementation and only remote view screen to client the gmail running in server , same like vnc with limited features.

edit

kaustubh

eleven years ago

Nice idea ,but api should be standardized and security issues will

arise . Maybe tomorrow we will have cloud environment where everyone will login to their cloud server running faster webpages rather than small desktop .

edit

Ty Cahill

twelve years ago

Sounds like you're looking for the cache manifest in HTML5.

URL: [en.wikipedia.org/wiki/Cache_manifest_in_HTML5]

edit

boomhauer

twelve years ago

this would be "restore web page" instead of "reload web page".

I would use this, as it is the main reason I keep 30 or 40 browser tabs open at a time.

edit

Mathieu 'p01' Henri

13 years ago

This is where HTML5 AppCache + localStorage are coming to the rescue. These two APIs allow web sites and applications to bootstrap themselves and make sure static resources and previous state are maintained. They let the author tell the browser what to cache

FWIW, Opera snapshots the DOM & co. to provide instant Back & Forward feature. Parts of this is also saved in the session for the next time you start Opera or switch back to that session but I'm not sure how much. Sorry.

edit

Jon-Carlos Rivera

13 years ago

I have a browser-based script that generates 10s of thousands of random boxes over an area about 100x larger than the visible canvas, sticks them into an r-tree (over 500mb of data in Firefox), and then animates them.

While not very impressive by itself, what always amazed me is that if you were to go to another URL in the middle of the generation, you can always hit the back button and watch the generation resume from _exactly_ where you left off!

Firefox already caches everything: the DOM, the entire JavaScript state, and all resources loaded by the page. It does all this so that hitting the back button is as instantaneous as possible.

Web applications like GMail actually try very hard to subvert this natural behavior. It is this very subversion that the author is actually complaining about here.

Then again, just imagine how many poorly this blog post would have been received if the had made the correct claim that, "Google, for all their server-side prowess, can't seem to engineer web apps correctly."

edit

Bill Pullen

13 years ago

Hello I have just implemented a set of techniques at my work place that are commonly used around the web in order to try and solve this problem. The bottle neck in the problem is server response time that is something that will take a lot of work but here is what I did recommended by yslow.

Apache says every css,js, and image file does not expire for 10 years after access (so user loads page files stored in cache)

Whenever a change is made to the css or js files it gets run through a script using yui-compressor which combines and minifies the files.

Then in the program that gets compiled a version number based on the modified time gets appended to the filename (e.g. style.123434343.css) basically what that boils down to is if newer grab from server instead of cache

Then Apache uses mod_rewrite to strip the appended version number and serve the user the file because no actual file with that name exists, the rule ignores any file or dir that currently exists.

Finally most of the assets are gzipped when served which in some case can worsen performance depending on filetype so do some testing.

If I wanted to go further I could implement a manifest file and use local storage to store some heavy files on the user's computer but that spec is still newish at least in terms of implementation.

Other than that you just have to do optimization of any databases queries and tight loops in your code. There are some web apps that load relatively fast, Heres hoping for faster broadband soon!!

edit

dan

13 years ago

That's a good idea. Essentially, just serialize the DOM enough be able to re-hydrate it back into a new tab later. You'd need a way to serialize the JavaScript environment as well in order to bring along globally-accessible objects like "window.someCustomThing" as well as non-public data (like DOM event handlers that are built using closures).

edit

13 years ago

As an occasional Flex coder, I can provide a reason for not doing that. Flex pushes a Flash application to the browser and interacts with it. I can put up a new Flex application on the browser and have all the users using it straight away. If they cache the Flash, they don't get new patches/features, and there's a possibility the server end and the client end will be out of step, resulting in much frustration and anger directed at me.

edit

Pal

13 years ago

In GMail labs, you can enable a feature to see a preview of your inbox while GMail is loading.

edit

skco

13 years ago

1. The source files for the application are loaded from the server

Not necessarily, depends on the server settings and if you already have the source in your cache. But usually you want to have the latest version of the website because new data might rely on it and it's usually better and less buggy. Downloading this is quite fast anyway since it static and can be minified into very few requests. If this is slow it's because of bad server-setup/coding.

2. The source code is compiled and run

Negligible. I write massive javascript-apps and they still just say poof to load.

3. Requests are made to retrieve the application state from the server

Can be done already. Again, depends on the servers cache-settings. And again, you usually want the latest application state.

4. the DOM is manipulated to present the state to the user.

Negligible (except in IE)

Number 3 would be the most heavy operation here, especially if it contains images and stuff or if the server has a slow database. But otherwhise all 4 steps above can be done in under 250ms on a decent connection, without any of the caching i mentioned above.

But i agree that as we move more and more apps to the web it would certainly be nice to be able to just pop up an app to peek at old data without reloading all new data. I mean, you don't want to wait a second every time you alt-tab between windows. So here i would say that web-developers should take some responsibility and code applications that are cache aware and can be made to startup without any connection to the server.

edit

Graham

13 years ago

So, essentially you are suggesting browser caching? Something that has been around for a very long time, and that all of the major browsers implement already? And that for web "applications" - as opposed to static web pages - generally gets disabled by the server because otherwise you end up serving stale data to the user...

How IE <canvas> tag emulation works

At the time of this writing, Internet Explorer at version 8.0 still lacks the <canvas> tag. But you can easily add the capability by including a short javascript file in your page. At first glance, that's astounding. How do you implement an entire vector graphics API in a few lines of Javascript?

Using the Acer Aspire One as a web server

A netbook can be ideal for a home web server. They are cheap, and use less power than a CFL light bulb.

20 lines of code that will beat A/B testing every time

A/B testing is used far too often, for something that performs so badly. It is defective by design: Segment users into two groups. Show the A group the old, tried and true stuff. Show the B group the new whiz-bang design with the bigger buttons and slightly different copy. After a while, take a look at the stats and figure out which group presses the button more often. Sounds good, right? The problem is staring you in the face. It is the same dilemma faced by researchers administering drug studies. During drug trials, you can only give half the patients the life saving treatment. The others get sugar water. If the treatment works, group B lost out. This sacrifice is made to get good data. But it doesn't have to be this way.

Stock Picking using Python

Python can tell you which stocks to buy. It's a sure thing!

Finding great ideas for your startup

"I just don't have any ideas." This is the #1 stumbling block for budding entrepreneurs. Here are a few techniques to get the creative juices flowing.

An instant rhyming dictionary for any web site

Sometimes your API has to be simple enough for non-technical people to use it. Find out how to include a rhyming dictionary on your web page just by copying and pasting.

Installing the Latest Debian on an Ancient Laptop

The challenge: Install Linux on a really old laptop. The catch: It has only 32 MB of RAM, no network ports, no CD-ROM, and the floppy drive makes creaking noises. Is it possible? Yes. Is it easy? No. Is is useful? Maybe...

Let's read a Truetype font file from scratch

Walkthough of reading and interpretting a TrueType font file in a few lines of Javascript.

Tool for Creating UML Sequence Diagrams

If you have to draw something called "UML Sequence Diagrams" for work or school, you already know that it can take hours to get a diagram to look right. Here's a web site that will save you some time.

Usability Nightmare: Xfce Settings Manager

Rant: Why can't anyone make a good settings screen?