Hate UML?

Draw sequence diagrams in seconds.
http://www.websequencediagrams.com

Why don't web browsers do this?
Posted on: 2011-02-06 17:10:14

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,

  1. The source files for the application are loaded from the server,
  2. The source code is compiled and run.
  3. Requests are made to retrieve the application state from the server, and
  4. 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'.

Want more programming tech talk?
Add to Circles on Google Plus
Subscribe to posts

Post comment

Real Name:
Your Email (Not displayed):

Text only. No HTML. If you write "http:" your message will be ignored.
Choose an edit password if you want to be able to edit or delete your comment later.
Editing Password (Optional):

Graham

2011-02-07 14:43:07
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...

skco

2011-02-07 15:16:02
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.

Pal

2011-02-07 18:43:17
In GMail labs, you can enable a feature to see a preview of your inbox while GMail is loading.

2011-02-07 19:00:38
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.

dan

2011-02-08 00:54:52
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).

Bill Pullen

2011-02-08 02:13:12
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!!

Jon-Carlos Rivera

2011-02-08 18:51:04
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."

Mathieu 'p01' Henri

2011-03-23 05:35:03
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.

boomhauer

2012-02-25 21:59:13
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.

Ty Cahill

2012-08-23 18:26:11
Sounds like you're looking for the cache manifest in HTML5.

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

kaustubh

2013-04-16 12:20:19
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 .

Email
steve.hanov@gmail.com

Other posts by Steve

Yes, You Absolutely Might Possibly Need an EIN to Sell Software to the US How Asana Breaks the Rules About Per-Seat Pricing 5 Ways PowToon Made Me Want to Buy Their Software How I run my business selling software to Americans 0, 1, Many, a Zillion Give your Commodore 64 new life with an SD card reader 20 lines of code that will beat A/B testing every time [comic] Appreciation of xkcd comics vs. technical ability VP trees: A data structure for finding stuff fast Why you should go to the Business of Software Conference Next Year Four ways of handling asynchronous operations in node.js Type-checked CoffeeScript with jzbuild Zero load time file formats Finding the top K items in a list efficiently An instant rhyming dictionary for any web site Succinct Data Structures: Cramming 80,000 words into a Javascript file. Throw away the keys: Easy, Minimal Perfect Hashing Why don't web browsers do this? Fun with Colour Difference Compressing dictionaries with a DAWG Fast and Easy Levenshtein distance using a Trie The Curious Complexity of Being Turned On Cross-domain communication the HTML5 way Five essential steps to prepare for your next programming interview Minimal usable Ubuntu with one command Finding awesome developers in programming interviews Compress your JSON with automatic type extraction JZBUILD - An Easy Javascript Build System Pssst! Want to stream your videos to your iPod? "This is stupid. Your program doesn't work," my wife told me The simple and obvious way to walk through a graph Asking users for steps to reproduce bugs, and other dumb ideas Creating portable binaries on Linux Bending over: How to sell your software to large companies Regular Expression Matching can be Ugly and Slow C++: A language for next generation web apps qb.js: An implementation of QBASIC in Javascript Zwibbler: A simple drawing program using Javascript and Canvas You don't need a project/solution to use the VC++ debugger Boring Date (comic) barcamp (comic) How IE <canvas> tag emulation works I didn't know you could mix and match (comic) Sign here (comic) It's a dirty job... (comic) The PenIsland Problem: Text-to-speech for domain names Pitching to VCs #2 (comic) Building a better rhyming dictionary Does Android team with eccentric geeks? (comic) Comment spam defeated at last Pitching to VCs (comic) How QBASIC almost got me killed Blame the extensions (comic) How to run a linux based home web server Microsoft's generosity knows no end for a year (comic) Using the Acer Aspire One as a web server When programmers design web sites (comic) Finding great ideas for your startup Game Theory, Salary Negotiation, and Programmers Coding tips they don't teach you in school When a reporter mangles your elevator pitch Test Driven Development without Tears Drawing Graphs with Physics Free up disk space in Ubuntu Keeping Abreast of Pornographic Research in Computer Science Exploiting perceptual colour difference for edge detection Experiment: Deleting a post from the Internet Is 2009 the year of Linux malware? Email Etiquette How a programmer reads your resume (comic) How wide should you make your web page? Usability Nightmare: Xfce Settings Manager cairo blur image surface Automatically remove wordiness from your writing Why Perforce is more scalable than Git Optimizing Ubuntu to run from a USB key or SD card UMA Questions Answered Make Windows XP look like Ubuntu, with Spinning Cube Effect See sound without drugs Standby Preventer Stock Picking using Python Spoke.com scam Stackoverflow.com Copy a cairo surface to the windows clipboard Simulating freehand drawing with Cairo Free, Raw Stock Data Installing Ubuntu on the Via Artigo Why are all my lines fuzzy in cairo? A simple command line calculator Tool for Creating UML Sequence Diagrams Exploring sound with Wavelets UMA and free long distance UMA's dirty secrets Installing the Latest Debian on an Ancient Laptop Dissecting Adsense HTML/ Javascript/ CSS Pretty Printer Web Comic Aggregator Experiments in making money online How much cash do celebrities make? Draw waveforms and hear them Cell Phones on Airplanes Detecting C++ memory leaks What does your phone number spell? A Rhyming Engine Rules for Effective C++ Cell Phone Secrets