Question

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

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

我考虑过使用缓存清单，但这样做的缺点是浏览器会在每次加载页面时请求缓存清单，而且由于我们没有使用单页面Web应用程序，因此会向服务器。

我们可以在localStorage中缓存javascript（在移动版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的加载位置。

我已将其拆分为标题和其中一个页脚的脚本。它们以内联方式显示。

在标题中（我把它放在这里，因为我们使用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>

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

<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上运行时，它会加载脚注中的脚本。

注意：我添加了代码来包装try catch中的evals，因为我在firefox中遇到了问题。

Answer 2

另外，我还遇到了这个名为basket.js的脚本加载器，它可能正是您想要的。

Answer 3

我有一个类似的问题，并为此创建了一个小型库。您可以在https://github.com/webpgr/cached-webpgr.js

找到它

我创建它因为basket.js有一些依赖性并提供了我需要的更多功能。你可以在Github检查我的代码，我相信你能够很快地理解它的全部内容。但是如果你只想继续使用它，这里有一个完整的例子如何使用它。

完整的图书馆：

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

调用库

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
    requireScript('examplejs', '0.0.3', 'example.js');
});

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

3 个答案: