Да, вы можете.(извините за ответ на мой собственный вопрос, я подумал, что это интересное решение)
Я нашел набросок примера кода здесь на слайде № 12.
http://www.slideshare.net/jedisct1/abusing-javascript-to-speedup-mobile-web-sites
Я реализовал это на http://m.bbref.com/ (все еще в бета-версии)
Вы должны использовать управление версиями скрипта, чтобы очистить кеш при создании новой версии, но это работает для страниц с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>
и в нижнем колонтитуле (по соображениям производительности). Я помещаю стандартный метод загрузки. Обратите внимание, что браузеры, использующие эту ветвь, все кешируют правильно, если у вас установлен заголовок expires.
<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 загружает скрипт, как показано в нижнем колонтитуле.
Примечание: я добавил код для переноса evals в try catch, так как у меня возникла проблема в firefox.