实现ajax+jquery框架下瘦身方案

时间:2009-12-21 11:47来源:未知作者:admin 点击: 次

分享到：

作者：文刀无尽用过ajax.net 的朋友都知道，使用该框架，发布版本会生成超过80K的脚本文件。而debug版更大。如果应用的场景用于企业内网，这个问题不会显现出来，而如果场景是互联

作者：文刀无尽

用过ajax.net 的朋友都知道，使用该框架，发布版本会生成超过80K的脚本文件。而debug版更大。如果应用的场景用于企业内网，

这个问题不会显现出来，而如果场景是互联网，那问题就大了。而我非常不幸，选用了，ajax+jquery+互联网应用场景。

问题：

1.可以通过修改： <asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release">，将scriptMode

设置为release　还有配置web.config 中结点<compilation debug="true" >　将 debug 设置为false可以将生成WebResource.js

在80K左右。但也依然很大。

2.jquery.js+ui.js加起来就有200K以上，这个是比较恐怖的事情。

解决方案:

1.由于我在整个项目中只用到了从服务器端读取ascx生成的html脚本，现在我计划舍弃ajax框架，采用javascript 直接访问wcf的方式来访问服务器端。

也许有人问，为什么不用webservice？原来我打算用的webservice,但后来碰到一个奇怪的问题，要求登录。而我的webservice是是放在web server里的，

访问页面却不需要登录。在给该目录所有权限，等等很多尝试无果后，决定采用wcf.

2.经过1的改造，虽然大幅缩小了WebResource.js,但jquery.js+ui.js超过200K的大小不能小视。最先打算采用gzip的方式在IIS里压缩的方式来解决。

但经过测试，效果不明显。后来决定用异步加载资源的方式。页面和资源并行下载。而不是串行下载。

但使用这个办法，还有一个问题，因为，如果采用异步下载的话，比如：A.js,B.js两个文件，如果B.js有地方用到A.js中的函数，那么，由于是异步下载

那就会碰到在B.js中执行A.js函数，而A.js却还没有加载完全的情况。唯一的解决办法，只能是让它们顺序下载。而怎么样让它们顺序下载呢？

这里，我用了一个递归的算法来实现了这个需求：下面见代码

//功能：采用递归的方法串行下载资源

//作者：文刀无尽

//日期：2009-03-13

//版权：http://www.dreampea.com/ 使用请保留这里

function AsyDownLoadAllResource() {

    var urls = "/Resource/Javascript/jquery.js;/Resource/Javascript/json2.min.js"; //在这里，将要异步下载的资源，用分号隔开
    AsyDownLoadResource(urls);
}
function AsyDownLoadResource(resQueue) {
    if (resQueue == undefined) {
        return;
    }
    var newResQueue = resQueue.replace(";", "#"); //将第一个分号替换为"#"
    var resArray = newResQueue.split("#");

    if (resArray.length < 1) {
        return;
    }
    var url = resArray[0]; //+ (resArray.indexOf("?") > 0 ? "&" : "?") + "num" + Int((9999) * Rnd(Now()) + 1);

    var xmlhttp;
    var Arr = new Array()
    try {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject('MICROSOFT.XMLHTTP');
        } catch (e) {
            try {
                xmlhttp = new XMLHttpRequest();
            } catch (e) { }
        }
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                //成功返回值
                AddScriptToPage(url);

                if (resArray.length == 2 && resArray[1] != undefined) {
                    AsyDownLoadResource(resArray[1]); //递归
                }
            } else {
                alert(xmlhttp.status);

            }
        }
    }
    if (url != undefined) {
        xmlhttp.open("get", url);
        xmlhttp.send(null);
    }
}

function AddScriptToPage(scriptUrl) {
    var script = document.createElement('script');
    script.src = scriptUrl;
    script.type = 'text/javascript';
    var head = document.getElementsByTagName('head').item(0);
    head.appendChild(script);

}

这样的话，就可以先打开在加载html的同时，异步并顺序下载资源文件。

如果加载资源这一步操作也要异步的话，

还要再加上

意思即是，当加载完图片之后，才开始下载资源。由于图片的加载是异步的，所以利用它间接实现异步。

以上只是一个初步优化，当然，要做得好，还要做很多方面的控制，比如，在资源加载完这前，只能读，不能操作等。。。

初步优化后的效果目前的版本html+资源有592 KB。大家可以看一下效果。

以上的客户端层的优化，

关于服务器端的缓存方案等优化手段.