页面优化之加快JS下载速度

本文综合了网上的几篇文章，揉捏到一块了，估计网上也有这种揉捏版本，如有雷同，纯属巧合

　　越来越多的Web开发采用了JS库，如Extjs,这样的好处是开发效率高，界面可用性高，而且好看（尤其对于 没有美工的团队来说，它尤其合适）。但问题是通常这样的类库连同他带的CSS文件都比较大，通常有500k-600k . 用户第一次访问的时候，会等待较长时间.如何让用户感觉访问起来很快呢？可以使用如下办法。

　　1. JS文本压缩，很多工具头提供压缩JS文件，如去掉空格和回车符号，去掉注释。

　　2. 向Extjs这样的库即使压缩了也很多，可以配置服务器端的压缩功能，压缩成gzip，如Tomcat：

　　<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"
        compression="on"
        compressionMinSize="2048"
        noCompressionUserAgents="gozilla, traviata"
        compressableMimeType="text/javascript,text/xml,text/css"    
       />

           这样能节省一半的带宽

     3. 采用动态下载，在用户访问首页 的时候，在页面尾部动态加载 JS.客户在浏览首页过程中或者在填写登陆用户名过程中，JS文件已经下载完了或者差不多了.

    如下定义了动态加载的代码：

<script>

var totalFile = 2;
var downloaded = 0;
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(url);
            }
        };
    } else { //Others
        script.onload = function(){
            callback(url);
        };
    }

    script.src = url;
    document.body.appendChild(script);
}

function completed(url){
downloaded++;
//console.log(url+" is completed");
//show url has downloaded
}

在html页面尾部动态加载JS　　

<script>
var version=2;
loadScript("/html/common/ext/ext-all-debug.js?version="+version,completed);
loadScript("/html/common/ext/adapter/ext/ext-base.js?version="+version,completed); ;
</script>
</BODY>

其中version是提供一种版本号，每次修改js或者css,可以让浏览器下载最新的版本

最后，这套方案再次验证了，要使得系统性能好，要么是它真的好，要么使得它看起来很好