ID #6541

ajax+jquery框架下瘦身方案

用过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的同时,异步并顺序下载资源文件。

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

还要再加上

<img id="imgWorkForLoadScript" src="http://www.dreampea.com/Resource/Image/Reload.gif" onload="AsyDownLoadAllResource()" onerror="AsyDownLoadAllResource()" style="display:none" />

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

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

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

以上的客户端层的优化,关于服务器端的缓存方案等优化手段,等总结好后,再写吧。


2011-07-01 18:55
阅读:
I'm VC , Just U know Y
本站部分文章来源于互联网,版权归原作者所有。

延伸阅读:

Ajax+jQuery实现LightBox与服务器通信