Performance, JavaScript and HTML tags separated, smooth degradation

Performance

1. Minimize DOM access and markup, reduce the use of methods such as document.getElementsByTagName (), and store the values returned by such methods in variables.

2. Merge scripts, style files, picture files, and so on to reduce the number of requests to load pages.

3. Compress the script.

JavaScript is separated from HTML tags

When we add an action, there is a first reaction:

<div id= "Div1" onclick= "dosomething (This)" >click here</div>

This is JavaScript code function doSomething1 (node) {}function doSomething2 (node) {}

But that's not scientific. When we need to modify a series of similar tags, they have a similar approach:

<div id= "contain" > <div id= "div1" onclick= "doSomething1 (This)" >click here</div> <div id= "Div2" Onclick= "DoSomething1 (This)" >click here</div> <div id= "Div3" onclick= "doSomething1 [This]" >click here </div> <div id= "div4" onclick= "doSomething1 (This)" >click here</div> <div id= "div5" onclick= "DoS Omething1 (This) ">click here</div></div>

If you need to bind other methods (such as doSomething2 ()) to the onclick events of Div4 and DIV5, you will need to face some tedious work.

In fact, we can look like this:

Window.onload=function () {var Divs=documen.getelementbyid ("contain"). getElementsByTagName ("div");            for (Var i=0;i<divs.length;i++) {if (Divs[i].getattribute ("id"). replace ("div", "") <=3) {//Determine if it is div1~div3        Divs[i].onclick=dosomething1;        }else{divs[i].onclick=dosomething2; }    }}

At this point, if you need to add to the elements of the HTML page, modify, delete, in the JS file can be done.

Smooth degradation

Requirements: Click on the above link, the lower section of the picture, the point of different links appear different pictures.

<ul id= "Imagegallery" >        <li>             <a href= "Images/1.jpg"  title= "1.jpg" > </a>        </li>         <li>             <a href= "Images/2.jpg"  title= "2.jpg" ></a>        </li>         <li>            <a href= "Images/3.jpg"  title= "3.jpg" ></a>         </li>        <li>             <a href= "Images/4.jpg"  title= "4.jpg" ></a>        </li>         <li>            <a  href= "Images/5.jpg"  title= "5.jpg" ></a>         </li>        <li>             <a href= "Images/6.jpg"   Title= "6.jpg" ></a>         </li>        <li>             <a href= "Images/7.jpg"  title= "7.jpg" ></a> &nbsP;      </li>    </ul> 

The

Next is the JS code:

Window.onload=function () {        //traverse li elements in UL, event bindings      if (!document.getelementsbytagname        | |! document.getelementbyid        | |! document.getElementById ("Imagegallery")) {        return false;     }    var gallery=document.getelementbyid ("Imagegallery");     var links=gallery.getelementsbytagname ("a");     for (var  i=0;i<links.length;i++) {        links[i].onclick=function () {             return !showpic (This);             //This step is crucial. <a> note is clicked to cause the page to jump, unless a return of false is obtained after the onclick event is triggered              //inYes, if JS normal execution, then click <a> Tag can see the picture             //if JS is disabled, Then click on the <a> tab will jump, you can also see the picture         }    }} Function showpic (whichpic) {    //If the area where the picture is displayed does not exist, then the page jumps and jumps to the image at     if (! document.getElementById ("PlaceHolder")) Return false;        var  source=whichpic.getattribute ("href");     var placeholder= document.getElementById ("PlaceHolder");     placeholder.setattribute ("src", source);     if (document.getElementById ("description")) {         Var text=whichpic.getattribute ("title");        var  Description=document.getelementbyid ("description");         description.firstchild.nodevalue=text;    }    return true;} 

In any case, the content is the most important. To ensure that JS is disabled, you can still browse to the content.

Performance, JavaScript and HTML tags separated, smooth degradation