Web开发中你注意这些前台开发问题了吗？(前台构架篇)

       Web2.0带给我们更好的用户体验和更炫更酷的效果，javascript，flash, Silverlight都是跃跃欲试。目前应用最多的还是javascript,所以你会经常看到很多web2.0网站有n多的js和css，这时管理这些文件和如此多的代码怎么提性能提升的问题也来了。以下就来讲讲我目前想到的一些问题吧。

       1．js和css引用时如何做到让请求进行并发下载。

       我们通过firebug，就会发现通过link和script标记在页面上的引用资源每个请求都是以一个队列形式排队等候，一个资源下载完成后才会下载别外一个请求资源。它不像我们页面里面的图片(img标记和样式中引用的图片，样式里面引用的图片必须等到css文件加载完毕后才能下载图片)，可以并发下载资源文件。YSlow曾经对Web站点优化中提出,尽量把css放在head中(样式突然在其它资源下载完毕后才展现，那太有戏剧性了)，但是有点搞不明白，为什么浏览对css加载也是一个队列，难道怕在样式中有重名部份的冲突？YSlow还提出过把js放在页面的尾部,那样的话整个页面下载js资源差不多在onload完在。这点很是深有体会，当你的script放在head的时候，整个页面展现都得script一个个加载完毕再发生，这直接影响着Web性能，我想比网站的速度比用户体验来得更重要吧，所以我们应该把js放在尾部。那么是不是说直接放在尾部就好了呢？我想还有一点可以优化的，就是让其并发下载。那么如何解决这些资源的并发下载问题呢？

       我的方法是通过动态追加dom的方法（appendChild,动态追加link和script节点标记到head下）。使用这种方式，我们会发现我们的队列突然变得成了百米冲刺了，一声哨下，都冲向终点了（当然每个并发请求数肯定还是有一定限制的）。不过在ie下appendChild这种方法在window.onload事件无法引用资源的函数，所以在ie时我用docoument.write去输出（ie下用document.write也是并发下载，而firefox是不行的）。所以通常在引用文件的时候使用include的方法，以下列出include代码。

var $include=function(file, callback){
    var isScript=file.indexOf(".css")==-1;
    var attLink,path,extName="";
    if(isScript){
        attLink="src";
        path=COREJSPATH;
        scripts = $tag("script");
        if(file.indexOf(".js")==-1) extName=".js";
    }else{
        scripts = $tag("link");
        attLink="href";
        path=CORECSSPATH;
    }
    if(file.indexOf("/")==-1){
        file=path+file+extName;
    }
    for (var i = 0; i < scripts.length; i++) {
        if(scripts[i][attLink]==file){
            return;
        }
    }
    var fileref;
    if (isScript){ //If object is a js file
        if(window.ie){
            fileref="script"+$time;
            document.write("<script src=\""+file+"\" id=\""+fileref+"\" type=\"text/javascript\"></script>");
        }else{
            fileref=$create('script');
            fileref.setAttribute("type","text/javascript");
            fileref.setAttribute("src", file);
            document.head.appendChild(fileref);
        }
    }
    else { //If object is a css file
        if(window.ie){
            fileref="script"+$time;
            document.write("<link rel=\"stylesheet\" rev=\"stylesheet\" href=\""+f+"\"  id=\""+fileref+"\"  type=\"text/css\" media=\"screen\"/>");
        }else{
            fileref=$create("link");
            fileref.setAttribute("rel", "stylesheet");
            fileref.setAttribute("type", "text/css");
            fileref.setAttribute("href", file);
            document.head.appendChild(fileref);
        }
    }
    if(callback) {
        fileref=$(fileref);
        addEvent(fileref,'load',callback);
        fileref.onreadystatechange = function(){
            if(this.readyState=="loaded" || this.readyState=="complete"){
                callback();
            }
        };
    }
};

注：

1.CORECSSPATH(当前css存放的相对路径)，COREJSPATH(当前js存放的相对路径),用这个原因主要是路径问题,这个稍后再讲。

2.callback是当文件加载完成后再调用方法。

3.顺便说一下我主要用mootools的一些函数

   2.我们的js文件管理及引用太讲究了，侵入性太强了，一个小心把顺序弄错或者依赖没引用那就惨遭了，如果像有C#的using引用多好呀!

