按下来回按钮时，状态对象加倍

Question

每次在浏览器上按下back和next按钮时，状态对象都会加倍。由于这个问题，浏览器变得非常慢。

$(function(){
    $('.button').click(function(e){
        e.preventDefault();
        var nextUrl = 'page1.html';
        history.pushState({url: nextUrl}, "", nextUrl);
        $('body').load(nextUrl);
    });
    history.replaceState({url: window.location.href}, '', '');

    $(window).on('popstate', function(e){
        var state = e.originalEvent.state;
        if(state){
            url = state.url;
            console.log(state);
        }
        $('body').load(url);
    });     
});
</script>


<a class="button" href="#">Click me</a>

点击浏览器上的back和next按钮，就可以在Google Chrome控制台中看到这种情况。

Object {url: "http://localhost/history/index.html"} index.html:22
Object {url: "page1.html"} index.html:22
Object {url: "page1.html"} VM3222:15
Object {url: "http://localhost/history/index.html"} index.html:22
Object {url: "http://localhost/history/index.html"} VM3222:15
Object {url: "page1.html"} index.html:22
Object {url: "page1.html"} VM3222:15
Object {url: "page1.html"} VM3226:15
Object {url: "page1.html"} VM3227:15
Object {url: "http://localhost/history/index.html"} index.html:22
Object {url: "http://localhost/history/index.html"} VM3222:15
Object {url: "http://localhost/history/index.html"} VM3226:15
Object {url: "http://localhost/history/index.html"} VM3227:15
Object {url: "page1.html"} index.html:22
Object {url: "page1.html"} VM3222:15
Object {url: "page1.html"} VM3226:15
Object {url: "page1.html"} VM3227:15
Object {url: "page1.html"} VM3268:15
Object {url: "page1.html"} VM3269:15
Object {url: "page1.html"} VM3270:15
Object {url: "page1.html"} VM3271:15

在FireFox中，控制台如下所示：