Do you pay attention to these front-end development problems during web development? (Front-end architecture)

Web brings us a better user experience and cool effects. Javascript, Flash, and Silverlight are all coming soon. Currently, JavaScript is the most widely used, so you will often see many Web websites with over n JS and CSS, at this time, the question of managing these files and how to improve performance is also raised by so many codes. Let's talk about some of the questions that I have come up.

1.JSAndCSSHow to enable concurrent download of requests during reference.

Through firebug, we will find that every request to mark referenced resources on the page through link and script is waiting in queue in the form of a queue, after a resource is downloaded, other requested resources are downloaded. Unlike images on our pages (images referenced in IMG tags and styles, images referenced in styles must be downloaded after the CSS file is loaded), and resource files can be downloaded concurrently. Yslow once proposed to optimize the web site, and put CSS in the head as much as possible (the style is suddenly displayed only after other resources are downloaded), but it is too dramatic, why is browsing loading CSS a queue? Are there any conflicting names in the style? Yslow also proposed to put JS at the end of the page. In this case, the JS resources downloaded from the whole page are almost completed on onload. This is a deep understanding. When your script is placed in the head, the whole page will be displayed after the script is loaded one by one, which directly affects web performance, I think it is more important than website speed than user experience, so we should put JS at the end. Is it okay to put it directly at the end? Another thing I want to optimize is to allow concurrent downloads. So how can we solve the concurrent download problem of these resources?

My method is to dynamically append dom (appendchild, dynamically append link and Script node to head ). Using this method, we will find that our queue suddenly becomes a hundred meters sprint, with a whistle, all rushed to the end (of course, there must be a certain limit on the number of concurrent requests ). However, the appendchild method in IE is in window. the onload event cannot reference the function of the resource, so I use docoument in IE. write to output (use document in IE. write is also a concurrent download, but Firefox does not ). Therefore, we usually use the include Method When referencing files. The include code is listed below.

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();
            }
        };
    }
};

Note:

1. corecsspath (CurrentCSSStorage path),Corejspath (CurrentJSStorage path),This is mainly because of Path Problems.,I will talk about it later.

2. CallbackIs to call the method after the file is loaded.

3.By the way, I mainly useMootoolsSome functions

2.OurJSFile Management and reference are too exquisite, and the intrusion is too strong. A careful mistake of the order or dependency is not referenced, it will be miserable.C #OfUsingHow nice is referencing?!

The project is being expanded one day. Now, a large number of JS files are found, and the problem is that it is troublesome to manage the dependencies and sequence of these files. The JS class library may have dependencies, every reference must know the dependencies of the class and then write the <SCRIPT src = "Your JS file" type = "text/JavaScript"> </SCRIPT>, and maybe your JS has a dependency before loading (that is to say, before referencing a JS, you need to put a JS in front of your referenced JS). Otherwise, your running result must be an error, therefore, we urgently need to manage such class solutions. In this regard, jsi seems to be doing quite well. (Jsi has not studied it in depth and does not understand its principles. It seems complicated)

JS dependency example (introduced in jsi Documentation)

There are three types: Animal, cat, and mouse );

They have the following dependencies:

The cat and mouse are dependent on the animal class before loading (when loading these two classes, you need to create an animal instance as its prototype; this operation must be completed at loading,Pre-load dependency)

After a cat or mouse is loaded, it depends on each other during use (the behavior of the cat or mouse needs to identify the behavior of the other party, and mutual reference is used to installPost-load dependency).

For example, red indicates the dependency Before loading, and light green indicates the dependency after loading:

     


Let me talk about my idea (not implemented yet). It is best to have a dependency configuration file, and all dependencies are stored in a configuration file and describe the dependency (haha, it is best to use vs to automatically generate a link). I can see that jsi seems to have to write a _ package ___ for each dependency ___. isn't that troublesome for JS files? (Haha, not quite familiar)

3.About the path.

JS and CSS path management is also part of our management. When our page is changed to a folder location, we have to change the path in the code, which is really bad. So I use the $ include method above, as long as your core JS file path is determined, other paths are also determined (resource files imported using the $ include method ). If you want to change the file location without changing the path, you can use the core file to output the core JS on the server. The problem will be solved, so W3C seems to want to cancel the IMG mark and put it in CSS ). However, this will produce dependency on a certain development language. Do you have any better solutions for friends in the garden?

4.AboutJSAndCSS.

My solution is: Add parameters through the Js of your core part (the parameters later included in JS are set to be the same as those in the core JS ), if you want to control all pages, you can only output core scripts on the server side (server-side output with the same path problem ).

5.How to reduce the number of connections to multiple images

You can combine an image and use the CSS style to locate it. For example:

.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;}

In fact, the above picture is the same, just positioned in different locations! (The path of CSS to reference images seems better than that of JS)

Another advantage of merging an image is that, for example, when your button may be onmouseover and onmouserout is another image, the user's mouse will experience a flash, if the network speed is slow and the process of downloading the image is still slow, this is a blank picture (haha, to a certain extent, to improve the user experience)

6.CSS and JS compression after Site Publishing

My idea is this (not implemented). When our vs generates a website, it can automatically compress JS or CSS (of course, there may still be some problems, because it is very likely that there will be a problem after JavaScript compression, you may lose a semicolon when writing JavaScript, which will definitely cause errors)

7.On-Demand Loading and delayed Loading

If I use $ include to introduce the file above, it must be in window. the onload event is executed. If the code below $ include can reference the function of the contained file, the on-demand loading process can be implemented. But usually this solution is through a synchronous blocking loading process, the user experience is very poor (the computer is like a dead machine ). Jsi claims to be able to delay the loading process and does not know how this process is implemented.

 

The above are some of the issues to be solved in my web development and architecture. I don't know my friends in the garden and what problems I have encountered. I hope I can share them and discuss them together.