项目一天一天在扩大，此时发现已经有一大堆js文件了，问题就来了——管理这些文件依赖和顺序很麻烦。js类库中可能存在着依赖关系，每个引用都得知道该类的依赖关系然后再写入<script src="你的js文件" type="text/javascript"></script>,而且说不定你的js有装载前的依赖关系(也就是说引用一个js前，需要把某个js放在你的引用的那个js前面)，不然你运行结果肯定是error，所以我们急需管理这样一些类的解决方案，这方面看到JSI好像做的挺不错的。(JSI还没深入研究，不太懂其原理，看似好复杂)

js的依赖关系示例（引自JSI的文档说明）

有3个类：动物（Animal），猫（Cat），老鼠（Mouse）；

他们有如下依赖关系：

猫、鼠 装载前依赖动物类（装载这两个类时，需要创建动物实例作为其原型；该操作必须在装载时完成，为装载前依赖）

猫鼠装载后，在使用过程中，相互依赖（猫鼠的行为中需要判别对方的行为，使用到了相互的引用，为相互装载后依赖）。

     可表示为如下图例：红色代表装载前依赖，浅绿色表示装载后依赖：

     

来说说我的想法（目前还未实现），最好存在一个依赖关系的配置文件,而且所有的依赖关系都存放在一个配置文件中并说明依赖关系（呵呵，最好vs自动能生成关系），我看到JSI好像每个依赖得写一个__package___.js文件，那样是不是麻烦了？(呵呵，不太懂)

   3.关于路径问题。

js,css的路径管理也是我们管理的一部份，哪天我们的页面换了个文件夹位置，就得改代码里的路径那实在是太糟糕了。所以我用上面的$include方法，只要你的核心js文件路径确定，其它路径也随之确定(用$include方法引进的资源文件)。如果你想通过改变文件位置后不用改路径的话，那么通过核心文件在服务器输出核心js ，那问题也就迎刃而解了(图片的路径也是一道理,所以w3c好像要取消img标记,统一放css中)。但是这样做会产生对某种开发语言的依赖,不知道园子里的朋友有没有更好的解决办法？

   4.关于js和css的缓存。

我的解决办法是：通过你的核心部份的js后加参数（随后include进来的js后面都给其定意和核心js一样的参数），而如果你想所有控制所有页面，只能在服务器端输出核心脚本(同路径问题的服务器端输出)。

   5.如何减小多张图片的连接数

可以合并一张图片，用css样式定位。如:

.afirst,.alast,.anext,.apre,.nnext,.nlast,.nfirst,.npre{background:url(imgs/grid/gridbg.gif) 0px -116px;}

.anext{background-position:0px -153px;}

.alast{background-position:0px -221px;}

.apre{background-position:0px -185px;}

.nnext{background-position:0px -135px;}

.nlast{background-position:0px -200px;}

.nfirst{background-position:0px -97px;}

.npre{background-position:0px -169px;}

其实上面图片是同一张，只是定位在不同位置吧！（css的路径引用图片的路径好像比js好）

上而合并一张图片还有一个好处是，比如当你按钮可能onmouseover时一一张图片，而onmouserout又是一另张图片，用户鼠标经过就会有感觉闪了一下，如果网速慢还要再去下载那个图片的过程，这是呈现的是一片空明（呵呵，在一定程度上提升用户体验）

  6.站点发布后css,js压缩

我的想法是这样的(没实现)，当我们的vs在生成网站的时候可以自动将js或者css自动压缩 (当然可能还是会遇到点问题的，因为很有可能js压缩后出现问题，你在写js的时可能会少了一个分号，那样必定会造成出错)

  7.按需装载和延迟装载问题

上面如果我用$include引进文件还得在window.onload事件里面去执行，如果能在$include下面的代码能可引用包含进来的文件的function的话，那就可以实现按需装载的过程了。可是通常这种解决办法是通过一种同步的阻塞式的装载过程，用户体验很差（电脑像死机一样了）。JSI号称可以延迟装载这个过程，不知道这个过程是怎么实现的。

 

以上是我在Web开发和构架中的一些待解决问题，不知道园子里的朋友，还遇到哪些问题，希望能一起分享和探讨。