GreenGnn.ORG

google gears是提供离线存储的一个平台，NB的应用gmail的离线版，google日历的离线版等，他的本地存储对不经常变动的静态文件进行存储，降低请求数挺爽的，qzone已经采用了，不过今天我测试了下又没了。

下面简单几句就搞定静态文件的存储，如果安装了gears，就可以体验到我的blog的文件本地存储服务。
一个完整的离线测试demo。

简单的代码

<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
var localServer = google.gears.factory.create('beta.localserver');
var store = localServer.createManagedStore('test-store');
store.manifestUrl = 'site-manifest.txt';
store.checkForUpdate();
</script>

// site-manifest.txt
{
  "betaManifestVersion": 1,
  "version": "site_version_string",
  "entries": [
    { "url": "site.html" },
    { "url": "gears_init.js" }
  ]
}

正常情况下，文件会被写到head区域，不管本页面用得到用不到就要加载，这种方式会造成一次性请求数过多加大block的时间，也容易造成文件字节过大。

延迟加载的方案是通过js在dom需要的位置load文件，比如一些需要用户触发才展示的组件，日历选择，弹出框等。

一个demo

function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
function loadCSS(url){
        var cssLink = document.createElement("link");
        cssLink.rel = "stylesheet";
        cssLink.rev = "stylesheet";
        cssLink.type = "text/css";
        cssLink.media = "screen";
        cssLink.href = url;
        document.getElementsByTagName("head")[0].appendChild(cssLink);
}