启用 LocalSotrage

为了让 blog 访问速度能快一点,之前尝试使用了 HTML5 的 Application Cache 来加载页面元素(css、js 等),见这一篇这一篇。不过由于没能处理好 appcache 对于加载元素的缓存与 blog 内容更新之间的矛盾,所以已放弃使用 Application Cache 而转向 LocalSotrage1 的怀抱。

LocalSotrage 本身是用来存储键值对(Key Value Pairs)的,所以想要存储文件,得使用一些手段将文件转成 Data URI 进行存储(包括存储 css、js 及图片),目前找到的能完成此项工作的“插件”有 basket.js 及 jsCache,我选择了 basket.js。

具体操作在此记录一下:

  1. 下载 basket.jscreate-stylesheet
  2. 在网页头部区域加载 basket.js 与 create-stylesheet.js,我是将这两项加载在了最前面(css 的前面)以保证首先加载它们以及自定义需要加载的元素,如此一来,后面需要引用这些加载元素时浏览器就会直接从 localstorage 里面获取了;
  3. 加载两个 js 文件后在其下加载自定义需要加载的元素,我是这样加载的:
<script>
basket.require({ url: 'http://lusir.me/theme/css/bootstrap.min.css' },
                        { url: 'http://lusir.me/theme/css/niu2.css', unique: 0.2 },
                        { url: 'http://lusir.me/theme/font-awesome/css/font-awesome.min.css' },
                        { url: 'http://lusir.me/theme/css/pygments/github.css' },
                        { url: 'http://lusir.me/theme/css/jquery.fancybox.css' },
                        { url: 'http://lusir.me/hermit/style/hermit.min.css' })
.then(function(responses) {
_stylesheet.appendStyleSheet(responses[0], function() {});
    basket.require({ url: 'http://lusir.me/theme/js/bootstrap.min.js' },
                            { url: 'http://lusir.me/theme/js/jquery-1.11.0.min.js' },
                            { url: 'http://lusir.me/theme/js/niu2.js', unique: 0.2 },
                            { url: 'http://lusir.me/theme/js/fancy-loading.js' },
                            { url: 'http://lusir.me/theme/js/jquery.fancybox.pack.js' },
                            { url: 'http://lusir.me/hermit/script/hermit.min.js' },
                            { url: 'http://lusir.me/theme/js/jquery-1.4.4.min.js' },
                            { url: 'http://lusir.me/theme/js/slimbox2.js' },
                            { url: 'http://lusir.me/theme/js/tagcloud.min.js' });});
</script>

编辑完成以后打开浏览器访问,如果可以在 localstorage 下找到自定义加载的元素,表示 LocalSotrage 已启用。如下图:

enable-localstorage-1

至于浏览器是否真的是从 LocalSotrage 下获取加载元素还无法验证,我只能从下图中获取安慰,见图中的 From Cache。

enable-localstorage-2

需要注意的是 LocalSotrage 异域加载还需要做一些其它的工作。

参考文章

文章作者
发布时间
分类
标签