Javascript Internet Explorer注意到location.hash的更改时出现延迟

这可能是常识，但我似乎找不到任何关于这个问题的东西。以下是一个小背景：

我有一些页面使用Bootstrap的标签系统。在这些页面的

$（document）.ready（）

函数中，有一些基本代码根据URL中的散列激活选项卡，还有一个附加到选项卡所示函数的短函数，该函数使用

location.replace更改位置的散列。结果是，您可以链接到特定的标记，并且刷新页面可以使您保持在当前选项卡上。这在除Internet Explorer之外的所有应用程序中都很好

在InternetExplorer中（我一直在用IE9进行测试），在IE识别出位置散列已经改变之前，似乎有一个延迟（大约10-15秒）。在地址栏中手动输入散列并加载页面时也会发生类似的情况——需要几次刷新才能识别。单击嵌入了散列的链接似乎可以正常加载

我想这是某种小故障。我想我可以在处理持久选项卡状态的代码上附加一个cookie，但是有没有其他人找到更优雅的方法来处理这个问题？
我不熟悉或不知道引导选项卡系统中有任何延迟，您可能想验证这个问题不是由于您的特定用途或计算机造成的。在我熟悉的任何浏览器上使用jQuery hashchange插件都无法产生任何延迟

至于处理基于散列的导航的其他方法，我编写了以下代码来使用jQuery hashchange插件更改hashchange事件的内容/页面；主要是为了干净地支持带有哈希的back/forward/links。下面是我正在使用的一个精简版本

该示例提供了一个锚定链接以及使用onclick事件生成的锚定链接。最好使用onclick事件，因为如果用户单击当前活动的选项卡，页面仍会重新加载。跟踪页面加载时间，以确保页面在100毫秒内不会加载两次

jQuery哈希插件：


var hashUris=[]；
变量表集；
var actPage=''；
//裸选项卡数组（用于填充选项卡html和哈希数组）
tabSet=[{hash:'page1'，pageId:1，id:1}，{hash:'page10'，pageId:10，id:2}，{hash:'page20'，pageId:20，id:3}]；
//处理哈希事件
$（函数（）{
//循环所有选项卡数组，将项目添加到哈希数组，确定主页面和活动页面
$.each（选项卡集，函数（i，选项卡）{
//使用tabIndex防止以后循环散列数组
tab.tabIndex=i；
//默认情况下，第一个选项卡是主选项卡
如果（typeof priTabId==‘未定义’）priTabId=tab.id；
//将选项卡/页面信息添加到哈希数组
push（{hash:tab.hash，pageId:tab.pageId，tabIndex:i，tabId:tab.id，priActive:priTabId==tab.id}）；
//要加载的初始页面
如果（priTabId==tab.id）priTabIndex=i；
//当前散列
如果（location.hash&&“#”+tab.hash==location.hash）activeTabIndex=i；
});
如果（！location.hash&&！actPage&&typeof priTabIndex！=“未定义”）{
//页面加载，加载主选项卡
loadTabPage（priTabIndex）；
}else if（location.hash&&！actPage&&typeof activeTabIndex！=“未定义”）{
//页面刷新
loadTabPage（activeTabIndex）；
}
$（窗口）.hashchange（函数（）{
if（location.hash）{
$.each（哈希URI，函数（索引，哈希URI）{
if（“#”+hashUri.hash==location.hash&&actPage！=hashUri.pageId+“#”+hashUri.hash）{
//找到匹配的选项卡/页
loadTabPage（hashUri.tabIndex）；
}
});
}否则如果（第页）{
//导航到空空间，尝试查找主活动页
$.each（哈希URI，函数（索引，哈希URI）{
if（hashUri.priActive）loadTabPage（hashUri.tabIndex）；
});
}
});
});
函数loadTabPage（tabIndex）{
if（tabSet[tabIndex]=='undefined'）返回；
//跟踪页面加载的时间
lastLoad=tabSet[tabIndex].lastLoad；
tabSet[tabIndex].lastLoad=new Date（）.getTime（）；
//每1ms-100ms仅加载一次
if（tabSet[tabIndex].lastLoad-lastLoad<100）返回；
//在此处加载页面内容/执行操作
警报（tabSet[tabIndex].pageId）；
//$（“#content”）.load（“？pageId=”+tabSet[tabIndex].pageId）；
//hashchange期间根据哈希检查活动页
actPage=tabSet[tabIndex].pageId+'#'+tabSet[tabIndex].hash；
};
//用于创建选项卡的用户代码
$（函数（）{
//使用tabs数组显示一些选项卡
//这取决于要在tabSet数组上设置.tabIndex的上述代码
tabsObj=$（''）；
$.each（选项卡集，函数（i，选项卡）{
如果（！tab.hash）返回true；
tmpObj=$（''+tab.hash+''）；
tmpObj.data（'tabIndex'，tab.tabIndex）；
//使用onclick事件更改页面
tmpObj.bind（'click'，函数（e）{
if（typeof$（this）.data（'tabIndex'）=='undefined'| | typeof tabSet[$（this）.data（'tabIndex'）]=='undefined'）返回；
//如果是活动哈希，则直接加载页面，否则更改为单击的哈希
if（“#”+tabSet[$（this）.data（'tabIndex'））].hash==location.hash）{
loadTabPage（$（this.data（'tabIndex'））；
}否则{
location.hash=tabSet[$（this）.data（'tabIndex'））].hash；
}
e、 停止传播（）；
返回false；
});
tmpObj.附录（tabsObj）；
删除tmpObj；
});
tabsObj.appendTo（$（“#tabs”）；
删除tabsObj；
});
一些运行IE8的客户端刚刚遇到了这个问题。我们有一个运行sammy.js+knockout和bootstrap的网页。每条路由（带有散列的链接）需要800-900毫秒才能导航到。然而，当我从页面中删除所有css/样式时，每条路线的导航耗时约30毫秒。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://benalman.com/code/projects/jquery-hashchange/jquery.ba-hashchange.js"></script>
<script>
var hashUris = [];
var tabSet;
var actPage = '';
// bare tab array (use to populate tab html and hash array)
tabSet = [{hash: 'page1', pageId:1, id: 1}, {hash: 'page10', pageId:10, id:2 }, {hash: 'page20' , pageId: 20, id: 3}];

