javascript - 你如何使用 html5 localStorage 在 iphone Safari 上缓存 javascript？

Question

我正在构建一个使用主要 jquery 库和我们自己的一些 js 的移动网站。我们的网站太大，数据太多，无法成为一个简单的离线/在线网络应用程序。我们需要网络连接。

我正在尝试提高缓存性能，以便为移动网站缓存大量 javascript。众所周知，iPhone 的 safari 上的缓存仅限于 15-25kb 大小的文件，而我们缩小后的 js 约为 125kb。

我考虑过使用缓存 list ，但这有一个缺点，即浏览器会在每次加载页面时请求缓存 list ，而且由于我们没有使用单页网络应用程序，这会增加额外的请求服务器。

我们可以将 javascript 缓存在 localStorage 中(在移动 safari 和 android 浏览器中可用)然后从那里执行吗？

Answer 1

是的，你可以。 (很抱歉回答我自己的问题，我认为这是一个有趣的解决方案)

我在幻灯片 #12 上找到了代码示例的大纲。

http://www.slideshare.net/jedisct1/abusing-javascript-to-speedup-mobile-web-sites

我已经在 http://m.bbref.com/ 上实现了这个(仍处于测试阶段)

当创建新版本时，您必须使用脚本 url 的版本控制来刷新缓存，但这适用于具有 localStorage 的页面，并且在 localStorage 不可用时也适用。我在页脚中添加了一些调试代码，以向您展示 js 从何处加载。

我已将其拆分为页眉脚本和一个页脚脚本。这些显示为内联。

在 header 中(我把它放在这里是因为我们使用 modernizr 将一些类添加到 html 标记中，我希望这些类尽快放在那里以用于呈现目的。可以移至页脚。

<script type="text/javascript">
// .001 is the current js version
// this script assumes it is in the root web directory.
var js_file = "site_lib.001.js";
// vars to store where the file is loaded from.
var _mob_load_js = false;
var _mob_ajax_load_js = false;
{
    // if we have localStorage and the files exists there get it.
    if(window.localStorage && window.localStorage[js_file]) {
            // eval the js file.
            try{
                window.eval(window.localStorage[js_file]);

                // successfully eval'ed the code, so 
                // we don't need to download it later.
            _mob_load_js = true;
            } catch (e) { _mob_load_js = false; }
    }
    else if (window.localStorage) {
        // We have localStorage, but no cached file, so we 
        // load the file via ajax, eval it and then store 
        // the file in localStorage

        // To remove previous versions, I remove all of our localStorage,
        // This is extreme if we store other vars there.
        window.localStorage.clear();
        // standard ajax request.
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            // eval the js
            try {
                window.eval(xhr.responseText);
                // successfully eval'ed the code, so 
                // we don't need to download it later.
            _mob_ajax_load_js = true;
            } catch (e) { _mob_ajax_load_js = false; }

        try {
                // store the js.
            window.localStorage[js_file] = xhr.responseText;
        } catch (e) {}
        }
        else {
        return;   
        }
    };
    xhr.open("GET",js_file,true);
    xhr.send();
    }
};
</script>

和页脚(出于性能原因)。我放置标准加载方法。请注意，只要您设置了过期 header ，使用此分支的浏览器都会正确缓存。

<div id="sr_external_script"></div>
<script type="text/javascript">   
// We haven't loaded the js yet, so we create a script 
// tag and get the script the old fashioned way
if (!_mob_load_js && !_mob_ajax_load_js) {
    var script=document.createElement("script");
    script.type="text/javascript";
    script.src=js_file;
    document.getElementById("sr_external_script").appendChild(script);
    // add a note to the footer
    document.write('<div>loaded from server and not stored</div>');
}
else if (!_mob_load_js) {
    // add a note to the footer
    document.write('<div>loaded via ajax and stored in localStorage</div>');
}
else {
    // add a note to the footer
    document.write('<div>loaded from localStorage</div>');
}
</script>

我已经在 chrome 和 safari 中确认 js 是从 localStorage 加载的，网站功能按预期工作，并且没有向服务器发出请求。我已经确认，在 IE 或 Firefox 上运行时，它会加载页脚中的脚本。

注意:由于我在 firefox 中遇到问题，所以我添加了代码以将 eval 包装在 try catch 中。