12

When you browse repositories on github ( for example https://github.com/mojombo/jekyll/tree/master/bin) it feels like it uses ajax and does not reload the whole page every time. However the url really changes (not just after the # ).

I already found this article where they write about their backend: https://github.com/blog/530-how-we-made-github-fast

But is this really the whole trick?

My pages never feel that fast and I am already using yslow to optimize it.

Peter Zeller
  • 223
  • 1
  • 4
  • Not so fast in IE8 it seems, which I assume does not support this HTML5 feature. In IE8, when the URL changes the entire page appears to be refereshed. – MrWhite Sep 04 '11 at 17:04
  • @w3d I think GitHub is either assuming that you're progressive enough to use something other than IE if you're using git. They may also just have decided not to support IE. – sholsinger Sep 07 '11 at 18:20

1 Answers1

7

The URL change is a mix of an old feature of HTML when calling an A tag with hashes,

<a href="#home">Go to my home</a>
<p>TextTextTextTextTextTextText</p>
<a id="home">

that makes possible linking parts of the same page without reloading at all, and a new HTML5 JavaScript window object

window.onhashchange

This new object it's a event handler, that fires when a link with hashes is clicked, so it's possible to handle that event with JavaScript and possibiliting browser history and back buttons. Here's a exemple

function hashChanged() {
    if (location.hash === "#home") {
        showPage('home');
    }
}

window.onhashchange = hashChanged;

Mozzila Developer Network window.onhashchange Page

jQuery hashchange event cross-browser plug-in

Community
  • 1
Victor Debone
  • 278
  • 1
  • 5