// handles the hash events
$(function() {
    // loop all tab array, add items to hash array, determine primary page and active page
    $.each(tabSet, function(i, tab) {
        // using tabIndex to prevent looping hash array later
        tab.tabIndex = i;
        // first tab is primary by default
        if (typeof priTabId == 'undefined') priTabId = tab.id;
        // add tabs/page info to hash array
        hashUris.push({hash: tab.hash, pageId: tab.pageId, tabIndex: i, tabId: tab.id, priActive: priTabId == tab.id});
        // initial page to be loaded
        if (priTabId == tab.id) priTabIndex = i;
        // current hash
        if (location.hash && '#'+tab.hash == location.hash) activeTabIndex = i;
    });
    if (!location.hash && !actPage && typeof priTabIndex != 'undefined') {
        // page load, load primary tab
        loadTabPage(priTabIndex);
    } else if (location.hash && !actPage && typeof activeTabIndex != 'undefined') {
        // page refresh
        loadTabPage(activeTabIndex);
    }
    $(window).hashchange( function(){
        if (location.hash) {
            $.each(hashUris, function(index, hashUri) {
                if ('#'+hashUri.hash == location.hash && actPage != hashUri.pageId + '#' + hashUri.hash) {
                    // found matching tab/page
                    loadTabPage(hashUri.tabIndex);
                }
            });
        } else if (actPage) {
            // navigated to empty space, attempt to find a primary active page
            $.each(hashUris, function(index, hashUri) {
                if (hashUri.priActive) loadTabPage(hashUri.tabIndex);
            });
        }
    });
});
function loadTabPage(tabIndex) {
    if (typeof tabSet[tabIndex] == 'undefined') return;

    // track when the page was loaded
    lastLoad = tabSet[tabIndex].lastLoad;
    tabSet[tabIndex].lastLoad = new Date().getTime();
    // load only once in 1ms-100ms
    if (tabSet[tabIndex].lastLoad - lastLoad < 100) return;

    // load page content/do actions here
    alert(tabSet[tabIndex].pageId);
    //$("#content").load('?pageId='+tabSet[tabIndex].pageId);

    // active page checked against hash during hashchange
    actPage = tabSet[tabIndex].pageId + '#' + tabSet[tabIndex].hash;
};
// user code to create tabs 
$(function() {
    // use tabs array to display some tabs
    // this depends on the above code to set .tabIndex on the tabSet array
    tabsObj = $('<div/>');
    $.each(tabSet, function(i, tab) {
        if (!tab.hash) return true;
        tmpObj = $('<span>'+tab.hash+'</span>');
        tmpObj.data('tabIndex', tab.tabIndex);

        // use an onclick event to change the page
        tmpObj.bind('click', function(e) {
            if (typeof $(this).data('tabIndex') == 'undefined' || typeof tabSet[$(this).data('tabIndex')] == 'undefined') return;

            // load page directly if active hash, otherwise change to clicked hash
            if ('#'+tabSet[$(this).data('tabIndex')].hash == location.hash) {
                loadTabPage($(this).data('tabIndex'));
            } else {
                location.hash = tabSet[$(this).data('tabIndex')].hash;
            }
            e.stopPropagation();
            return false;
        });
        tmpObj.appendTo(tabsObj);
        delete tmpObj;
    });
    tabsObj.appendTo($("#tabs"));
    delete tabsObj;
});
</script>
<div id="tabs"><a href="#page1" >Link to Hash</a></div>
<div id="content"></div>