Chrome / Web瀏覽器重新緩存錯覺

Question

好的，所以我想出了一個很酷的方法，即僅在文件被修改時才強制文件重新緩存自身。 以下是JS中的以下代碼：

function getCookie(name) {
    var value = "; " + document.cookie;
    var parts = value.split("; " + name + "=");
    if (parts.length == 2) {
        return parts.pop().split(";").shift()
    } else {
        return ''
    }
}
function fetchHeader(url, wch) {
    try {
        var req = new XMLHttpRequest();
        req.open("HEAD", url + '?t=' + Date.now(), false);
        req.send(null);
        if (req.status == 200) {
            return req.getResponseHeader(wch);
        } else return false;
    } catch (er) {
        return er.message;
    }
}
if (['npcdata.txt'].indexOf(u) != -1) {
    lastModified = fetchHeader(u, 'Last-Modified');

    if (lastModified != getCookie(u)) {
        fc = '?=' + Date.now() + '';
        document.cookie = u + '=' + lastModified + '';
    }
} else {
    fc = ''
}
x = this.ActiveXObject;
x = new(x ? x : XMLHttpRequest)('Microsoft.XMLHTTP');
x.open(d ? 'POST' : 'GET', u + fc, 1);
--sniped code, rest of ajax request data here like (x.send)--

現在，請原諒我的冗長代碼。 基本上，它執行HEAD HTTP Request來檢查文件頭和上次修改日期。 然后，將其與用戶cookie中存儲的文件的最后修改日期進行比較（如果不同），我使用x參數將?=Date.now()字符串應用於AJAX URL的末尾，以便重新下載新文件。 工作正常！ 並顯示新的修改文件內容。

問題是...由於某些非常奇怪的原因，在使用?t=Date.now()下載新文件之后，它會讀取文件的新更改，但隨后的數據在再次刷新后不會被緩存。 在我什至應用?t=Date.now()之前，它都會返回到原始npcdata.txt值。 這對我來說毫無意義。

?t=Date.now()在URL末尾添加?t=Date.now()字符串來獲取新數據，但又不re-cache新文件？ 但這給我一種錯覺，因為當使用帶有?t=字符串的AJAX請求文件時，它顯示了更新的版本，但隨后繁榮了，在刪除?t=Date.now()字符串之后，它立即返回原始的緩存版本？ 什么？

因此， 僅通過檢查上次修改日期對文件進行修改后，才能重新緩存文件嗎？ 必須有一種使用Javascript的方法。

Answer 1

我發現了問題。

我想Chrome會使用?t=來保存它請求的任何文件，因為它是自己緩存的，並且不會重新緩存文件的來源 。 我懷疑這是chrome每次為每個新的緩存文件遞歸更新每個新緩存文件時都會重新更新緩存的性能問題。 因此，這很有意義。

解決方法是，我只需要將保存在用戶cookie中的時間戳添加到?t=參數中。 因此，例如在我的代碼中它將是：

fc='?='+getCookie(u)+'';

這樣，該文件將始終具有相同的確切版本號並保持高速緩存，並且如果被修改，它將被更新和更改。

與該屏幕快照有關 ，它看起來有些丑陋，但是我們可以稍后在Javascript中更改數據值，以使URL更漂亮。

這里出了什么問題？ 我只是認為應用?t='+Date.now()+'會重新緩存原始文件，事實並非如此。 您需要保持相同的值（無論將其存儲在何處），並將其應用於?t=參數。 為了使新的緩存文件生效。