The Ugly, The Bad and The Good

As I stated in this post, I recently gave SitterSat.com a facelift.  But, for performance reasons, I also mentioned something about wanting to cache the latest blog posts as well.

On SitterSat.com, on the right hand side, you will see an animated progress bar (see previous post commentary regarding potential browser constraints).  That progress bar is intended to communicate to the user that the most recent two blog posts are being fetched from another domain, namely SitterSatBlog.com.  That’s great as we want to display those latest two posts to the user that is visiting SitterSat’s home page.  However, for what we’re trying to achieve, there’s no reason to be fetching so often, certainly not as often as it was.

The ugly

pieinfacePrevious to the facelift, I was fetching the latest blog posts synchronously.  So every time someone accessed SitterSat’s home page, a request would be sent out synchronously to fetch the latest two blog posts.  The home page would not fully load until that was complete.  Yuck.  That’s the ugly.  Actually, that’s the really ugly.  Picture a self-initiated virtual pie in the face.  Moving on.

Ah yes, that’s my original Photoshop Elements artwork there.  Best I can do.

The bad

During the weekend of the facelift, I changed it to fetch the blog posts asynchronously.  Now, when someone accessed the home page, everything would fully load aside from asynchronous calls.  The user could wait for this to finish or go do something else.  The problem is that the results were not cached.  So every time someone accessed the home page, a fetch request would go out.  Like I said before, for the purposes of SitterSat, there’s no reason for it to fetch so often.  So that’s the bad.

The good

I am now caching the results.  Here’s what I did.  I took the plain Jane ajax call and wrapped it in a function (code below).  That function does the determination of whether or not to load it from sessionStorage.  By the way, I’m using Modernizr‘s sessionStorage check to make sure the browser supports it.  Fortunately, this has been around for a while so most all modern browsers seem to support it quite well.

Now, for my purposes, I’m ok with session storage versus local storage or even something else for that matter, like TTLs, local disk, database or some other cross-domain notification mechanism.  I’m also ok with the fact that posts will be fetched if a client browser application is reloaded.

But I’d love some feedback if you think this is a poor idea in terms of a simple sessionStorage Javascript implementation.  Maybe there’s a better way?  If so, I would be thrilled if you let me know.  Of course, if you like it and/or think it may be helpful to you, please do share.  That’ll give me some validation that I’m not the worse Javascript coder you’ve ever seen.  Also, as a side note, I don’t believe safari mobile actually supports this storage mechanism so it will likely fetch, fetch, fetch.

    //this function will load blog roll from sessionstorage or go get it if need be
    function doLoadBlogRoll()
    {
        var sessionKey = "postsInSession";
        //if browser supports session storage, try to use it
        if (sessionStorage) {
            var sessionValue = sessionStorage.getItem(sessionKey);
            if (sessionValue) {
                // update website
                $("#div_blogroll").html(sessionValue); // We just avoided one ajax request
                return true;
            }
        }
        //browser doesn't support session storage or the session var is empty, go get posts
        $.ajax({
            url: "myspecificurlgoeshere",
            type: 'GET',
            success: function (response) {
                // update website
                $("#div_blogroll").html(response);
                //if sessionStorage supported, save response in session
                if (sessionStorage) {
                    sessionStorage.setItem(sessionKey, response);
                }
            },
            error: function(xhr) {
                // handle errors
                $("#div_blogroll").html("Sorry about that, but the latest posts are currently unavailable.  Please refresh this page or try again later.");
            },
        });
        return true;
    }
Advertisements
Previous Post
Leave a comment

3 Comments

  1. Does your blog have a contact page? I’m having trouble tracking down it but, I’d
    like to send you an e-mail. I’ve got some creative ideas for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it develop over time.

    Reply
    • Hey friend, no sorry it doesn’t, but you know, I should have thought about creating something like that…I never wanted my email address out publicly available (spam, you know), but a contact page is probably a good idea. Until then, feel free to shoot me a URL to check out. Have a good one and thanks for reaching out.

      Reply
  1. Page Visibility Performance Boost « about ss

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: